Js 運行機制和Event Loop

来源:https://www.cnblogs.com/gaoht/archive/2019/04/19/10736544.html
-Advertisement-
Play Games

一、為什麼JavaScript是單線程? JavaScript語言的一大特點就是單線程,也就是說,同一個時間只能做一件事。那麼,為什麼JavaScript不能有多個線程呢?這樣能提高效率啊。 JavaScript的單線程,與它的用途有關。作為瀏覽器腳本語言,JavaScript的主要用途是與用戶互動 ...


一、為什麼JavaScript是單線程?

JavaScript語言的一大特點就是單線程,也就是說,同一個時間只能做一件事。那麼,為什麼JavaScript不能有多個線程呢?這樣能提高效率啊。

JavaScript的單線程,與它的用途有關。作為瀏覽器腳本語言,JavaScript的主要用途是與用戶互動,以及操作DOM。這決定了它只能是單線程,否則會帶來很複雜的同步問題。比如,假定JavaScript同時有兩個線程,一個線程在某個DOM節點上添加內容,另一個線程刪除了這個節點,這時瀏覽器應該以哪個線程為準?

所以,為了避免複雜性,從一誕生,JavaScript就是單線程,這已經成了這門語言的核心特征,將來也不會改變。

為了利用多核CPU的計算能力,HTML5提出Web Worker標準,允許JavaScript腳本創建多個線程,但是子線程完全受主線程式控制制,且不得操作DOM。所以,這個新標準並沒有改變JavaScript單線程的本質。

二、任務隊列

單線程就意味著,所有任務需要排隊,前一個任務結束,才會執行後一個任務。如果前一個任務耗時很長,後一個任務就不得不一直等著。

如果排隊是因為計算量大,CPU忙不過來,倒也算了,但是很多時候CPU是閑著的,因為IO設備(輸入輸出設備)很慢(比如Ajax操作從網路讀取數據),不得不等著結果出來,再往下執行。

JavaScript語言的設計者意識到,這時主線程完全可以不管IO設備,掛起處於等待中的任務,先運行排在後面的任務。等到IO設備返回了結果,再回過頭,把掛起的任務繼續執行下去。

於是,所有任務可以分成兩種,一種是同步任務(synchronous),另一種是非同步任務(asynchronous)。同步任務指的是,在主線程上排隊執行的任務,只有前一個任務執行完畢,才能執行後一個任務;非同步任務指的是,不進入主線程、而進入"任務隊列"(task queue)的任務,只有"任務隊列"通知主線程,某個非同步任務可以執行了,該任務才會進入主線程執行。

具體來說,非同步執行的運行機制如下。(同步執行也是如此,因為它可以被視為沒有非同步任務的非同步執行。)

(1)所有同步任務都在主線程上執行,形成一個執行棧(execution context stack)。

(2)主線程之外,還存在一個"任務隊列"(task queue)。只要非同步任務有了運行結果,就在"任務隊列"之中放置一個事件。

(3)一旦"執行棧"中的所有同步任務執行完畢,系統就會讀取"任務隊列",看看裡面有哪些事件。那些對應的非同步任務,於是結束等待狀態,進入執行棧,開始執行。

(4)主線程不斷重覆上面的第三步。

下圖就是主線程和任務隊列的示意圖。

任務隊列

只要主線程空了,就會去讀取"任務隊列",這就是JavaScript的運行機制。這個過程會不斷重覆。

三、事件和回調函數

"任務隊列"是一個事件的隊列(也可以理解成消息的隊列),IO設備完成一項任務,就在"任務隊列"中添加一個事件,表示相關的非同步任務可以進入"執行棧"了。主線程讀取"任務隊列",就是讀取裡面有哪些事件。

"任務隊列"中的事件,除了IO設備的事件以外,還包括一些用戶產生的事件(比如滑鼠點擊、頁面滾動等等)。只要指定過回調函數,這些事件發生時就會進入"任務隊列",等待主線程讀取。

所謂"回調函數"(callback),就是那些會被主線程掛起來的代碼。非同步任務必須指定回調函數,當主線程開始執行非同步任務,就是執行對應的回調函數。

"任務隊列"是一個先進先出的數據結構,排在前面的事件,優先被主線程讀取。主線程的讀取過程基本上是自動的,只要執行棧一清空,"任務隊列"上第一位的事件就自動進入主線程。但是,由於存在後文提到的"定時器"功能,主線程首先要檢查一下執行時間,某些事件只有到了規定的時間,才能返回主線程。

四、Event Loop

主線程從"任務隊列"中讀取事件,這個過程是迴圈不斷的,所以整個的這種運行機制又稱為Event Loop(事件迴圈)。

為了更好地理解Event Loop,請看下圖(轉引自Philip Roberts的演講《Help, I'm stuck in an event-loop》)。

Event Loop

上圖中,主線程運行的時候,產生堆(heap)和棧(stack),棧中的代碼調用各種外部API,它們在"任務隊列"中加入各種事件(click,load,done)。只要棧中的代碼執行完畢,主線程就會去讀取"任務隊列",依次執行那些事件所對應的回調函數。

執行棧中的代碼(同步任務),總是在讀取"任務隊列"(非同步任務)之前執行。請看下麵這個例子。


    var req = new XMLHttpRequest();
    req.open('GET', url);    
    req.onload = function (){};    
    req.onerror = function (){};    
    req.send();

上面代碼中的req.send方法是Ajax操作向伺服器發送數據,它是一個非同步任務,意味著只有當前腳本的所有代碼執行完,系統才會去讀取"任務隊列"。所以,它與下麵的寫法等價。


    var req = new XMLHttpRequest();
    req.open('GET', url);
    req.send();
    req.onload = function (){};    
    req.onerror = function (){};   

也就是說,指定回調函數的部分(onload和onerror),在send()方法的前面或後面無關緊要,因為它們屬於執行棧的一部分,系統總是執行完它們,才會去讀取"任務隊列"。

五、定時器

除了放置非同步任務的事件,"任務隊列"還可以放置定時事件,即指定某些代碼在多少時間之後執行。這叫做"定時器"(timer)功能,也就是定時執行的代碼。

定時器功能主要由setTimeout()和setInterval()這兩個函數來完成,它們的內部運行機制完全一樣,區別在於前者指定的代碼是一次性執行,後者則為反覆執行。以下主要討論setTimeout()。

setTimeout()接受兩個參數,第一個是回調函數,第二個是推遲執行的毫秒數。


console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);

上面代碼的執行結果是1,3,2,因為setTimeout()將第二行推遲到1000毫秒之後執行。

如果將setTimeout()的第二個參數設為0,就表示當前代碼執行完(執行棧清空)以後,立即執行(0毫秒間隔)指定的回調函數。


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

上面代碼的執行結果總是2,1,因為只有在執行完第二行以後,系統才會去執行"任務隊列"中的回調函數。

總之,setTimeout(fn,0)的含義是,指定某個任務在主線程最早可得的空閑時間執行,也就是說,儘可能早得執行。它在"任務隊列"的尾部添加一個事件,因此要等到同步任務和"任務隊列"現有的事件都處理完,才會得到執行。

HTML5標準規定了setTimeout()的第二個參數的最小值(最短間隔),不得低於4毫秒,如果低於這個值,就會自動增加。在此之前,老版本的瀏覽器都將最短間隔設為10毫秒。另外,對於那些DOM的變動(尤其是涉及頁面重新渲染的部分),通常不會立即執行,而是每16毫秒執行一次。這時使用requestAnimationFrame()的效果要好於setTimeout()。

需要註意的是,setTimeout()只是將事件插入了"任務隊列",必須等到當前代碼(執行棧)執行完,主線程才會去執行它指定的回調函數。要是當前代碼耗時很長,有可能要等很久,所以並沒有辦法保證,回調函數一定會在setTimeout()指定的時間執行。

六、Node.js的Event Loop

Node.js也是單線程的Event Loop,但是它的運行機制不同於瀏覽器環境。

請看下麵的示意圖(作者@BusyRich)。

Node.js

根據上圖,Node.js的運行機制如下。

(1)V8引擎解析JavaScript腳本。

(2)解析後的代碼,調用Node API。

(3)libuv庫負責Node API的執行。它將不同的任務分配給不同的線程,形成一個Event Loop(事件迴圈),以非同步的方式將任務的執行結果返回給V8引擎。

(4)V8引擎再將結果返回給用戶。

除了setTimeout和setInterval這兩個方法,Node.js還提供了另外兩個與"任務隊列"有關的方法:process.nextTicksetImmediate。它們可以幫助我們加深對"任務隊列"的理解。

process.nextTick方法可以在當前"執行棧"的尾部----下一次Event Loop(主線程讀取"任務隊列")之前----觸發回調函數。也就是說,它指定的任務總是發生在所有非同步任務之前。setImmediate方法則是在當前"任務隊列"的尾部添加事件,也就是說,它指定的任務總是在下一次Event Loop時執行,這與setTimeout(fn, 0)很像。請看下麵的例子(via StackOverflow)。


process.nextTick(function A() {
  console.log(1);
  process.nextTick(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log('TIMEOUT FIRED');
}, 0)
// 1
// 2
// TIMEOUT FIRED

上面代碼中,由於process.nextTick方法指定的回調函數,總是在當前"執行棧"的尾部觸發,所以不僅函數A比setTimeout指定的回調函數timeout先執行,而且函數B也比timeout先執行。這說明,如果有多個process.nextTick語句(不管它們是否嵌套),將全部在當前"執行棧"執行。

現在,再看setImmediate。


setImmediate(function A() {
  console.log(1);
  setImmediate(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log('TIMEOUT FIRED');
}, 0);

上面代碼中,setImmediate與setTimeout(fn,0)各自添加了一個回調函數A和timeout,都是在下一次Event Loop觸發。那麼,哪個回調函數先執行呢?答案是不確定。運行結果可能是1--TIMEOUT FIRED--2,也可能是TIMEOUT FIRED--1--2。

令人困惑的是,Node.js文檔中稱,setImmediate指定的回調函數,總是排在setTimeout前面。實際上,這種情況只發生在遞歸調用的時候。


setImmediate(function (){
  setImmediate(function A() {
    console.log(1);
    setImmediate(function B(){console.log(2);});
  });

  setTimeout(function timeout() {
    console.log('TIMEOUT FIRED');
  }, 0);
});
// 1
// TIMEOUT FIRED
// 2

上面代碼中,setImmediate和setTimeout被封裝在一個setImmediate裡面,它的運行結果總是1--TIMEOUT FIRED--2,這時函數A一定在timeout前面觸發。至於2排在TIMEOUT FIRED的後面(即函數B在timeout後面觸發),是因為setImmediate總是將事件註冊到下一輪Event Loop,所以函數A和timeout是在同一輪Loop執行,而函數B在下一輪Loop執行。

我們由此得到了process.nextTick和setImmediate的一個重要區別:多個process.nextTick語句總是在當前"執行棧"一次執行完,多個setImmediate可能則需要多次loop才能執行完。事實上,這正是Node.js 10.0版添加setImmediate方法的原因,否則像下麵這樣的遞歸調用process.nextTick,將會沒完沒了,主線程根本不會去讀取"事件隊列"!


process.nextTick(function foo() {
  process.nextTick(foo);
});

事實上,現在要是你寫出遞歸的process.nextTick,Node.js會拋出一個警告,要求你改成setImmediate。

另外,由於process.nextTick指定的回調函數是在本次"事件迴圈"觸發,而setImmediate指定的是在下次"事件迴圈"觸發,所以很顯然,前者總是比後者發生得早,而且執行效率也高(因為不用檢查"任務隊列")。

 

文章原文: (http://www.ruanyifeng.com/blog/2014/10/event-loop.html)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文同步至http://javaexception.com/archives/31 介紹一波新手引導層的庫。都是star數挺高的一些庫。 1.NewbieGuide(國內開發者開發) Android 快速實現新手引導層的庫,通過簡潔鏈式調用,一行代碼實現引導層的顯示。 github地址 https: ...
  • 第1個是html文件,第二 個是js文件,實際火狐測試有效 ...
  • package.json中5個欄位: name: 包名 今後下載時輸入名稱 (註意:要與下載的包名不一樣) version:版本號 x.x.x 例如 1.2.3 1 大版本:當這個包有巨大內容變化時(裡面核心代碼發生巨大變化) 2 中版本: 在當前大版本基礎上,添加了一個功能(刪除) 3 小版本:修 ...
  • Vue+Element的動態表單,動態表格(後端發送配置,前端動態生成) ...
  • 基礎部分 創建一個react的項目 創建一個react的項目 全局安裝 react 指令 使用腳手架創建應用 註意點: 1.全局安裝create react app才能使用腳手架創建應用 2.應用名稱全部為小寫字母,不能出現“TodoList”這樣的名稱 組件的使用 組件的組成 認識jsx 簡單的j ...
  • 核心屬性: background-attachment 這個屬性就牛逼了, 它可以定義背景圖片是相對視口固定, 還是隨著視口滾動, 加上這個屬性網頁瞬間就從屌絲變成 高大上。 我們來看個例子: html: css: 代碼很簡單,讓視口出現滾動條, 然後它是這樣的: 很普通的一個滾動效果, 然後我們把 ...
  • 處理數值,為每三位數加一個逗號,相容浮點型數值 以 和 為例 通過內置方法實現 通過正則表達式 利用正則表達式來處理的思路: 整數和浮點數是有差別的,整數從最右邊開始算,浮點數要從小數點'.'開始算 字元串分為兩部分,右邊是3 n位數字,左邊的部分添加','。n = {1,} 右邊的部分很好匹配: ...
  • jQuery選擇器一、基本選擇器: 1、ID選擇器 #id 描述:根據給定的id匹配一個元素, 返回單個元素(註:在網頁中,id名稱不能重覆) 2、類選擇器 .class 描述:根據給定的類名匹配元素,返回元素集合 3、元素選擇器 element 描述:根據給定的元素名匹配元素,返回元素集合 4、* ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...