周元-JavaScript的运行机制

进程与线程

• 进程：CPU分配资源的最小单位；包括：进行中的程序 + 进行中的程序所使用的内存和资源；

CPU可以有很多进程，我们的电脑每打开一个软件就会产生一个或多个进程；CPU给每个进程分配资源空间，但CPU资源固定，分出去越多，越卡，每个进程之间是相互独立的，CPU在运行一个进程时，其他的进程处于非运行状态，CPU使用 时间片轮转调度算法 来实现同时运行多个进程。

• 线程：CPU的调度的最小单位；线程是建立在进程的基础上的一次程序运行单位，通俗点解释线程就是程序中的一个执行流，一个进程可以有多个线程。

1. 一个进程中只有一个执行流称作单线程，即程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。
2. 一个进程中有多个执行流称作多线程，即在一个程序中可以同时运行多个不同的线程来执行不同的任务， 也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。

进程与线程的区别

进程是操作系统分配资源的最小单位，线程是程序执行的最小单位。

1. 一个进程里可能包含多个线程，线程可以理解为是一个进程中代码的不同执行路线；

2. 进程之间相互独立，但同一进程下的各个线程间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号)；

程序：让线程执行不用的任务；

3. 调度和切换：线程上下文切换比进程上下文切换要快得多

• 多进程

多进程指的是在同一个时间里，同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。多进程带来的好处是明显的，比如大家可以在网易云听歌的同时打开编辑器敲代码，编辑器和网易云的进程之间不会相互干扰；

• 多线程

多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，也就是说允许单个程序创建多个并行执行的线程来完成各自的任务；

Q: JS为什么是单线程？

作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

如果是双线程或多线程，不符合JS设计语言的规范和目的；比如，双线程下，两条命令一个删除div，一个添加div，不知道该执行哪一个~

• Web Worker

HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程是完 全受主线程控制的，而且不得操作DOM；可用于帮忙解决其他任务。所以，这个标准并没有改变JavaScript是单线程的本质。

浏览器

Chrome：每打开一个Tab页就会产生一个进程。

进程相互独立，避免某个Tab页崩掉影响其他Tab页~

浏览器进程

1. Brower进程：主进程，负责协调，主控，只有一个；负责界面显示，交互，页面管理等；
2. 插件进程
3. GPU进程：只有一个，用于3D绘制，图形化渲染等
4. 渲染进程（Render进程）：即浏览器内核，多线程；每个Tab页都有一个独立的进程；页面渲染，JS脚本执行，事件处理等；

渲染进程

页面的渲染，JS的执行，事件的循环，都在渲染进程内执行。

1. GPU的渲染线程：负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等；

   • DOM Tree + CSSDOM => Rendering Tree;
   • 重绘(Repaint)、回流(Reflow)
   • 与JS的执行线程互斥，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行

2. JS引擎线程：JS引擎线程就是JS内核，负责处理Javascript脚本程序(例如V8引擎)；

   • <script>，JS引擎线程负责解析Javascript脚本，运行代码；defer: JS延迟执行，知道DOM渲染完成；async: 不会让脚本阻塞文档；
   • 浏览器同时只能有一个JS引擎线程在运行JS程序，所以js是单线程运行的；一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序；
   • GUI渲染线程与JS引擎线程是互斥的，js引擎线程会阻塞GUI渲染线程；

例如浏览器渲染的时候遇到<script>标签，就会停止GUI的渲染，然后js引擎线程开始工作，执行里面的js代码，等js执行完毕，js引擎线程停止工作，GUI继续渲染下面的内容。所以如果js执行时间太长就会造成页面卡顿的情况；（所以有了defer 和 async标签）

3. 事件触发线程：属于浏览器而不是JS引擎，用来控制事件循环，并且管理着一个事件队列(task queue)：onclick,methods...

   • 当js执行碰到事件绑定和一些异步操作(如setTimeOut，也可来自浏览器内核的其他线程，如鼠标点击、AJAX异步请求等)，会走事件触发线程将对应的事件添加到对应的线程中(比如定时器操作，便把定时器事件添加到定时器线程)，等异步事件有了结果，便把他们的回调操作添加到事件队列，等待js引擎线程空闲时来处理；
   • 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理；

4. 定时器触发线程：setInterval与setTimeout所在线程；通过单独线程来计时并触发定时(计时完毕后，添加到事件触发线程的事件队列中，等待JS引擎空闲后执行)，这个线程就是定时触发器线程，也叫定时器线程。

5. Http异步请求线程：XMLHttpRequest，当执行到一个http异步请求时，就把异步请求事件添加到异步请求线程，等http状态变化，再把回调函数添加到事件队列，等待js引擎线程来执行；

事件循环（Event Loop）

JS分为同步任务和异步任务。同步任务都在主线程(JS引擎线程)上执行，会形成一个执行栈。

JS引擎线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放一个事件回调。一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，将可运行的异步任务(任务队列中的事件回调，只要任务队列中有事件回调，就说明可以执行)添加到执行栈中，开始执行。

• 一个例子：

let setTimeoutCallBack = function() {
  console.log('我是定时器回调');
};
let httpCallback = function() {
  console.log('我是http请求回调');
}

// 同步任务
console.log('我是同步任务1');

// 异步定时任务
setTimeout(setTimeoutCallBack,1000);

// 异步http请求任务
ajax.get('/info',httpCallback);

// 同步任务
console.log('我是同步任务2');

1. JS是按照顺序从上往下依次执行的；
2. 首先，执行console.log('我是同步任务1')；
3. 接着，执行到setTimeout时，会移交给定时器线程，通知定时器线程 1s 后将 setTimeoutCallBack 这个回调交给事件触发线程处理，在 1s 后事件触发线程会收到 setTimeoutCallBack 这个回调并把它加入到事件触发线程所管理的事件队列中等待执行；
4. 接着，执行http请求，会移交给异步http请求线程发送网络请求；请求成功后将 httpCallback 这个回调交由事件触发线程处理，事件触发线程收到 httpCallback 这个回调后把它加入到事件触发线程所管理的事件队列中等待执行；
5. 再接着执行console.log('我是同步任务2')；
6. 至此主线程执行栈中执行完毕，JS引擎线程已经空闲；开始询问事件触发线程的事件队列中是否有需要执行的回调函数，如有则将事件队列中的回调事件加入执行栈中，开始执行回调；如果事件队列中没有回调，JS引擎线程会一直发起询问，直到有为止；

总结：

• 定时触发线程只管理定时器且只关注定时不关心结果，定时结束就把回调扔给事件触发线程；
• 异步http请求线程只管理http请求同样不关心结果，请求结束把回调扔给事件触发线程；
• 事件触发线程只关心异步回调入事件队列；
• JS引擎线程只会执行执行栈中的事件，执行栈中的代码执行完毕，就会读取事件队列中的事件并添加到执行栈中继续执行；
• 反复执行，就是我们所谓的事件循环(Event Loop)；

宏任务（macrotask）

在ECMAScript中，macrotask也被称为task。

JS执行上下文执行的过程就是一个宏任务，每一个宏任务会从头到尾执行完毕，不会执行其他。

宏任务：JS线程同步执行，不能异步中断

宏任务 -> GUI渲染 -> 宏任务 -> ...

1. 主代码块；
2. setTimeout，setInterval；
3. setImmediate () -Node；
4. requestAnimationFrame () -浏览器

微任务(microtask)

ES6新引入了Promise标准，同时浏览器实现上多了一个microtask微任务概念，在ECMAScript中，microtask也被称为jobs。

微任务可以理解成在当前宏任务执行后立即执行的任务。

当一个宏任务执行完，会在渲染前，将执行期间所产生的所有微任务都执行完.

宏任务 -> 微任务 -> GUI渲染 -> 宏任务 -> ...

1. process.nextTick () -Node；
2. Promise.then()；
3. catch；
4. finally；
5. Object.observe；
6. MutationObserver；

宏任务与微任务区别

• 一个例子：

document.body.style = 'background:blue'
console.log(1);
Promise.resolve().then(()=>{
    console.log(2);
    document.body.style = 'background:pink'
});
console.log(3);

1. 输出 1 3 2 , 是因为 promise 对象的 then 方法的回调函数是异步执行，所以 2 最后输出;
2. 页面的背景色直接变成粉色，没有经过蓝色的阶段，是因为，我们在宏任务中将背景设置为蓝色，但在进行渲染前执行了微任务，在微任务中将背景变成了粉色，然后才执行的渲染。

• 总结：

1. 浏览器会先执行一个宏任务，紧接着执行当前执行栈产生的微任务，再进行渲染，然后再执行下一个宏任务；
2. 微任务和宏任务不在一个任务队列!!!

例如setTimeout是一个宏任务，它的事件回调在宏任务队列，Promise.then()是一个微任务，它的事件回调在微任务队列，二者并不是一个任务队列；

Q: 微任务是如何产生的呢？

当执行到script脚本的时候，js引擎会为全局创建一个执行上下文，在该执行上下文中维护了一个微任务队列，当遇到微任务，就会把微任务回调放在微队列中，当所有的js代码执行完毕，在退出全局上下文之前引擎会去检查该队列，有回调就执行，没有就退出执行上下文，这也就是为什么微任务要早于宏任务.

完整的 Event Loop

1. 整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为同步任务、异步任务两部分，同步任务会直接进入主线程依次执行，异步任务会再分为宏任务和微任务；
2. 宏任务进入到Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；
3. 微任务也会进入到另一个Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；
4. 当主线程内的任务执行完毕，主线程为空时，会检查微任务的Event Queue，如果有任务，就全部执行，如果没有就执行下一个宏任务；
5. 上述过程会不断重复，这就是Event Loop；

Promise

new Promise(() => {}).then() 中，前面的 new Promise() 这一部分是一个构造函数，这是一个同步任务，后面的 .then() 才是一个异步微任务：

new Promise((resolve) => {
	console.log(1)
  resolve()
}).then(()=>{
	console.log(2)
})
console.log(3)
// 上面代码输出1 3 2

async/await 函数

async/await本质上还是基于Promise的一些封装，而Promise是属于微任务的一种

setTimeout(() => console.log(4))

async function test() {
  console.log(1)
  await Promise.resolve()
  console.log(3)
}

test()

console.log(2)
// 输出1 2 3 4

NodeJS中的运行机制

nodejs与浏览器的区别，就是nodejs的宏任务分好几种类型，而这好几种又有不同的任务队列，而不同的任务队列又有顺序区别，而微任务是穿插在每一种宏任务之间的。

1. Node会先执行所有类型为 timers 的 MacroTask，然后执行所有的 MicroTask(NextTick例外)；
2. 进入 poll 阶段，执行几乎所有 MacroTask，然后执行所有的 MicroTask；
3. 再执行所有类型为 check 的 MacroTask，然后执行所有的 MicroTask；
4. 再执行所有类型为 close callbacks 的 MacroTask，然后执行所有的 MicroTask；
5. 至此，完成一个 Tick，回到 timers 阶段，重复执行；

函数式编程

• 海鸥程序：

// 定义一个 海鸥 构造函数
function Flock (n) {
  this.seagulls = n;
};

// 定义 增加 方法
Flock.prototype.conjoin = function(other) {
  this.seagulls += other.seagulls;
  return this;
};

// 定义 乘 方法
Flock.prototype.breed = function(other) {
  this.seagulls = this.seagulls * other.seagulls;
  return this;
};

var flock_a = new Flock(4);
var flock_b = new Flock(2);
var flock_c = new Flock(0);

var result = flock_a.conjoin(flock_c).breed(flock_b).conjoin(flock_a.breed(flock_b)).seagulls;
//=> 32

// 期望：(4 + 0) * 2 + 4 * 2 = 16
// 实际：32  
// 因为原型方法返回this，flock_a 改变为 16 了

/**
 * 优化：
 */
var add = function(x, y) { return x + y };
var multiply = function(x, y) { return x * y };

var flock_a = 4;
var flock_b = 2;
var flock_c = 0;

var result = add(multiply(flock_b, add(flock_a, flock_c)), multiply(flock_a, flock_b));
//=>16

• 再优化：

// 结合律（assosiative）：(x + y) + z = x + (y + z)
add(add(x, y), z) == add(x, add(y, z));

// 交换律（commutative）: x + y = y + x
add(x, y) == add(y, x);

// 同一律（identity）: x + 0 = x
add(x, 0) == x;

// 分配律（distributive）: x * (y + z) = x * y + x * z
multiply(x, add(y,z)) == add(multiply(x, y), multiply(x, z));



// 原有代码
add(multiply(flock_b, add(flock_a, flock_c)), multiply(flock_a, flock_b));

// 应用同一律，去掉多余的加法操作（add(flock_a, flock_c) == flock_a）
add(multiply(flock_b, flock_a), multiply(flock_a, flock_b));

// 再应用分配律
multiply(flock_b, add(flock_a, flock_a));
// => flock_b * flock_a * 2;

函数式编程：面向函数式编程开发；

其他：面向对象编程

原子化

一等公民

函数是一等公民

函数没什么特殊的，你可以像对待任何其他数据类型一样对待它们——把它们存在数组里，当作参数传递，赋值给变量...等等。

const hi = name => `Hi ${name}`;

// bad
const greeting = name => hi(name);

// good
const greeting = hi;
greeting("times"); // "Hi times"


// bad
const getServerStuff = callback => ajaxCall(json => callback(json));
// good
const getServerStuff = ajaxCall;

/**
 * 原因如下：
 */
ajaxCall(json => callback(json));
// 等价于
ajaxCall(callback);
// 那么，重构下 getServerStuff
const getServerStuff = callback => ajaxCall(callback);
// ...就等于
const getServerStuff = ajaxCall // <-- 看，没有括号哦

所以：

// bad
const BlogController = {
  index(posts) { return Views.index(posts); },
  show(post) { return Views.show(post); },
  create(attrs) { return Db.create(attrs); },
  update(post, attrs) { return Db.update(post, attrs); },
  destroy(post) { return Db.destroy(post); },
};

// good
const BlogController = {
  index: Views.index,
  show: Views.show,
  create: Db.create,
  update: Db.update,
  destroy: Db.destroy,
};

getServerStuff和 BlogController，虽说添加一些没有实际用处的间接层实现起来很容易，但这样做除了徒增代码量，提高维护和检索代码的成本外，没有任何用处。

// 如果一个函数被不必要地包裹起来了，而且发生了改动，那么包裹它的那个函数也要做相应的变更。
httpGet('/post/2', json => renderPost(json));

// 如果 httpGet 要改成可以抛出一个可能出现的 err 异常，那我们还要回过头去把“胶水”函数也改了。
httpGet('/post/2', (json, err) => renderPost(json, err));

// 写成一等公民函数的形式，要做的改动将会少得多：
httpGet('/post/2', renderPost);  // renderPost 将会在 httpGet 中调用，想要多少参数都行

一定要非常小心 this 值，这一点与面向对象代码类似:

var fs = require('fs');
// bad
fs.readFile('freaky_friday.txt', Db.save);
// good a little
fs.readFile('freaky_friday.txt', Db.save.bind(Db));

把 Db 绑定（bind）到它自己身上以后，你就可以随心所欲地调用它的原型链式了。

this 有利有弊，如果不熟悉，尽量避免使用它，因为在函数式编程中根本用不到它。然而，在使用其他的类库时，可能会发现各种各样关于this的使用。

纯函数

没有任何副作用的函数。

相同的输入 => 相同的输出

• slice 符合纯函数的定义：因为对相同的输入它保证能返回相同的输出；
• splice 却不同：会产生可观察到的副作用，即这个数组永久地改变了；

var xs = [1,2,3,4,5];

// 纯的
xs.slice(0,3); //=> [1,2,3]
xs.slice(0,3); //=> [1,2,3]

// 不纯的
xs.splice(0,3); //=> [1,2,3]
xs.splice(0,3); //=> [4,5]

在函数式编程中，我们追求的是那种可靠的，每次都能返回同样结果的函数。

使用纯函数的形式，函数就能做到自给自足

从数学的概念上将，纯函数就是数学上的函数，而且是函数式编程的全部。

• 追求纯函数的原因

1. 可缓存性（Cacheable）

纯函数总能够根据输入来做缓存~

var squareNumber  = memoize(function(x){ return x*x; });

squareNumber(4); //=> 16
squareNumber(4); // => 16
// 从缓存中读取输入值为 4 的结果

squareNumber(5); //=> 25
squareNumber(5); //=> 25
// 从缓存中读取输入值为 5 的结果

// 缓存函数
var memoize = function(f) {
  var cache = {};
  return function() {
    var arg_str = JSON.stringify(arguments);
    cache[arg_str] = cache[arg_str] || f.apply(f, arguments);
    return cache[arg_str];
  };
};

2. 可移植性／自文档化（Portable / Self-Documenting）

纯函数是完全自给自足的，它需要的所有东西都能轻易获得；纯函数的依赖很明确，因此更易于观察和理解。

3. 可测试性（Testable）

4. 合理性（Reasonable）

纯函数最大的好处是引用透明性（referential transparency）。如果一段代码可以替换成它执行所得的结果，而且是在不改变整个程序行为的前提下替换的，那么我们就说这段代码是引用透明的。

5. 并行代码

我们可以并行运行任意纯函数。因为纯函数根本不需要访问共享的内存，而且根据其定义，纯函数也不会因副作用而进入竞争态（race condition）。

柯里化

curry 的概念很简单：只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。

代码组合

两个函数组合之后返回了一个新函数，也就是组合某种类型（本例中是函数）的两个元素本就该生成一个该类型的新元素。

// 在 compose 的定义中，g 将先于 f 执行，因此就创建了一个从右到左的数据流。这样做的可读性远远高于嵌套一大堆的函数调用
var compose = function(f,g) {
  return function(x) {
    return f(g(x));
  };
};

// eg
var toUpperCase = function(x) { return x.toUpperCase(); };
var exclaim = function(x) { return x + '!'; };
var shout = compose(exclaim, toUpperCase);
shout("send in the clowns");
//=> "SEND IN THE CLOWNS!"

// 如果不用组合，shout 函数将会是这样的：
var shout = function(x){
  return exclaim(toUpperCase(x));
};

• 结合律：

// 结合律（associativity）
var associative = compose(f, compose(g, h)) == compose(compose(f, g), h); // true
// eg
compose(toUpperCase, compose(head, reverse));
// 或者
compose(compose(toUpperCase, head), reverse);


// 结合律的一大好处是任何一个函数分组都可以被拆开来，然后再以它们自己的组合方式打包在一起。让我们来重构重构前面的例子：
var loudLastUpper = compose(exclaim, toUpperCase, head, reverse);
// 或
var last = compose(head, reverse);
var loudLastUpper = compose(exclaim, toUpperCase, last);
// 或
var last = compose(head, reverse);
var angry = compose(exclaim, toUpperCase);
var loudLastUpper = compose(angry, last);

运用结合律能为我们带来强大的灵活性，而且你也可以在类似 lodash、underscore 以及 ramda 这样的类库中找到它们的常规定义。

• pointfree

pointfree 模式指的是，永远不必说出你的数据。它的意思是说，函数无须提及将要操作的数据是什么样的。一等公民的函数、柯里化（curry）以及组合协作起来非常有助于实现这种模式。

// 非 pointfree，因为提到了数据：word
var snakeCase = function (word) {
  return word.toLowerCase().replace(/\s+/ig, '_');
};
// pointfree
var snakeCase = compose(replace(/\s+/ig, '_'), toLowerCase);


// 非 pointfree，因为提到了数据：name
var initials = function (name) {
  return name.split(' ').map(compose(toUpperCase, head)).join('. ');
};
// pointfree
var initials = compose(join('. '), map(compose(toUpperCase, head)), split(' '));
initials("hunter stockton thompson");
// 'H. S. T'

pointfree 模式能够帮助我们减少不必要的命名，让代码保持简洁和通用。

讲义

• JavaScript的运行机制 (opens new window)

• 函数式编程 (opens new window)