摘要：而進程是多線程的，它主要包含以下主要線程渲染線程負責渲染瀏覽器界面，解析，，構建樹和樹，布局和繪制等。且加載解析執(zhí)行會阻止解析器往下執(zhí)行，要強調(diào)渲染和下載是不沖突的，渲染是線程在執(zhí)行，下載是下載線程在執(zhí)行，瀏覽器多線程。

了解瀏覽器線程基礎

一個頁面的呈現(xiàn)主要是由瀏覽器渲染進程實現(xiàn)的（render進程），主要作用為頁面的渲染，腳本執(zhí)行，事件處理等。而render進程是多線程的，它主要包含以下主要線程：

1 GUI渲染線程

負責渲染瀏覽器界面，解析HTML，CSS，構建DOM樹和RenderObject樹，布局和繪制等。

當界面需要重繪（Repaint）或由于某種操作引發(fā)回流(reflow)時，該線程就會執(zhí)行

注意，GUI渲染線程與JS引擎線程是互斥的，當JS引擎執(zhí)行時GUI線程會被掛起（相當于被凍 結了），GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執(zhí)行。

2 JS引擎線程

也稱為JS內(nèi)核，負責處理Javascript腳本程序。（例如V8引擎）

JS引擎線程負責解析Javascript腳本，運行代碼。

JS引擎一直等待著任務隊列中任務的到來，然后加以處理，一個Tab頁（renderer進程）中 無論什么時候都只有一個JS線程在運行JS程序

同樣注意，GUI渲染線程與JS引擎線程是互斥的，所以如果JS執(zhí)行的時間過長，這樣就會造成頁面的渲染不連貫，導致頁面渲染加載阻塞。

3 事件觸發(fā)線程

歸屬于瀏覽器而不是JS引擎，用來控制事件循環(huán)（可以理解，JS引擎自己都忙不過來，需要瀏覽器另開線程協(xié)助）

當JS引擎執(zhí)行代碼塊如setTimeOut時（也可來自瀏覽器內(nèi)核的其他線程,如鼠標點擊、AJAX異步請求等），會將對應任務添加到事件線程中

當對應的事件符合觸發(fā)條件被觸發(fā)時，該線程會把事件添加到待處理隊列的隊尾，等待JS引擎的處理

注意，由于JS的單線程關系，所以這些待處理隊列中的事件都得排隊等待JS引擎處理（當JS引擎空閑時才會去執(zhí)行）

4 定時觸發(fā)器線程

傳說中的setInterval與setTimeout所在線程

瀏覽器定時計數(shù)器并不是由JavaScript引擎計數(shù)的,（因為JavaScript引擎是單線程的, 如果處于阻塞線程狀態(tài)就會影響記計時的準確）

因此通過多帶帶線程來計時并觸發(fā)定時（計時完畢后，添加到事件隊列中，等待JS引擎空閑后執(zhí)行）

5 異步http請求線程

在XMLHttpRequest在連接后是通過瀏覽器新開一個線程請求

將檢測到狀態(tài)變更時，如果設置有回調(diào)函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件，將這個回調(diào)再放入事件隊列中。再由JavaScript引擎執(zhí)行。

JS阻塞特性

由上述ＧＵＩ線程和ＪＳ引擎互斥的關系，我們也就能更好的理解為什么ＪＳ運行會阻塞頁面的渲染，也就是常說的JS阻塞特性。

HTML整體執(zhí)行步驟

０.加載整體ｈｔｍｌ文件

１.至上而下解析html

２.解析html建立dom樹，遇到諸如

html順序測試

Test.js代碼：

        for(var i=0;i<10000;i++){
            console.log("delay");
            if(i==9999){
                loadStyle("lime.css");
            }
        }


        function loadStyle(url){
            var link = document.createElement("link");
            link.type = "text/css";
            link.rel = "stylesheet";
            link.href = url;
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(link);
        }

Test2.js代碼：

console.log("after blocking script,you will appear");

從圖中可以看出：遇到

Refresh with the console open to see the hanging

由https://blog.csdn.net/gbstack...，我們可以得到：

由圖中可以看出：

外部腳本與外部樣式是并行加載（即在　下載　階段，