阅读 54

浅析javascript事件循环(eventLoop)

前言

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

为何只能是单线程?

试想一下,假定JavaScript 同时有两个线程,一个线程在某个 DOM 节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准呢

javascript是单线程语言,如何执行异步代码

js执行异步代码机制:

1.所有任务都在主线程上执行,形成一个执行栈;

2.主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件;

3.一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列"。那些对应的异步任务,结束等待状态,进入执行栈并开始执行;

4.主线程不断重复以上3步。

宏任务(macrotask

script(整体代码)、setTimeout、setInterval、UI 渲染、 I/O、postMessage、 MessageChannel、setImmediate(Node.js 环境)

微任务

Promise.then、 MutaionObserver、process.nextTick(Node.js环境)

Event Loop(事件循环)中,每一次循环称为 tick, 每一次tick的任务如下:

1.执行栈选择最先进入队列的宏任务(通常是script整体代码);

2.检查是否存在 Microtask,如果存在则不停的执行,直至清空 microtask 队列;

3.更新render(每一次事件循环,浏览器都可能会去更新渲染)

4.重复以上步骤

实践:

```
 console.log('script start');  
 setTimeout(function () {    
    console.log("timeout");
    });
    new Promise(function(resolve,reject){
        console.log(2)
        resolve(3)
    }).then(function(val){
        console.log(val);
    })
  console.log('script end');
```
复制代码

打印顺序:script start->2->script end->3->timeout

vue源码之$nextTick 👈🏻

源码中 MutationObserver 介绍

MO是html5新的API,是用来监听DOM变动的接口,他能监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等等。

var mo = new MutationObserver(callback);
var domTarget = 你想要监听的dom节点
mo.observe(domTarget, {
      characterData: true //说明监听文本内容的修改。
})
复制代码

MutationObserver的回调(callback)是放在microtask中执行的。

文章分类
前端
文章标签