JS事件循环

目录

进程、线程

浏览器内核

浏览器内核有多种线程在工作。

GUI 渲染线程:

JS 引擎线程:

事件触发线程:

定时器触发线程:

http 请求线程:

宏任务与微任务

 事件循环

先执行同步代码，然后去任务队列中取出异步回调（宏任务），等到主线程空了再执行

---

进程、线程

• 进程是系统分配的独立资源，是 CPU 资源分配的基本单位，进程是由一个或者多个线程组成的。

• 线程是进程的执行流，是CPU调度和分派的基本单位，同个进程之中的多个线程之间是共享该进程的资源的。

---

浏览器内核

• 浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程（也不一定，因为多个空白 tab 标签会合并成一个进程），浏览器内核（浏览器渲染进程）属于浏览器多进程中的一种。

• 浏览器内核有多种线程在工作。

  • GUI 渲染线程:

    • 负责渲染页面，解析 HTML，CSS 构成 DOM 树等，当页面重绘或者由于某种操作引起回流都会调起该线程。
    • 和 JS 引擎线程是互斥的，当 JS 引擎线程在工作的时候，GUI 渲染线程会被挂起，GUI 更新被放入在 JS 任务队列中，等待 JS 引擎线程空闲的时候继续执行。

  • JS 引擎线程:

    • 单线程工作，负责解析运行 JavaScript 脚本。
    • 和 GUI 渲染线程互斥，JS 运行耗时过长就会导致页面阻塞。

  • 事件触发线程:

    • 当事件符合触发条件被触发时，该线程会把对应的事件回调函数添加到任务队列的队尾，等待 JS 引擎处理。

  • 定时器触发线程:

    • 浏览器定时计数器并不是由 JS 引擎计数的，阻塞会导致计时不准确。
    • 开启定时器触发线程来计时并触发计时，计时完成后会被添加到任务队列中，等待 JS 引擎处理。

  • http 请求线程:

    • http 请求的时候会开启一条请求线程。
    • 请求完成有结果了之后，将请求的回调函数添加到任务队列中，等待 JS 引擎处理。

---

宏任务与微任务

• macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
• micro-task(微任务)：Promise，process.nextTick

---

 事件循环

js是单线程，浏览器是多线程，当有异步任务时，会让浏览器启动另一线程，主线程只执行回调

 

• 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
• 当指定的事情完成时，Event Table会将这个函数移入Event Queue。
• 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
• 上述过程会不断重复，也就是常说的Event Loop(事件循环)。

。

同步代码

微任务

宏任务

 

调用栈，遇见函数就入栈，遇见操作就入栈，操作执行完毕就出栈，函数执行完毕出栈

遇见setTimeout，将其回调放入消息队列（宏任务队列）中，调用栈清空时执行，先压入再执行，然后出栈。

遇见promise，将其回调放入微任务队列，调用栈为空将其压入调用栈并执行。

 不同类型的任务会进入对应的Event Queue，比如setTimeout和setInterval会进入相同的Event Queue。

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

new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then');
})

console.log('console');
复制代码

• 这段代码作为宏任务，进入主线程。
• 先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue。(注册过程与上同，下文不再描述)
• 接下来遇到了Promise，new Promise立即执行，then函数分发到微任务Event Queue。
• 遇到console.log()，立即执行。
• 好啦，整体代码script作为第一个宏任务执行结束，看看有哪些微任务？我们发现了then在微任务Event Queue里面，执行。
• ok，第一轮事件循环结束了，我们开始第二轮循环，当然要从宏任务Event Queue开始。我们发现了宏任务Event Queue中setTimeout对应的回调函数，立即执行。
• 结束。

作者：ssssyoki
链接：https://juejin.cn/post/6844903512845860872
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。