JavaScript單線程和多線程是很多小白同學(xué)入門的時候問到最多的問題，雖然官方給出過解釋但對于新手來說并不友好，今天小千就來給大家介紹一下JavaScript的單線程。
web前端培訓(xùn)1" />
一、 瀏覽器的進程和線程
瀏覽器的架構(gòu)是多進程的，不同的瀏覽器采用不同的進程架構(gòu)，這個沒有統(tǒng)一的標準,以谷歌瀏覽器為例，他主要有四個進程，分別是頂層的Browser process，負責標簽頁網(wǎng)頁呈現(xiàn)的Renderer Process，負責控制網(wǎng)頁插件的Plugin Process和負責處理GPU的GPU Process。
每個進程都可以通過創(chuàng)建線程或者調(diào)用線程來完成任務(wù)。打個比方，進程就相當于一個 公司，線程就相當于公司的一個部門，一個公司可以只有一個部門也可以有多個部分，公司內(nèi)部的資源是共享的。
二、瀏覽器的渲染進程
我們前端主要和Renderer Process打交道，在這個進程里面主要包含五個線程：
1、GUI渲染線程，用于解析html、css，構(gòu)建DOM樹和RenderObject樹，布局和繪制等瀏覽器界面渲染任務(wù)|不能和JS引擎線程同時執(zhí)行。
2、js引擎線程，也就是我們常說的js內(nèi)核，用于解析、運行javascript代碼，不能和GUI渲染線程同時執(zhí)行。
3、事件觸發(fā)線程，用于監(jiān)聽和觸發(fā)事件，可以理解成由js引擎線程來執(zhí)行事件綁定代碼，然后另開事件觸發(fā)線程用來監(jiān)聽事件的觸發(fā)，觸發(fā)以后把事件處理函數(shù)里面的代碼交給js引擎線程來執(zhí)行，但是js是單線程的，事件處理函數(shù)里面的代碼會添加到待處理隊列的末尾，也就是等js線程空閑以后才會執(zhí)行。
4、定時觸發(fā)器線程，就是經(jīng)常使用的setInterval與setTimeout所使用的線程，可以理解成由js引擎線程來定義一個定時器，但是定時器的計數(shù)是另開單獨線程來計時并觸發(fā)定時，計時時間到了以后，把要執(zhí)行的回調(diào)函數(shù)里面的代碼添加到待處理隊列的末尾，等待js線程空閑以后執(zhí)行。
5、http請求線程，在我們使用XMLHttpRequest對象發(fā)送http請求的時候，是新開一個線程請求，檢測到對象狀態(tài)改變時，如果綁定了回調(diào)函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件，將這個回調(diào)里面的代碼添加到j(luò)s線程末尾。
三、js引擎線程的單線程
1、分析下面代碼執(zhí)行過程，以定時器觸發(fā)線程為例看不同線程和js線程的執(zhí)行過程：
在上面代碼中，js代碼是由js引擎線程執(zhí)行的，這里要明確，js是單線程的，同一時間只能執(zhí)行一個的任務(wù)，所以有多個等待任務(wù)的時候需要排隊，排在前面的先執(zhí)行，排在后面的要等待前面任務(wù)完成才能執(zhí)行。開始的t1時間里面，代碼至上而下執(zhí)行，當碰到setTimeout，這是個定時器，需要計時，把這個計時的任務(wù)交給定時觸發(fā)器線程（時間到了以后把要執(zhí)行的代碼排隊到t1的后面t2時間里面），繼續(xù)執(zhí)行js代碼。
2、分析下面代碼執(zhí)行過程，觀察js引擎線程和GUI線程的互斥：
在上面代碼中，開始的t1時間里面，代碼至上而下執(zhí)行，當碰到事件綁定的時候，把這個事件監(jiān)聽的任務(wù)交給事件觸發(fā)線程，繼續(xù)執(zhí)行js代碼。當用戶點擊按鈕，事件觸發(fā)線程監(jiān)聽到事件，把事件處理函數(shù)里面的代碼從隊列末尾插入，在t2事件執(zhí)行里面有三行代碼第一行是box.innerHTML = "doing something"，這行代碼是頁面渲染，交給GUI渲染線程，由于GUI渲染線程和js引擎線程是互斥的，這個時候先讓t2時間里面的其他js代碼wait(3000);繼續(xù)執(zhí)行，把box.innerHTML = "doing something"插入t2的后面t3時間里面，執(zhí)行完wait(3000)以后，最后一行是box.innerHTML = "finish"，這行代碼也是頁面渲染，交給GUI渲染線程，由于GUI渲染線程和js引擎線程是互斥的，不能同時執(zhí)行，把box.innerHTML = "finish"從隊列末尾插入，變成t4時間執(zhí)行。所以，最后結(jié)果是，當用戶點擊的時候，div里面沒有內(nèi)容，3秒以后直接顯示finish。
在前端學(xué)習過程中，js的單線程對大家理解同步和異步非常重要，熟悉js的單線程將讓大家能夠更好的理解事件，定時器和ajax請求的執(zhí)行過程。
最后如果你對web前端開發(fā)感興趣的話，不妨來千鋒大前端培訓(xùn)班了解一下我們的前端培訓(xùn)課程，全程名師面授，更有免費學(xué)習資料可以領(lǐng)取，趕緊來了解一下吧。
京公網(wǎng)安備 11010802030320號