JavaScript之彻底理解EventLoop |
您所在的位置：网站首页 › 互斥事件什么意思 › JavaScript之彻底理解EventLoop |
JavaScript之彻底理解EventLoop
|
小知识，大挑战！本文正在参与「程序员必备小知识」创作活动 本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。 前言Event Loop即事件循环，是浏览器或Node解决单线程运行时不会阻塞的一种机制。 在正式学习Event Loop之前，先需要解决几个问题： 什么是同步与异步？ JavaScript是一门单线程语言，那如何实现异步？ 同步任务和异步任务的执行顺序如何？ 异步任务是否存在优先级？ 同步与异步计算机领域中的同步与异步和我们现实社会的同步和异步正好相反。现实中的同步，就是同时进行，突出的是"同"，比如看足球比赛的时候吃着零食，两件事情同时发生；异步就是不同时。但计算机中与现实存在一定差异。 举个栗子天气冷了，早上刚醒来想喝点热水暖暖身子，但这每天起早贪黑996，晚上回来太累躺下就睡，没开水啊，没法子，只好急急忙忙去烧水。 现在早上太冷了啊，不由得在被窝里面多躺了一会，收拾的时间紧紧巴巴，不能空等水开，于是我便趁此去洗漱，收拾自己。 洗漱完，水开了，喝到暖暖的热水，舒服啊！ 舒服完，开启新的996之日，打工人出发！ 烧水和洗漱是在同时间进行的，这就是计算机中的异步。 计算机中的同步是连续性的动作，上一步未完成前，下一步会发生堵塞，直至上一步完成后，下一步才可以继续执行。例如：只有等水开，才能喝到暖暖的热水。 单线程却可以异步？JavaScript的确是一门单线程语言，但是浏览器UI是多线程的，异步任务借助浏览器的线程和JavaScript的执行机制实现。 例如，setTimeout就借助浏览器定时器触发线程的计时功能来实现。 浏览器线程 GUI渲染线程 绘制页面，解析HTML、CSS，构建DOM树等 页面的重绘和重排 与JS引擎互斥(JS引擎阻塞页面刷新) JS引擎线程 js脚本代码执行 负责执行准备好的事件，例如定时器计时结束或异步请求成功且正确返回 与GUI渲染线程互斥 事件触发线程 当对应的事件满足触发条件，将事件添加到js的任务队列末尾 多个事件加入任务队列需要排队等待 定时器触发线程 负责执行异步的定时器类事件：setTimeout、setInterval等 浏览器定时计时由该线程完成，计时完毕后将事件添加至任务队列队尾 HTTP请求线程 负责异步请求 当监听到异步请求状态变更时，如果存在回调函数，该线程会将回调函数加入到任务队列队尾 同步与异步执行顺序 JavaScript将任务分为同步任务和异步任务，同步任务进入主线中中，异步任务首先到Event Table进行回调函数注册。 当异步任务的触发条件满足，将回调函数从Event Table压入Event Queue中。 主线程里面的同步任务执行完毕，系统会去Event Queue中读取异步的回调函数。 只要主线程空了，就会去Event Queue读取回调函数，这个过程被称为Event Loop。 举个栗子 setTimeout(cb, 1000)，当1000ms后，就将cb压入Event Queue。 ajax(请求条件, cb)，当http请求发送成功后，cb压入Event Queue。 EventLoop执行流程Event Loop执行的流程如下： 下面一起来看一个例子，熟悉一下上述流程。 // 下面代码的打印结果？ // 同步任务 打印 first console.log("first"); setTimeout(() => { // 异步任务 压入Event Table 4ms之后cb压入Event Queue console.log("second"); },0) // 同步任务 打印last console.log("last"); // 读取Event Queue 打印second 常见异步任务 DOM事件 AJAX请求 定时器setTimeout和setlnterval ES6的Promise 异步任务的优先级下面继续来看一个案例： setTimeout(() => { console.log(1); }, 1000) new Promise(function(resolve){ console.log(2); for(var i = 0; i < 10000; i++){ i == 99 && resolve(); } }).then(function(){ console.log(3) }); console.log(4)按照上面的学习： 可以很轻松得出案例的打印结果：2，4，1，3。 Promise定义部分为同步任务，回调部分为异步任务 将案例代码在控制台运行，最终返回结果却有些出人意料： 刚看到如此结果，我的第一感觉是，setTimeout函数1s触发太慢导致它加入Event Queue的时间晚于Promise.then 于是我修改了setTimeout的回调时间为0(浏览器最小触发时间为4ms)，但结果仍为发生改变。 那么也就意味着，JavaScript的异步任务是存在优先级的。 宏任务和微任务JavaScript除了广义上将任务划分为同步任务和异步任务，还对异步任务进行了更精细的划分。异步任务又进一步分为微任务和宏任务。 宏任务和微任务分别有各自的任务队列Event Queue，即宏任务队列和微任务队列。 Event Loop执行过程了解到宏任务与微任务过后，我们来学习宏任务与微任务的执行顺序。 代码开始执行，创建一个全局调用栈，script作为宏任务执行 执行过程过同步任务立即执行，异步任务根据异步任务类型分别注册到微任务队列和宏任务队列 同步任务执行完毕，查看微任务队列 若存在微任务，将微任务队列全部执行(包括执行微任务过程中产生的新微任务) 若无微任务，查看宏任务队列，执行第一个宏任务，宏任务执行完毕，查看微任务队列，重复上述操作，直至宏任务队列为空更新一下Event Loop的执行顺序图： 在上面学习的基础上，重新分析当前案例： setTimeout(() => { console.log(1); }, 1000) new Promise(function(resolve){ console.log(2); for(var i = 0; i < 10000; i++){ i == 99 && resolve(); } }).then(function(){ console.log(3) }); console.log(4)分析过程见下图： 文章的最后附赠几道经典面试题，可以测试一下自己对Event Loop的掌握程度。 题目一 console.log('script start'); setTimeout(() => { console.log('time1'); }, 1 * 2000); Promise.resolve() .then(function() { console.log('promise1'); }).then(function() { console.log('promise2'); }); async function foo() { await bar() console.log('async1 end') } foo() async function errorFunc () { try { await Promise.reject('error!!!') } catch(e) { console.log(e) } console.log('async1'); return Promise.resolve('async1 success') } errorFunc().then(res => console.log(res)) function bar() { console.log('async2 end') } console.log('script end'); 题目二 setTimeout(() => { console.log(1) }, 0) const P = new Promise((resolve, reject) => { console.log(2) setTimeout(() => { resolve() console.log(3) }, 0) }) P.then(() => { console.log(4) }) console.log(5) 题目三 var p1 = new Promise(function(resolve, reject){ resolve("2") }) setTimeout(function(){ console.log("1") },10) p1.then(function(value){ console.log(value) }) setTimeout(function(){ console.log("3") },0) |
【本文地址】