JavaScript的事件循环（Event loop）(附图)

最新推荐文章于 2022-07-06 17:09:48 发布

weixin_33728268

最新推荐文章于 2022-07-06 17:09:48 发布

阅读量118

点赞数

文章标签： javascript ui ViewUI

原文链接：https://juejin.im/post/5c7a1b3af265da2de97096b7

版权

这是本人的理解，并且Google browser断点实践的，不同浏览器可能存在差异。章末附带外文视频地址。

JS特点

javascript一门单线程的非阻塞的脚本语言。当用户进行点击元素，又进行元素移除，这样就会导致哪个事件的优先级不知道，所以JS必须是单线程的。为了协调事件，用户交互，脚本，UI渲染，和网络处理，Event Loop可以防止主线程阻塞。在某些花费时间较长的事件，浏览器会将它们挂起（pending）,事件等待被执行，事件循环是通过任务队列实现的。

one thread == one callback == one thing at a time.

Event Loop

Browing Context
Worker 两者是独立的，有各自的线程环境。

栈(Stack)

栈是一种遵循后进先出（LIFO）的数据集合，新添加或待删除的元素都保存在栈的末尾，称作栈顶，另一端称作栈底。在栈里，新元素都靠近栈顶，旧元素都靠近栈底

队列（Queue)

队列是一种遵循先进先出（FIFO）的数据集合,新的条目会被加到队列的末尾，旧的条目会从队列的头部被移出。

微任务与任务

任务task：script（整体代码）、setTimeout、setInterval、I/O（输入输出设备）、UI交互事件，setImmediate（Node.js环境）,webAPI callback()等
微任务：Promise、MutationObserver、process.nextTick(Node.js环境)

JS执行规则

可以这样理解，有两个队列—— 执行队列（同步任务synchronous）、事件队列（异步任务asynchronous），存放所有着JS执行的任务（ajax、点击事件、UI渲染等、promise.then）。

执行队列存放所有同步代码的任务
事件队列存放所有异步代码的宏任务
微任务处于两个队列之间

运行Js代码，从上往下执行代码，同步代码，依次执行，遇到异步代码，则根据其任务类型，添加到相应的对应队列，宏任务放入事件队列，微任务放于执行队列之后(但是会是某个事件循环的最后)，事件队列（任务）之前。这个处理事件过程是不断循环的，只要主线程空了，就会去读取"任务队列"并且执行。

demo

<script>
    console.log('script start');

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

    new Promise(resolve => {
        console.log('promise1');
        resolve();
        setTimeout(() => {
            console.log('timeout2');
            new Promise(resolve => {
                resolve();
            }).then(function() {
                console.log('then3')
            })
        }, 0);
    }).then(function() {
        console.log('then1')
    })
    new Promise(resolve => {
        resolve();
    }).then(function() {
        console.log('then2')
    })

    console.log('script end');
</script>

复制代码