**一、 瀏覽器的進(jìn)程和線程**

瀏覽器的架構(gòu)是多進(jìn)程的，不同的瀏覽器采用不同的進(jìn)程架構(gòu)，這個(gè)沒有統(tǒng)一的標(biāo)準(zhǔn),以谷歌瀏覽器為例，他主要有四個(gè)進(jìn)程，分別是頂層的Browser process，負(fù)責(zé)標(biāo)簽頁網(wǎng)頁呈現(xiàn)的Renderer Process，負(fù)責(zé)控制網(wǎng)頁插件的Plugin Process和負(fù)責(zé)處理GPU的GPU Process。

每個(gè)進(jìn)程都可以通過創(chuàng)建線程或者調(diào)用線程來完成任務(wù)。打個(gè)比方，進(jìn)程就相當(dāng)于一個(gè) 公司，線程就相當(dāng)于公司的一個(gè)部門，一個(gè)公司可以只有一個(gè)部門也可以有多個(gè)部分，公司內(nèi)部的資源是共享的。

**二、瀏覽器的渲染進(jìn)程**

我們前端主要和Renderer Process打交道，在這個(gè)進(jìn)程里面主要包含五個(gè)線程:

1、GUI渲染線程，用于解析html、css，構(gòu)建DOM樹和RenderObject樹，布局和繪制等瀏覽器界面渲染任務(wù)|不能和JS引擎線程同時(shí)執(zhí)行。

2、js引擎線程，也就是我們常說的js內(nèi)核，用于解析、運(yùn)行javascript代碼，不能和GUI渲染線程同時(shí)執(zhí)行。

3、事件觸發(fā)線程，用于監(jiān)聽和觸發(fā)事件，可以理解成由js引擎線程來執(zhí)行事件綁定代碼，然后另開事件觸發(fā)線程用來監(jiān)聽事件的觸發(fā)，觸發(fā)以后把事件處理函數(shù)里面的代碼交給js引擎線程來執(zhí)行，但是js是單線程的，事件處理函數(shù)里面的代碼會添加到待處理隊(duì)列的末尾，也就是等js線程空閑以后才會執(zhí)行。

4、定時(shí)觸發(fā)器線程，就是經(jīng)常使用的setInterval與setTimeout所使用的線程，可以理解成由js引擎線程來定義一個(gè)定時(shí)器，但是定時(shí)器的計(jì)數(shù)是另開單獨(dú)線程來計(jì)時(shí)并觸發(fā)定時(shí)，計(jì)時(shí)時(shí)間到了以后，把要執(zhí)行的回調(diào)函數(shù)里面的代碼添加到待處理隊(duì)列的末尾，等待js線程空閑以后執(zhí)行。

5、http請求線程，在我們使用XMLHttpRequest對象發(fā)送http請求的時(shí)候，是新開一個(gè)線程請求，檢測到對象狀態(tài)改變時(shí)，如果綁定了回調(diào)函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件，將這個(gè)回調(diào)里面的代碼添加到j(luò)s線程末尾。

**三、js引擎線程的單線程**

1、分析下面代碼執(zhí)行過程，以定時(shí)器觸發(fā)線程為例看不同線程和js線程的執(zhí)行過程：

```text
console.log('js start');
setTimeout(function(){
    console.log('時(shí)間到了')
},0);
console.log('js end');
```

在上面代碼中，js代碼是由js引擎線程執(zhí)行的，這里要明確，js是單線程的，同一時(shí)間只能執(zhí)行一個(gè)的任務(wù)，所以有多個(gè)等待任務(wù)的時(shí)候需要排隊(duì)，排在前面的先執(zhí)行，排在后面的要等待前面任務(wù)完成才能執(zhí)行。開始的t1時(shí)間里面，代碼至上而下執(zhí)行，當(dāng)碰到setTimeout，這是個(gè)定時(shí)器，需要計(jì)時(shí)，把這個(gè)計(jì)時(shí)的任務(wù)交給定時(shí)觸發(fā)器線程（時(shí)間到了以后把要執(zhí)行的代碼排隊(duì)到t1的后面t2時(shí)間里面），繼續(xù)執(zhí)行js代碼。

最后代碼執(zhí)行結(jié)果為:


2、分析下面代碼執(zhí)行過程，觀察js引擎線程和GUI線程的互斥：

HTML部分：

```text
<input type="button" value='click me' id='btn'>
<div id="x"></div>
```

JavaScript部分：

```text
var btn=document.getElementById('btn');
var box=document.getElementById('x');
// wait要用于阻塞js引擎線程的執(zhí)行
function wait(ms){
    let time = new Date();
    while(new Date()-time<ms){}
}

btn.onclick = function(){
    box.innerHTML = "doing something";
    wait(3000);//阻塞js引擎線程3秒
    box.innerHTML = "finish";
}
```

在上面代碼中，開始的t1時(shí)間里面，代碼至上而下執(zhí)行，當(dāng)碰到事件綁定的時(shí)候，把這個(gè)事件監(jiān)聽的任務(wù)交給事件觸發(fā)線程，繼續(xù)執(zhí)行js代碼。當(dāng)用戶點(diǎn)擊按鈕，事件觸發(fā)線程監(jiān)聽到事件，把事件處理函數(shù)里面的代碼從隊(duì)列末尾插入，在t2事件執(zhí)行里面有三行代碼第一行是box.innerHTML = "doing something"，這行代碼是頁面渲染，交給GUI渲染線程，由于GUI渲染線程和js引擎線程是互斥的，這個(gè)時(shí)候先讓t2時(shí)間里面的其他js代碼wait(3000);繼續(xù)執(zhí)行，把box.innerHTML = "doing something"插入t2的后面t3時(shí)間里面，執(zhí)行完wait(3000)以后，最后一行是box.innerHTML = "finish"，這行代碼也是頁面渲染，交給GUI渲染線程，由于GUI渲染線程和js引擎線程是互斥的，不能同時(shí)執(zhí)行，把box.innerHTML = "finish"從隊(duì)列末尾插入，變成t4時(shí)間執(zhí)行。所以，最后結(jié)果是，當(dāng)用戶點(diǎn)擊的時(shí)候，div里面沒有內(nèi)容，3秒以后直接顯示finish。

**四、總結(jié)**

在前端學(xué)習(xí)過程中，js的單線程對大家理解同步和異步非常重要，熟悉js的單線程將讓大家能夠更好的理解事件，定時(shí)器和ajax請求的執(zhí)行過程。更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢想。