成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript事件循環(huán)（Event Loop）

justjavac / 1656人閱讀

摘要：關(guān)于和，因?yàn)楸旧砭褪堑恼Z法糖。實(shí)際上是一個(gè)讓出線程的標(biāo)志。隊(duì)列清空，進(jìn)入執(zhí)行棧，打印，程序運(yùn)行完畢。完整結(jié)果如下該結(jié)果基于版本。因?yàn)闃?biāo)準(zhǔn)有所改變，所以稍老版本的瀏覽器結(jié)果可能不一致。

任務(wù)隊(duì)列

首先我們要知道關(guān)于JavaScript的一些規(guī)則：

JavaScript是被設(shè)計(jì)成單線程的

JavaScript的任務(wù)分為同步任務(wù)和異步任務(wù)

同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧。當(dāng)主線程執(zhí)行完之后，運(yùn)行微任務(wù)（micro-task）隊(duì)列的任務(wù)直到為空，更新UI渲染（會(huì)根據(jù)瀏覽器的邏輯，決定要不要馬上執(zhí)行更新），然后再運(yùn)行宏任務(wù)（macro-task）隊(duì)列的任務(wù)直到為空......流程如下：

（主線程上的執(zhí)行棧同步任務(wù)，可以視為是第一個(gè)macro-task隊(duì)列）
 macro-task -> micro-task(如果存在) -> 更新UI渲染

如此無限循環(huán)上面的流程，是為JavaScript的Event Loop機(jī)制。

宏任務(wù)

宏任務(wù)（macro-task），宏任務(wù)隊(duì)列可以有一個(gè)或者多個(gè)。每個(gè)任務(wù)都有一個(gè)任務(wù)源(task source)，源自同一個(gè)任務(wù)源的 task 必須放到同一個(gè)任務(wù)隊(duì)列，從不同源來的則被添加到不同隊(duì)列。

宏任務(wù)：script（全局任務(wù)）, setTimeout, setInterval, setImmediate, I/O, UI rendering.

微任務(wù)

微任務(wù)（micro-task），微任務(wù)在渲染更新前，macro-task之后執(zhí)行。
關(guān)于async和await，因?yàn)閍sync await 本身就是promise+generator的語法糖。所以await后面的代碼是microtask。實(shí)際上await是一個(gè)讓出線程的標(biāo)志。await后面的表達(dá)式會(huì)先執(zhí)行一遍，將await后面的代碼加入到microtask中，然后就會(huì)跳出整個(gè)async函數(shù)來執(zhí)行后面的代碼。

微任務(wù)：process.nextTick, Promise, Object.observer, MutationObserver,await.

舉例 
        async function async1() {
            console.log("async1 start");
            await async2();
            console.log("async1 end");
        }
        async function async2() {
            console.log("async2");
        }

        console.log("script start");

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

        async1();

        new Promise(function (resolve) {
            console.log("promise1");
            resolve();
        }).then(function () {
            console.log("promise2");
        });
        console.log("script end");

流程如下：

console打印script start

setTimeout，是異步宏任務(wù)，進(jìn)入macro-task setTimeout隊(duì)列

async1(), async await函數(shù)，在await之前是同步任務(wù)，直接執(zhí)行，打印async1 start

await async2()，await后面的表達(dá)式會(huì)先執(zhí)行一遍，打印async2

await 下面的代碼視為promise.then，進(jìn)入micro-task promise隊(duì)列，跳出async1()

new Promise，promise內(nèi)，.then之前的代碼是直接執(zhí)行的，所以打印promise1

.then內(nèi)函數(shù)進(jìn)入micro-task promise隊(duì)列后

console，直接打印script end

主線程執(zhí)行棧運(yùn)行完并清空了，micro-task進(jìn)入執(zhí)行棧，分別按順序執(zhí)行打印async1 end 和 promise2。

micro-task隊(duì)列清空，macro-task進(jìn)入執(zhí)行棧，打印setTimeout，程序運(yùn)行完畢。

完整結(jié)果如下：

/**
 *script start
 *async1 start
 *async2
 *promise1
 *script end
 *async1 end
 *promise2
 *setTimeout
 */

該結(jié)果基于chrome 版本 72.0.3626.121。因?yàn)閍sync await標(biāo)準(zhǔn)有所改變，所以稍老版本的瀏覽器結(jié)果可能不一致。

參考：
https://jakearchibald.com/201...
https://github.com/Advanced-F...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109013.html

相關(guān)文章

  • 初窺JavaScript事件機(jī)制的實(shí)現(xiàn)（一）—— Node.js事件驅(qū)動(dòng)實(shí)現(xiàn)概覽

    摘要：如果當(dāng)前沒有事件也沒有定時(shí)器事件，則返回。相關(guān)資料關(guān)于的架構(gòu)及設(shè)計(jì)思路的事件討論了使用線程池異步運(yùn)行代碼。下一篇初窺事件機(jī)制的實(shí)現(xiàn)二中定時(shí)器的實(shí)現(xiàn) 在瀏覽器中，事件作為一個(gè)極為重要的機(jī)制，給予JavaScript響應(yīng)用戶操作與DOM變化的能力；在Node.js中，事件驅(qū)動(dòng)模型則是其高并發(fā)能力的基礎(chǔ)。 學(xué)習(xí)JavaScript也需要了解它的運(yùn)行平臺(tái)，為了更好的理解JavaScript的事...

    lavor 評(píng)論0 收藏0

  • JavaScript 事件循環(huán)（譯文JavaScript Event Loop）

    摘要：事件循環(huán)了解了在引擎中是如何工作了之后，來看下如何使用異步回調(diào)函數(shù)來避免代碼。從回調(diào)函數(shù)被放入后秒鐘，把移到中。由于事件循環(huán)持續(xù)地監(jiān)測(cè)調(diào)用棧是否已空，此時(shí)它一注意到調(diào)用?？樟耍驼{(diào)用并創(chuàng)建一個(gè)新的調(diào)用棧。 聽多了JavaScript單線程，異步，V8，便會(huì)很想去知道JavaScript是如何利用單線程來實(shí)現(xiàn)所謂的異步的。我參考了一些文章，了解到一個(gè)很重要的詞匯：事件循環(huán)(Event L...

    K_B_Z 評(píng)論0 收藏0

  • JavaScript Event loop 事件循環(huán)

    摘要：階段有兩個(gè)主要功能也會(huì)執(zhí)行時(shí)間定時(shí)器到達(dá)期望時(shí)間的回調(diào)函數(shù)執(zhí)行事件循環(huán)列表里的函數(shù)當(dāng)進(jìn)入階段并且沒有其余的定時(shí)器，那么如果事件循環(huán)列表不為空，則迭代同步的執(zhí)行隊(duì)列中的函數(shù)。如果沒有，則等待回調(diào)函數(shù)進(jìn)入隊(duì)列并立即執(zhí)行。 Event Loop 本文以 Node.js 為例，講解 Event Loop 在 Node.js 的實(shí)現(xiàn)，原文，JavaScript 中的實(shí)現(xiàn)大同小異。 什么是 Eve...

    luckyyulin 評(píng)論0 收藏0

  • 關(guān)于瀏覽器Event Loop

    摘要：的宿主最開始本身就是瀏覽器，處理用戶的交互事件。既然是單線程的，那就意味著任務(wù)需要排隊(duì)，只有前一個(gè)任務(wù)執(zhí)行完畢，下一個(gè)任務(wù)才能開始，于是就有了任務(wù)隊(duì)列。事件循環(huán)有兩種用于瀏覽上下文的事件循環(huán)和用于的事件循環(huán)。 最近看到Event Loop這個(gè)詞出現(xiàn)的頻率有點(diǎn)高，于是查閱各方資料在此記錄一下。 先不說概念，我們來看段代碼： console.log(script start); setT...

    youkede 評(píng)論0 收藏0

  • JS異步詳解 - 瀏覽器/Node/事件循環(huán)/消息隊(duì)列/宏任務(wù)/微任務(wù)

    js異步歷史 一個(gè) JavaScript 引擎會(huì)常駐于內(nèi)存中，它等待著我們把JavaScript 代碼或者函數(shù)傳遞給它執(zhí)行 在 ES3 和更早的版本中，JavaScript 本身還沒有異步執(zhí)行代碼的能力，引擎就把代碼直接順次執(zhí)行了，異步任務(wù)都是宿主環(huán)境（瀏覽器）發(fā)起的（setTimeout、AJAX等）。 在 ES5 之后，JavaScript 引入了 Promise，這樣，不需要瀏覽器的安排，J...

    awesome23 評(píng)論0 收藏0

  • JavaScript執(zhí)行機(jī)制、事件循環(huán)

    摘要：曾經(jīng)的理解首先，是單線程語言，也就意味著同一個(gè)時(shí)間只能做一件事，那么為什么不是多線程呢這樣還能提高效率啊假定同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)節(jié)點(diǎn)上編輯了內(nèi)容，而另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器就很懵逼了，到底以執(zhí)行哪個(gè)操作呢所以，設(shè)計(jì)者把 Event Loop曾經(jīng)的理解 首先，JS是單線程語言，也就意味著同一個(gè)時(shí)間只能做一件事，那么 為什么JavaScript不是多線程呢？這樣還能提...

    rose 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<