javascript的执行机制—Event Loop

既然今天要谈的是javascript的事件循环机制，要理解事件循环，首先要知道事件循环是什么。

我们先从一个例子来看一下javascript的执行顺序。

<script>
    setTimeout(function() {
        console.log('定时器开始了.');
    },0)
    
    new Promise(function(resolve) {
        console.log('马上执行for循环了');
        for (let i = 0; i < 10000; i++) {
            i == 99 && resolve();
        }
    }).then(function() {
        console.log('执行then函数了');
    })
    
    console.log('代码执行结束');
    //执行结果为:
    //马上执行for循环了
    //代码执行结束
    //执行then函数了
    //定时器开始了.
</script>

怎么样，是不是和自己在心里运行的结果差了一万八千里呢。如果是的话，请耐心看完后面的内容，让你彻底弄明白javascript的事件循环机制。

单线程的javascript

要想了解事件循环的我们就得从javascript的工作原理开始说起。

javascript语言的一大特点就是单线程，可是为什么javascript不做成多线程呢？

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

任务队列

我们说单线程就意味着所有的任务必须排队。就类似于银行只有一个窗口，前一个任务执行结束后，后一个任务才能执行。如果新执行的任务耗时很长，那么后一个任务就不得不一直等着。

这样就又出现了一个问题，在进行浏览器的操作时，我们常常会通过ajax向后台发送请求，然而js必须等到浏览器接收到响应内容后才会继续往下执行，如果这段时间是10s，那么页面必须停在这里10s。这不仅会影响用户体验，也会降低CPU的利用率，显然不是我们想要的。

于是，聪明的程序员小哥哥就把任务分成了两类

• 同步任务
• 异步任务

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行，通常来说拥有callback回调函数的任务就是异步任务。

同步任务和异步任务的执行过程大致可以简化成如下的导图所示。

<script>
    console.log(1);
    setTimeout(function task() { 
　　　　console.log('定时器执行了.'); 
　　},1000); 
　　console.log(2); </script>

<script>
    setTimeout(function() {
        console.log('定时器开始了.');
    },0)
    
    new Promise(function(resolve) {
        console.log('马上执行for循环了');
        for (let i = 0; i < 10000; i++) {
            i == 99 && resolve();
        }
    }).then(function() {
        console.log('执行then函数了');
    })
    
    console.log('代码执行结束');
    //执行结果为:
    //马上执行for循环了
    //代码执行结束
    //执行then函数了
    //定时器开始了.
</script>

执行步骤如下所示。

• 当页面首次加载时，<script>标签内的代码段作为一个宏任务进入主线程，依次向下执行。
• 遇到setTimeout将回调函数注册后压入宏任务的事件队列。
• 遇到new Promise立即执行，输出'马上执行for循环了'。将then函数压入到微任务队列。
• 遇到console.log('代码执行结束')，执行代码。输出"代码执行结束了"。
• 主线程执行完后，先检查微任务队列中有没有待执行的任务，发现then函数在微任务队列里，将其取出到主线程执行，输出"执行then函数了"。
• 开始下一轮事件循环，从红任务队列中取出setTimeout事件的回调函数，执行。输出“定时器开始了”。
• 结束。

总结

javascript是一门单线程的语言，事件循环是js异步编程的一种方法。也是js的执行机制。当浏览器中的网页刚刚载入的时候，<script>里的代码会作为第一个宏任务被压入栈执行，同步代码执行完后，如果有微任务就执行微任务，没有微任务就执行下一个宏任务。如此往复循环，直至所有任务都执行完毕。

参考文章

JavaScript 运行机制详解：再谈Event Loop

浏览器内的事件队列

这一次，彻底弄懂 JavaScript 执行机制

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有