探索浏览器中的事件循环 Event loop

最新推荐文章于 2024-07-27 16:07:52 发布

love2016hy

最新推荐文章于 2024-07-27 16:07:52 发布

阅读量1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/love2016hy/article/details/80454249

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：由于浏览器中的事件循环机制与nodeJS中的事件循环机制不同，本文只记录基于浏览器的事件循环，希望能帮助到大家。

什么是异步？

我们知道 javascript 由于要和浏览器进行交互，所以从一开始它就被设计成了一门单线程非阻塞的脚本语言，

所谓单线程：即是任何时候，都只有一个主线程来处理所有的逻辑任务。
所谓非阻塞：即主线程不会直接处理异步任务，而是当它们返回结果之后再去处理，因为异步操作往往具有不确定性，会阻塞浏览器的渲染。
我们常用的，例如 ajax 请求、setTimeout、promise 都是异步操作

浏览器中的事件循环 event loop

html 标准中定义：

为了协调事件（event），用户交互（user interaction），脚本（script），渲染（rendering），网络（networking）等，用户代理（user agent）必须使用事件循环（event loops）。
有两类事件循环：一种针对浏览上下文（browsing context），还有一种针对worker（web worker）。

执行栈和事件队列

1.执行栈：

因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。

chrome浏览器Developer Tools 中的 performance 中的火焰图展示的便是执行栈的过程。
这里写图片描述

2.事件队列：

事件队列主要有宏任务队列和微任务队列

异步事件会由异步处理模块进行处理，返回处理结果后，加入与当前执行栈不同的其他队列

3.宏任务（task／macrotask）:

可以有一个或多个 task 队列

script（全局任务，每一个js文件也是一个宏任务）, setTimeout, setInterval, I/O, UI rendering.，setImmediate（属于nodeJS ）。

4.微任务（microtask）:

只有一个 microtask 队列

Promise, Object.observer, MutationObserver，process.nextTick（属于 nodeJS ）。

事件循环执行顺序

1. event loop 执行步骤：

1、执行宏任务（先进先出），一次循环只执行一个宏任务）
2、执行栈 —— 同步方法顺序执行，异步方法交给异步处理模块
3、执行栈为空时取出微任务执行（先进先出），直到微任务队列为空
4、更新UI渲染。完成一轮循环，反复执行1-4。（不一定每次循环都会渲染）

2.update the rendering 渲染更新：

在一轮event loop中多次修改同一dom，只有最后一次会进行绘制。
渲染更新（Update the rendering）会在event loop中的tasks和microtasks完成后进行，但并不是每轮event loop都会更新渲染，浏览器有自己的机制来确定是否要更新渲染。如果在一帧（16.7ms）里多次修改了dom，浏览器可能只会渲染绘制一次。
如果希望在每轮event loop都即时呈现变动，可以使用requestAnimationFrame.

巩固练习

1.简单测试：

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

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

console.log('4');