JavaScript 的运行机制

素颜马尾好姑娘i 2021-11-29 13:34 302阅读 0赞

## 前言 ##

*  参看文章：  
    [这一次，彻底弄懂 JavaScript 执行机制][JavaScript]  
    [JavaScript 运行机制详解：再谈Event Loop][JavaScript _Event Loop]

作为一个前端er，最基本的要求也得知道js的运行机制叭。由于js是单线程的，所以js是按顺序执行的。

console.log('1')
    console.log('2')
    输出：1，2。果然是按顺序执行的。本文结束。

来点复杂的。

setTimeout(function () {
          console.log('1')
        })
        new Promise((resolve) => {
          console.log('2')
          resolve()
        }).then(() => {
          console.log('3')
        })
        console.log('4')
    输出：2，4，3，1。这个是为啥子嘞。

## 从 js 单线程说起 ##

`js`是一门单线程的语言，设计之初，是在浏览器中运行的，方便处理`DOM`树的。如果是多线程的话，一个线程删除`DOM`，一个线程修改`DOM`，这样就会出现问题。`HTML5`引入了`web workers`，使`js`能够创建多个线程，是为了防止大量的数据计算阻塞`UI`渲染，但这些线程都是受主线程控制的，所以`js`在本质上还是单线程的。

## 表面很难的event loop ##

`js` 是单线程的，所以一次只能执行一个任务，当一个任务需要很长时间时，主线程一直等待任务的执行完成，在执行下个任务是很浪费资源的。  
比如，我们吃泡面时候，先烧水，在等待水烧开的时候，我们可以把泡面打开，作料放好，等水开了，直接泡就好。那个吃干脆面的走开。  
所以，`js`中任务就被分成两种，一种是同步任务，一种是异步任务。执行步骤如下图所示：  
![16b83ece9d14eab0?w=1240&h=861&f=png&s=152583][16b83ece9d14eab0_w_1240_h_861_f_png_s_152583]

## 宏任务和微任务 ##

为了更精细的区分任务，`js`中可以将异步任务划分为宏任务和微任务。  
`js`代码在执行时，首先执行`js`同步任务，然后执行所有微任务，再执行所有宏任务，以此循环下去，直到所有任务全部执行完成。

*  常见的宏任务：`setTimeout`，`setInterval`
 *  常见的微任务：`promise.then`。  
    看下这段代码：

setTimeout(function () {
          console.log('1')
        })
        new Promise((resolve) => {
          console.log('2')
          resolve()
        }).then(() => {
          console.log('3')
        })
        console.log('4')

*  首先执行setTimeout，进入任务队列，注册成宏任务。
 *  Promise，直接执行，输出：2，然后promise.then，进入任务队列，注册成微任务。
 *  然后遇到console.log('4')，直接输出：4。
 *  同步任务执行完，从任务队列中找出要执行的微任务，输出：3。
 *  然后执行宏任务，输出：1。  
    下面我们看个更复杂的例子：

console.log('1');
        setTimeout(function () {
          console.log('2');
          new Promise(function (resolve) {
            console.log('3');
            resolve();
          }).then(function () {
            console.log('4')
          })
        })
        new Promise(function (resolve) {
          console.log('5');
          resolve();
        }).then(function () {
          console.log('6')
        })
    
        setTimeout(function () {
          console.log('7');
          new Promise(function (resolve) {
            console.log('8');
            resolve();
          }).then(function () {
            console.log('9')
          })
        })
        console.log('10')

*  首先输出：1，然后注册宏任务`setTimeout1`。然后输出5，注册微任务`promise1`，然后注册宏任务`setTimeout2`，然后输出10。所以第一轮的事件循环，输出了`1 5 10`，注册了微任务`promise1`，宏任务`setTimeout1、setTimeout2`。
 *  然后`promise1`进入主线程，执行微任务`promise1`，输出：`6`。
 *  随后宏任务`setTimeout1`进入主线程，执行宏任务`setTimeout1`，输出：`2 3`，注册微任务`promise2`。
 *  注意的地方来了，宏任务`setTimeout1`执行完后，我们发现有微任务`promise2`在任务队列中，所以微任务`promise2`进入主线程，执行微任务`promise2`，输出：`4`。
 *  随后宏任务`setTimeout2`进入主线程，输出：`7 8`，注册微任务`promise3`。
 *  最后微任务`promise3`进入主线程，输出：`9`。

转载于:https://www.cnblogs.com/yangrenmu/p/11073959.html

[JavaScript]: https://juejin.im/post/59e85eebf265da430d571f89
[JavaScript _Event Loop]: http://www.ruanyifeng.com/blog/2014/10/event-loop.html
[16b83ece9d14eab0_w_1240_h_861_f_png_s_152583]: https://user-gold-cdn.xitu.io/2019/6/23/16b83ece9d14eab0?w=1240&h=861&f=png&s=152583