js 異步解析

一 、js單線程分析

我們都知道js的一大特點是單線程，也就是同一時間點，只能處理一件事，一句js代碼。那為什么js要設計成單線程而不是多線程呢？這主要和js的用途有關，js作為瀏覽器端的腳本語言，主要的用途為用戶與服務端的交互與操作dom。而操作dom就注定了js只能是單線程語言。假如js才取多線程將會出現，多個線程同時對一個dom進行操作的情況，瀏覽器將無法判斷如何渲染。不僅js是單線程，瀏覽器渲染dom也是單線程的，js的執行和瀏覽器渲染dom共用的一個線程，這就導致了在html代碼中書寫js代碼會造成瀏覽器端渲染的阻塞。例如：在html某個位置，寫一個段帶有alert（‘稍等’），alert 之前html已經被渲染出來，而alert之后的html被這段js阻塞了。為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創建多個線程，但是子線程完 全受主線程控制，且不可進行DOM操作。所以，這個新標準并沒有改變JavaScript單線程的本質。

所謂的js單線程，是指在瀏覽器中JS引擎負責解釋和執行JavaScript代碼的線程只有一個。不妨叫它主線程。但是實際上瀏覽器處理js還存在其他的線程。例如：處理AJAX請求的線程、處理DOM事件的線程、定時器線程、讀寫文件的線程(例如在Node.js中)等等。這些線程可能存在于JS引擎之內，也可能存在于JS引擎之外，在此我們不做區分。不妨叫它們工作線程。

總結一下：js之所以才取單線程模式是為了避免DOM渲染沖突。而瀏覽器中執行js線程是單線程我們稱它為主線程，同時還存在其它處理js的線程，我們稱它為工作線程。js是單線程，但瀏覽器是多線程的。

二 、同步與異步

單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務。如果前一個任務耗時很長，后一個任務就不得不一直等著。這就是同步代碼阻塞。如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候CPU是閑著的，因為IO設備（輸入輸出設備）很慢（比如Ajax操作從網絡讀取數據），不得不等著結果出來，再往下執行。JavaScript語言的設計者意識到，這時主線程完全可以不管IO設備，掛起處于等待中的任務，先運行排在后面的任務。等到IO設備返回了結果，再回過頭，把掛起的任務繼續執行下去。

簡單的說，同步就是會阻塞代碼的執行，而異步不會。同樣拿alert(’稍等’) 來舉例，在一段js代碼中加入一段alert，如果沒有點擊確認，此時代碼的執行就被阻塞了，大多數js代碼都是同步執行的。異步則相反。那為什么js中要引入異步的概念呢，很簡單，由于js的單線程，當遇到耗時的操作時如果采用同步的執行，那么我們就不可能看到如今這么流暢的web應用了。再舉個簡單的例子：在一條單行道上行駛著很多汽車，假如其中某一輛車出現機械故障，將會導致后面的車也無法通過，此時應該將故障的車拉入旁邊的應急車道進行修復，待它修好之后再重新駛入主干道中，不會影響主干道其它行駛的汽車。所以，異步是js單線程下解決耗時問題的一種“無可奈何”的解決方案。也是一種近乎完美的解決方案。

三、js異步與事件輪詢

事件輪詢（event loop）是js異步的實現方式。簡而言之，在js單線程中分為兩種任務，一種是同步任務（synchronous），另一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務指的是，不進入主線程、而進入”任務隊列”（task queue）的任務，只有當主進程中所有同步任務執行完畢，且”任務隊列”通知主線程，某個異步任務可以執行了，該任務才會進入主線程執行。事件輪詢就是將主線程中的異步任務掛載到任務隊列中，再待到合的時機，將任務隊列中的異步函數拉到主進程來執行的這么一個流程。

js中異步操作主要有：

1、定時任務（setTimeout、setInterval）

2、網路請求（ajax、動態<img>加載）

3、事件綁定（click，focus，change等）

js異步具體執行流程分析

大家看一下左邊代碼，兩個console.log操作，兩個setTitmeout 操作。按照我們對異步的理解，在主線程中 console.log 為同步任務從上到下依次執行，所以在最先打印的是3，當執行到第一setTimeout時，瀏覽器js引擎會自動將setTimeout放入工作線程中。ps：在工作線程中，待0.1s后將setTimeout 的回調函數放入異步隊列中；主進程中下一個setTimeout ，但是它的延遲時間為0，這并不意味著它能同步執行，它依舊經歷如上兩個過程，從工作進程中，0s后放入任務隊列。接下來是執行console.log(3);當主進程中任務已經執行完畢。任務隊列中有一個監視器，隨時監視著主進程和任務隊列中的異步函數情況，當主進程執行完畢，就判斷任務隊列中是否有需要執行的函數，如果有就按照隊列現后順序依次放入主進程中，以此往復。

所以上面代碼，依次打印為：3，3，2，1。也就是先將非異步執行完，再回過頭來執行異步函數，異步函數執行順序為隊列規則，先進先出，也就是先進入隊列的異步函數將優先執行。

思考：如果一段代碼中現后存在一個ajax 和一個1s的定時函數，那么他們誰先執行呢？ 答案是：不確定。因為不確定ajax請求完畢進入隊列的時間。小伙伴們可別被面試管套路了哦。哈哈。

四、前端異步的寫法

1、回調函數，也就是在setTimeout或者ajax中添加回調函數，待到指定時間后或者請求到數據后再執行回調。

2、ES6標準：Promise，ES7:async await 這兩種都只是js事件輪詢實現異步的一種優雅的 方式，將異步變為同步的寫法，但都并未改變js異步本質。

以上就是實例分析javascript中的異步的詳細內容，更多關于javascript 異步的資料請關注好吧啦網其它相關文章！