HTML文檔加載邊解析

之前一直以為html是加載完之后才由html解析器進行解析的，學習了瀏覽器原理之后，才知道。HTML解析器并不是等整個文檔加載完成之后再解析的，而是網(wǎng)絡進程加載了多少數(shù)據(jù)，HTML 解析器便解析多少數(shù)據(jù)。

具體的詳細流程如下：
瀏覽器的網(wǎng)絡進程接收到響應頭之后，會根據(jù)響應頭中的 content-type 字段來判斷文件的類型，比如 content-type 的值是“text/html”，那么瀏覽器就會判斷這是一個 HTML 類型的文件，然后為該請求選擇或者創(chuàng)建一個渲染進程。渲染進程準備好之后，網(wǎng)絡進程和渲染進程之間會建立一個共享數(shù)據(jù)的管道，網(wǎng)絡進程接收到數(shù)據(jù)后就往這個管道里面放，而渲染進程則從管道的另外一端不斷地讀取數(shù)據(jù)，并同時將讀取的數(shù)據(jù)“喂”給 HTML 解析器。你可以把這個管道想象成一個“水管”，網(wǎng)絡進程接收到的字節(jié)流像水一樣倒進這個“水管”，而“水管”的另外一端是渲染進程的 HTML 解析器，它會動態(tài)接收字節(jié)流，并將其解析為 DOM。

關于HTML的預解析

一般情況下，html文檔解析時，遇到js腳本就會暫停，等待腳本的下載、執(zhí)行，而下載的也比較依賴網(wǎng)絡環(huán)境、腳本大小等。針對這個情況，Chrome 瀏覽器做了很多優(yōu)化，其中一個主要的優(yōu)化是預解析操作。當渲染引擎收到字節(jié)流之后，會開啟一個預解析線程，用來分析 HTML 文件中包含的 JavaScript、CSS 等相關文件，解析到相關文件之后，預解析線程會提前下載這些文件。

原文

極客時間-瀏覽器工作原理與實踐