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

时间 2019-12-04

标签 javascript 事件循环 event loop 附图栏目 JavaScript 繁體版

原文原文链接

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

JS特色

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

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

Event Loop

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

栈(Stack)

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

队列（Queue)

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

微任务与任务

任务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）。promise

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

运行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>

复制代码

总结任务

任务（tasks）按循序执行，浏览器或许在一边执行任务（tasks）一边更新渲染
微任务（microtasks）也是按顺序执行
- 在每一次回调以后执行，只要没有其余js正在执行
- 在每一次任务以后
当前执行栈执行完毕时会马上先处理全部微任务队列中的事件，而后再去宏任务队列中取出一个事件。