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