前言
全州ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景,ssl證書未來市場廣闊!成為創(chuàng)新互聯(lián)的ssl證書銷售渠道,可以享受市場價格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:18982081108(備注:SSL證書合作)期待與您的合作!
我們知道 js 是單線程執(zhí)行的,那么異步的代碼 js 是怎么處理的呢?例如下面的代碼是如何進行輸出的:
console.log(1); setTimeout(function() { console.log(2); }, 0); new Promise(function(resolve) { console.log(3); resolve(Date.now()); }).then(function() { console.log(4); }); console.log(5); setTimeout(function() { new Promise(function(resolve) { console.log(6); resolve(Date.now()); }).then(function() { console.log(7); }); }, 0);
在不運行的情況可以先猜測下最終的輸出,然后展開我們要說的內(nèi)容。
1. 宏任務(wù)與微任務(wù)
依據(jù)我們多年編寫 ajax 的經(jīng)驗:js 應(yīng)該是按照語句先后順序執(zhí)行,在出現(xiàn)異步時,則發(fā)起異步請求后,接著往下執(zhí)行,待異步結(jié)果返回后再接著執(zhí)行。但他內(nèi)部是怎樣管理這些執(zhí)行任務(wù)的呢?
在 js 中,任務(wù)分為宏任務(wù)(macrotask)和微任務(wù)(microtask),這兩個任務(wù)分別維護一個隊列,均采用先進先出的策略進行執(zhí)行!同步執(zhí)行的任務(wù)都在宏任務(wù)上執(zhí)行。
宏任務(wù)主要有:script(整體代碼)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 環(huán)境)。
微任務(wù)主要有:Promise.then、 MutationObserver、 process.nextTick(Node.js 環(huán)境)。
具體的操作步驟如下:
這 4 步構(gòu)成了一個事件的循環(huán)檢測機制,即我們所稱的eventloop。
回到我們上面說的代碼:
console.log(1); setTimeout(function() { console.log(2); }, 0); new Promise(function(resolve) { console.log(3); resolve(Date.now()); }).then(function() { console.log(4); }); console.log(5); setTimeout(function() { new Promise(function(resolve) { console.log(6); resolve(Date.now()); }).then(function() { console.log(7); }); }, 0);
執(zhí)行步驟如下:
因此,最終的輸出順序為:1, 3, 5, 4, 2, 6, 7;
我們在Promise.then實現(xiàn)一個稍微耗時的操作,這個步驟看起來會更加地明顯:
console.log(1); var start = Date.now(); setTimeout(function() { console.log(2); }, 0); setTimeout(function() { console.log(4, Date.now() - start); }, 400); Promise.resolve().then(function() { var sum = function(a, b) { return Number(a) + Number(b); } var res = []; for(var i=0; i<5000000; i++) { var a = Math.floor(Math.random()*100); var b = Math.floor(Math.random()*200); res.push(sum(a, b)); } res = res.sort(); console.log(3); })
Promise.then中,先生成一個500萬隨機數(shù)的數(shù)組,然后對這個數(shù)組進行排序。運行這段代碼可以發(fā)現(xiàn):馬上會輸出1,稍等一會兒才會輸出3,然后再輸出2。不論等待多長時間輸出3,2一定會在3的后面輸出。這也就印證了eventloop中的第3步操作,必須等所有的微任務(wù)執(zhí)行完畢后,才開始下一個宏任務(wù)。
同時,這段代碼的輸出很有意思:
setTimeout(function() { console.log(4, Date.now() - start); // 4, 1380 電腦狀態(tài)的不同,輸出的時間差也不一樣 }, 400);
本來要設(shè)定的是400ms后輸出,但因為之前的任務(wù)耗時嚴重,導(dǎo)致之后的任務(wù)只能延遲往后排。也能說明,setTimeout和setInterval這種操作的延時是不準(zhǔn)確的,這兩個方法只能大概將任務(wù)400ms之后的宏任務(wù)中,但具體的執(zhí)行時間,還是要看線程是否空閑。若前一個任務(wù)中有耗時的操作,或者有無限的微任務(wù)加入進來時,則會阻塞下一個任務(wù)的執(zhí)行。
2. async-await
從上面的代碼中也能看到 Promise.then 中的代碼是屬于微服務(wù),那么 async-await 的代碼怎么執(zhí)行呢?比如下面的代碼:
function A() { return Promise.resolve(Date.now()); } async function B() { console.log(Math.random()); let now = await A(); console.log(now); } console.log(1); B(); console.log(2);
其實,async-await 只是 Promise+generator 的一種語法糖而已。上面的代碼我們改寫為這樣,可以更加清晰一點:
function B() { console.log(Math.random()); A().then(function(now) { console.log(now); }) } console.log(1); B(); console.log(2);
這樣我們就能明白輸出的先后順序了: 1, 0.4793526730678652(隨機數(shù)), 2, 1557830834679(時間戳);
3. requestAnimationFrame
requestAnimationFrame也屬于執(zhí)行是異步執(zhí)行的方法,但我任務(wù)該方法既不屬于宏任務(wù),也不屬于微任務(wù)。按照MDN中的定義:
window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個動畫,并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。該方法需要傳入一個回調(diào)函數(shù)作為參數(shù),該回調(diào)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行
requestAnimationFrame是GUI渲染之前執(zhí)行,但在微服務(wù)之后,不過requestAnimationFrame不一定會在當(dāng)前幀必須執(zhí)行,由瀏覽器根據(jù)當(dāng)前的策略自行決定在哪一幀執(zhí)行。
4. 總結(jié)
我們要記住最重要的兩點:js是單線程和eventloop的循環(huán)機制。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對創(chuàng)新互聯(lián)的支持。
網(wǎng)頁標(biāo)題:前端js中的事件循環(huán)eventloop機制詳解
文章位置:http://bm7419.com/article2/pphsoc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、電子商務(wù)、網(wǎng)站導(dǎo)航、微信公眾號、商城網(wǎng)站、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)