js單線程中的同步和異步
2020/11/16 14:33:22 閱讀：2464
發(fā)布者：2464
單線程
（1）單線程的概念
JavaScript是一門單線程的語言，因此，JavaScript在同一個時間只能做一件事，單線程意味著，如果在同個時間有多個任務的話，這些任務就需要進行排隊，前一個任務執(zhí)行完，才會執(zhí)行下一個任務，比如說下面這段代碼
// 同步代碼
function fun1() {
console.log(1);
}
function fun2() {
console.log(2);
}
fun1();
fun2();
// 輸出
1
2
很容易可以看出，輸出會依次輸入1,2，因為代碼是從上到下依次執(zhí)行，執(zhí)行完fun1()，才繼續(xù)執(zhí)行fun2()，但是如果fun1()中的代碼執(zhí)行的是讀取文件或者ajax操作，文件的讀取和數(shù)據(jù)的獲取都需要一定時間，難道我們需要完全等到fun1()執(zhí)行完才能繼續(xù)執(zhí)行fun2()么？為了解決這個問題，后面我們會介紹同步和異步的概念
（2）為什么是單線程
其實，JavaScript的單線程，與它的用途是有很大關系，我們都知道，JavaScript作為瀏覽器的腳本語言，主要用來實現(xiàn)與用戶的交互，利用JavaScript，我們可以實現(xiàn)對DOM的各種各樣的操作，如果JavaScript是多線程的話，一個線程在一個DOM節(jié)點中增加內(nèi)容，另一個線程要刪除這個DOM節(jié)點，那么這個DOM節(jié)點究竟是要增加內(nèi)容還是刪除呢？這會帶來很復雜的同步問題，因此，JavaScript是單線程的
同步任務和異步任務
（1）為什么會有同步和異步
因為JavaScript的單線程，因此同個時間只能處理同個任務，所有任務都需要排隊，前一個任務執(zhí)行完，才能繼續(xù)執(zhí)行下一個任務，但是，如果前一個任務的執(zhí)行時間很長，比如文件的讀取操作或ajax操作，后一個任務就不得不等著，拿ajax來說，當用戶向后臺獲取大量的數(shù)據(jù)時，不得不等到所有數(shù)據(jù)都獲取完畢才能進行下一步操作，用戶只能在那里干等著，嚴重影響用戶體驗
因此，JavaScript在設計的時候，就已經(jīng)考慮到這個問題，主線程可以完全不用等待文件的讀取完畢或ajax的加載成功，可以先掛起處于等待中的任務，先運行排在后面的任務，等到文件的讀取或ajax有了結(jié)果后，再回過頭執(zhí)行掛起的任務，因此，任務就可以分為同步任務和異步任務
（2）同步任務
同步任務是指在主線程上排隊執(zhí)行的任務，只有前一個任務執(zhí)行完畢，才能繼續(xù)執(zhí)行下一個任務，當我們打開網(wǎng)站時，網(wǎng)站的渲染過程，比如元素的渲染，其實就是一個同步任務
（3）異步任務
異步任務是指不進入主線程，而進入任務隊列的任務，只有任務隊列通知主線程，某個異步任務可以執(zhí)行了，該任務才會進入主線程，當我們打開網(wǎng)站時，像圖片的加載，音樂的加載，其實就是一個異步任務
（4）異步機制
那么，JavaScript中的異步是怎么實現(xiàn)的呢？那要需要說下回調(diào)和事件循環(huán)這兩個概念啦
首先要先說下任務隊列，我們在前面也介紹了，異步任務是不會進入主線程，而是會先進入任務隊列，任務隊列其實是一個先進先出的數(shù)據(jù)結(jié)構(gòu)，也是一個事件隊列，比如說文件讀取操作，因為這是一個異步任務，因此該任務會被添加到任務隊列中，等到IO完成后，就會在任務隊列中添加一個事件，表示異步任務完成啦，可以進入執(zhí)行棧啦~但是這時候呀，主線程不一定有空，當主線程處理完其它任務有空時，就會讀取任務隊列，讀取里面有哪些事件，排在前面的事件會被優(yōu)先進行處理，如果該任務指定了回調(diào)函數(shù)，那么主線程在處理該事件時，就會執(zhí)行回調(diào)函數(shù)中的代碼，也就是執(zhí)行異步任務啦
單線程從從任務隊列中讀取任務是不斷循環(huán)的，每次棧被清空后，都會在任務隊列中讀取新的任務，如果沒有任務，就會等到，直到有新的任務，這就叫做任務循環(huán)，因為每個任務都是由一個事件觸發(fā)的，因此也叫作
事件循環(huán)
異步運行機制如下：
（1）所有同步任務都在主線程上執(zhí)行，形成一個執(zhí)行棧（execution context stack）。
（2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結(jié)果，就在"任務隊列"之中放置一個事件。
（3）一旦"執(zhí)行棧"中的所有同步任務執(zhí)行完畢，系統(tǒng)就會讀取"任務隊列"，看看里面有哪些事件。那些對應的異步任務，于是結(jié)束等待狀態(tài)，進入執(zhí)行棧，開始執(zhí)行。
（4）主線程不斷重復上面的第三步。
只要主線程空了，就會去讀取"任務隊列"，這就是JavaScript的運行機制。這個過程會不斷重復。
"任務隊列"是一個事件的隊列（也可以理解成消息的隊列），IO設備完成一項任務，就在"任務隊列"中添加一個事件，表示相關的異步任務可以進入"執(zhí)行棧"了。主線程讀取"任務隊列"，就是讀取里面有哪些事件。
"任務隊列"中的事件，除了IO設備的事件以外，還包括一些用戶產(chǎn)生的事件（比如鼠標點擊、頁面滾動等等），比如$(selectot).click(function)，這些都是相對耗時的操作。只要指定過這些事件的回調(diào)函數(shù)，這些事件發(fā)生時就會進入"任務隊列"，等待主線程讀取。
所謂"回調(diào)函數(shù)"（callback），就是那些會被主線程掛起來的代碼，前面說的點擊事件$(selectot).click(function)中的function就是一個回調(diào)函數(shù)。異步任務必須指定回調(diào)函數(shù)，當主線程開始執(zhí)行異步任務，就是執(zhí)行對應的回調(diào)函數(shù)。例如ajax的success，complete，error也都指定了各自的回調(diào)函數(shù)，這些函數(shù)就會加入“任務隊列”中，等待執(zhí)行。
