浏览器工作原理

单线程的含义

浏览器是multi-process，一个浏览器只有一个Browser Process，负责管理Tabs、协调其他process和Render process 存至 memory内的 Bitmap绘制到页面上的（pixel）：在 Chrome 中，一个Tab对应一个Render Process,Render Process是multi-thread，其中main thread负责页面渲染（GUI render engine）执行JS （JS engine）和event loop; network component可以开2-6个I/O threads平行去处理

浏览器端的event loop

一个函数执行栈、一个事件队列和一个微任务队列

每从事件队列中取一个事件时有微任务把微任务执行完，然后才开始执行事件

宏任务和微任务

• 宏任务，macrotask，也叫tasks，一些异步任务的回调会依次进入macro task queue,等待后续被调用，这些异步任务包括：

  • setTimeout

  • setInterval

  • setImmediate(Node独有)

  • requestAnimationFrame(浏览器独有)

  • I/O

  • UI rending (浏览器独有)

• 微任务，microtask，也叫jobs，另一些异步任务的回调会依次进入micro task queue，等待后续别调用，这些异步任务包括：

  • process nextTick(Node 独有)

  • Promise.then()

  • Object.observe

  • MutationObserver

  注：这里只针对浏览器和NodeJS

  Promise构造函数里的代码是同步执行的

Nodejs架构图

Node.js中的Event Loop

Node.js的Event Loop过程

• 执行全局Script的同步代码

• 执行microtask微任务，先执行所有Next Tick Queue中所有任务，在执行Other Microtask Queue

  中的所有任务

• 开始执行macrotask宏任务，共6个阶段，从第1个阶段开始执行相应每一个阶段macrotask中的所有任务，注意，这里是所有每个阶段宏任务队列的所有任务，在浏览器的Event Loop中是只取宏队列的第一个任务出来执行，每一个阶段的macrotask任务执行完毕后，开始执行微任务，也就是步骤2

• Timers Queue -> 步骤 -> I/O Queue -> 步骤2 -> Check Queue -> 步骤2 -> Close Callback Queue -> 步骤2 -> Timers Queue ......

• 这就是Node的Event Loop【简化版】