JS事件循环机制

目录

一，JS是单线程

二，同步任务和异步任务

同步任务：

异步任务：

三，宏任务 和 微任务

四，JS事件循环机制（Event Loop）

---

一，JS是单线程

        1，Javascript 语言是基于对象和事件驱动的弱类型脚本语言，并且可以与 HTML 完成丰富的页面交互效果；

        2，它的一大特点是单线程，意味着在同一时间只能做一件事；

        3，在单线程中所有任务是按顺序执行的，前一个任务执行完毕后才进行下一个任务；

        4，如果前一个任务耗时很长，后一个任务将会一直等待执行；

        弊端：如果 JS 执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞。

二，同步任务和异步任务

                HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，子线程完全受主线程的控制，

        于是JS中出现 同步任务 和 异步任务。

同步任务：

        在主线程上排队执行，形成一个执行栈，只有前一个任务执行完毕，才能执行后一个任务；

异步任务：

        是进入 “任务队列” 的任务，当主线程中的任务运行完了，才会从 “任务队列” 取出异步任务放入主线程执行。

        1，JS的异步是通过 回调函数 实现；

        2，异步任务的类型：

                普通事件  ——  click、resize 等

                资源加载  ——  load、error 等

                定时器     ——  setInterval、setTimeout 等

/ / /  案例演示：

console.log(1);
document.onclick = function() {
    console.log('click');
}
 
setTimeout(function() {
    console.log(3)
}, 3000)
console.log(2);
// 执行顺序：1 -> 2 -> 3

三，宏任务 和 微任务

        **宏任务**（由浏览器规定）：

                <script>整体代码、setTimeout、setInterval、setImmediate、Ajax、DOM事件

        **微任务**（由ES6语法规定）：

                process.、MutationObserver、Promise.then catch finally

        同步任务执行完毕后，再将异步任务放到执行队列中，在异步任务中 微任务 优于 宏任务 执行。

        微任务 在DOM渲染前触发，宏任务 在DOM渲染后触发。

四，JS事件循环机制（Event Loop）

        1，先执行执行栈中的同步任务，同步任务执行完毕后执行异步任务；

        2，执行异步任务队列中的微任务，再执行宏任务；

        3，执行完任务后进行DOM渲染页面；

        4，再触发事件循环（ Event Loop）反复询问回调队列中是否有要执行的语句，有则放入调用栈中继续执行。