**一、 瀏覽器的進程和線程**

瀏覽器的架構是多進程的，不同的瀏覽器采用不同的進程架構，這個沒有統(tǒng)一的標準,以谷歌瀏覽器為例，他主要有四個進程，分別是頂層的Browser process，負責標簽頁網頁呈現的Renderer Process，負責控制網頁插件的Plugin Process和負責處理GPU的GPU Process。

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

**二、瀏覽器的渲染進程**

我們前端主要和Renderer Process打交道，在這個進程里面主要包含五個線程:

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

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

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

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

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

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

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

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

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

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


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時間里面，代碼至上而下執(zhí)行，當碰到事件綁定的時候，把這個事件監(jiān)聽的任務交給事件觸發(fā)線程，繼續(xù)執(zhí)行js代碼。當用戶點擊按鈕，事件觸發(fā)線程監(jiān)聽到事件，把事件處理函數里面的代碼從隊列末尾插入，在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í)行。所以，最后結果是，當用戶點擊的時候，div里面沒有內容，3秒以后直接顯示finish。

**四、總結**

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