JS事件循环机制

区分进程和线程

• 进程是一个工厂，工厂有它的独立资源
• 工厂之间相互独立
• 线程是工厂中的工人，多个工人协作完成任务
• 工厂内有一个或多个工人
• 工人之间共享空间

• 工厂的资源 -> 系统分配的内存（独立的一块内存）
• 工厂之间的相互独立 -> 进程之间相互独立
• 多个工人协作完成任务 -> 多个线程在进程中协作完成任务
• 工厂内有一个或多个工人 -> 一个进程由一个或多个线程组成
• 工人之间共享空间 -> 同一进程下的各个线程之间共享程序的内存空间（包括代码段、数据集、堆等）

• 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
• 线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

浏览器内核（渲染进程）

GUI渲染线程

• 当浏览器收到响应的html后，该线程开始解析HTML文档构建DOM树，解析CSS文件构建CSSOM，合并构成渲染树，并计算布局样式，绘制在页面上(该处可深挖的坑，HTML解析规则，CSS解析规则，渲染流程细节)
• 当界面样式被修改的时候可能会触发reflow（回流）和repaint（重绘），该线程就会重新计算，重新绘制，是前端开发需要着重优化的点（值得注意的是react和vue都使用了虚拟DOM）

JS引擎线程

事件触发线程

定时触发器线程

异步HTTP请求线程

GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

浏览器对同一域名请求的并发连接数是有限制的，Chrome和Firefox限制数为6个

Preview

浏览器内核中线程之间的关系

1、GUI渲染线程与JS引擎线程互斥

2、JS阻塞页面加载

3、WebWorker

浏览器渲染流程

查询缓存

DNS解析

建立TCP连接（3次握手）

客户端发起http请求

服务器处理请求

服务器响应请求

浏览器解析html

浏览器渲染引擎从网络层取得请求的文档，一般情况下文档会分成 8KB 大小的分块传输。 浏览器渲染引擎从上往下执行代码（包括HTML,CSS和JS），解析html生成DOM树，同时解析CSS代码生成css rule tree，同时把DOM tree和css rule tree合并生成render tree，同时还会去请求另一些资源，所以渲染引擎会同时干很多事，迫不及待地把内容渲染出来，如果后面的代码会改变之前的样式，会引起回流和重绘。 具体渲染流程见下图

Preview

断开TCP连接（4次挥手）

Event Loop -> JS事件循环机制

同步任务都在主线程上执行，形成一个执行栈 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

Preview

为什么定时器不能准时执行？

注：一般的话，路由跳转无法销毁setInterval和setTimeout等全局方法（因为它们属于window的方法），所以在使用vue和react native、react等框架时，路由的跳转之前，要清空定时器。

Preview

上图大致描述就是： 主线程运行时会产生执行栈， 栈中的代码调用某些api时，它们会在事件队列中添加各种事件（当满足触发条件后，如ajax请求完毕） 而栈中的代码执行完毕，就会读取事件队列中的事件，去执行那些回调 如此循环 注意，总是要等待栈中的代码执行完毕后才会去读取事件队列中的事件

JavaScript
复制代码
setTimeout(function(){
    console.log('start');
}, 0);

console.log('end');

宏任务与微任务

Preview

从上图我们可以了解到详细的运行机制：

• 执行一个宏任务（栈中没有就从事件队列中获取） 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

JavaScript
复制代码
console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

JavaScript
复制代码
console.log('script start');

setTimeout(function() {
  console.log('timeout1');
}, 10);

new Promise(resolve => {
    console.log('promise1');
    resolve();
    setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
    console.log('then1')
})

console.log('script end'); 

• 宏任务（macrotask）： 异步 Ajax 请求、 setTimeout、setInterval、 文件操作 其它宏任务
• 微任务（microtask）： Promise.then、.catch 和 .finally process.nextTick 其它微任务

补充：nodeJs中的事件循环

• Node.js 使用事件驱动模型，当web server接收到请求，就把它关闭然后进行处理，然后去服务下一个web请求。
• 当这个请求完成，它被放回处理队列，当到达队列开头，这个结果被返回给用户。
• 这个模型非常高效可扩展性非常强，因为 webserver 一直接受请求而不等待任何读写操作。（这也称之为非阻塞式IO或者事件驱动IO）
• 在事件驱动模型中，会生成一个主循环来监听事件，当检测到事件时触发回调函数。
  

  Preview
  整个事件驱动的流程就是这么实现的，非常简洁。有点类似于观察者模式，事件相当于一个主题(Subject)，而所有注册到这个事件上的处理函数相当于观察者(Observer)。