資訊專欄INFORMATION COLUMN
摘要：瀏覽器的預解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預加載器發現了標簽，會對文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個標記時，由于預加載器已經將文件加載下來了，所以會被立即執行，不需要等待從網絡抓取資源，減緩了對渲染的阻塞。
參考資料
瀏覽器的工作原理
瀏覽器加載網頁時的過程是什么？
HTML渲染過程詳解
瀏覽器的工作原理 一、瀏覽器的高層結構瀏覽器的主要組件為：
用戶界面 - 包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其他顯示的各個部分都屬于用戶界面。
瀏覽器引擎 - 在用戶界面和呈現引擎之間傳送指令。
呈現引擎 - 負責顯示請求的內容。如果請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，并將解析后的內容顯示在屏幕上。
網絡 - 用于網絡調用，比如 HTTP 請求。其接口與平臺無關，并為所有平臺提供底層實現。
用戶界面后端 - 用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操作系統的用戶界面方法。
JavaScript 解釋器。用于解析和執行 JavaScript 代碼。
數據存儲。這是持久層。瀏覽器需要在硬盤上保存各種數據，例如 Cookie。新的 HTML 規范 (HTML5) 定義了“網絡數據庫”，這是一個完整（但是輕便）的瀏覽器內數據庫。
值得注意的是，和大多數瀏覽器不同，Chrome 瀏覽器的每個標簽頁都分別對應一個呈現引擎實例。每個標簽頁都是一個獨立的進程。
二、主流程呈現引擎一開始會從網絡層獲取請求文檔的內容，內容的大小一般限制在 8000 個塊以內。
然后進行如下所示的基本流程：
呈現引擎將開始解析 HTML 文檔，并將各標記逐個轉化成“內容樹”上的 DOM 節點。同時也會解析外部 CSS 文件以及樣式元素中的樣式數據。HTML 中這些帶有視覺指令的樣式信息將用于創建另一個樹結構：呈現樹。
呈現樹包含多個帶有視覺屬性（如顏色和尺寸）的矩形。這些矩形的排列順序就是它們將在屏幕上顯示的順序。
呈現樹構建完畢之后，進入“布局”處理階段，也就是為每個節點分配一個應出現在屏幕上的確切坐標。下一個階段是繪制 - 呈現引擎會遍歷呈現樹，由用戶界面后端層將每個節點繪制出來。
需要著重指出的是，這是一個漸進的過程。為達到更好的用戶體驗，呈現引擎會力求盡快將內容顯示在屏幕上。它不必等到整個 HTML 文檔解析完畢之后，就會開始構建呈現樹和設置布局。在不斷接收和處理來自網絡的其余內容的同時，呈現引擎會將部分內容解析并顯示出來。
主流程示例：
腳本
網絡的模型是同步的。網頁作者希望解析器遇到 標簽，會對 last.js 文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個
由上面兩張截圖可以看到，jquery.min.js 腳本文件與 bootstrap.css 等樣式文件并行加載，但是由于 chrome 的并發連接數上限為 6 個，因此 bootstrap.min.js 腳本、xxx.css 樣式等文件的加載會等待前面的文件加載完成，有可用連接數的時候才開始加載。
了解以上信息之后，我們可以對該頁面進行相應優化，例如對CSS文件進行壓縮處理、使用 CDN，將資源分布在多個域名下、合并 CSS 文件，減少 HTTP 請求數量等，來提高 CSS 的加載速度，減少 HTML 文檔解析和渲染的阻塞時間。
browser only allows six TCP connections per origin on HTTP 1.
瀏覽器的并發請求數目限制是針對同一域名的。因此可以使用 CDN 加速技術來提高用戶訪問網站的響應速度，這樣使用了 CDN 的資源加載不會占用當前域名下的并發連接數，從而減少阻塞的時間。
網頁性能了解 HTML 文檔的解析和渲染的過程對于分析網頁性能有著重要意義，它可以幫助我們找到影響網頁性能的關鍵因素。例如，我們知道 JS 外部腳本的執行會阻塞文檔的解析，那么重量級的第三方插件則會影響首頁加載的速度，如果因此影響到了用戶體驗，我們就需要考慮這個第三方插件的使用成本是不是太高了，能否使用其他輕量級的插件進行替代，或者只使用其中一部分模塊。
以 Datatables 為例：
上圖是一個項目頁面的 Network 截圖，紅色框中的部分出現了約 700ms 左右的空白，我們需要知道為什么頁面的加載會出現這樣的情況，這段空白時間瀏覽器在干什么？
我們分析 Timeline 圖，看看瀏覽器在這段時間的具體信息，如下：
通過 Timeline 圖我們可以看到，在 250ms~900ms 時間區間內，瀏覽器在執行 datatables.min.js 腳本代碼，這個腳本的執行阻塞了文檔的解析，耗時約 700ms，對應了 Network 圖中的空白。
我們繼續查看頁面總的耗時時間，評估 700ms 耗時的影響，如下：
可以看到，頁面總的完成耗時為 1.66s，由此可知 datatables.min.js 的執行耗時占了很大比重，應當慎重考慮是否一定要使用這個插件，能否使用其他輕量級的插件進行替代，或者能否精簡插件的不必要模塊，或者舍棄插件的使用。
參考資料-1
瀏覽器接收到html代碼，可能是一份完整的文檔，也可能是一個chunk，即開始解析。解析過程是先構建dom樹，再根據dom樹構建渲染樹，最后瀏覽器將渲染樹繪制到頁面上。
構建dom樹的過程即根據html代碼自上而下進行構建，當遇到script文件加載／執行會阻塞后面dom樹的構建（javascript可能會改變dom樹），而遇到css文件則會阻塞渲染樹的構建，即dom樹依然繼續構建（除非遇到script標簽并且css文件依舊未加載完成），但不會渲染繪制到頁面上。而無論哪個阻塞，該加載的文件還是會加載，例如html文檔中的其他css／js／圖片文件。
另外javascript被加載后就會被執行，執行的過程也阻塞樹的構建。是執行完了才解析其他內容，而不是執行完了才加載其他內容。
作者：加冰
鏈接：https://www.zhihu.com/questio...
參考資料-2
首先，開源瀏覽器一般以8k每塊下載html頁面。
然后解析頁面生成DOM樹，遇到css標簽或JS腳本標簽就新起線程去下載他們，并繼續構建DOM。
下載完后解析CSS為CSS規則樹，瀏覽器結合CSS規則樹和DOM樹生成Render Tree。
注意：構建CSS Object Model（CSSOM)會阻塞JavaScript的執行。JavaScript的執行也會阻塞DOM的構建。
JavaScript下載后可以通過DOM API修改DOM，通過CSSOM API修改樣式作用域Render Tree。
每次修改會造成Render Tree的重新布局和重繪。只要修改DOM或修改了元素的形狀或大小，就會觸發Reflow，單純修改元素的顏色只需Repaint一下（調用操作系統Native GUI的API繪制）。
作者：陳金
鏈接：https://www.zhihu.com/questio...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54748.html
摘要：每種可被解析的格式必須具有由詞匯及語法規則組成的特定的文法，稱為上下文無關文法。解析解析器，每個標識都有特定的正則進行解析。開發者可以將腳本標識為，以使其不阻塞文檔解析，并在文檔解析結束后執行。 瀏覽器組成 用戶界面-地址欄、按鈕之類的 瀏覽器引擎-用來查詢及操作渲染引擎的接口 渲染引擎-顯示請求的內容 網絡-進行網絡請求 ui后端-用來滬指選擇框、對話框的基本組件 js解析器 數據...
摘要：瀏覽器的預解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預加載器發現了標簽，會對文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個標記時，由于預加載器已經將文件加載下來了，所以會被立即執行，不需要等待從網絡抓取資源，減緩了對渲染的阻塞。 參考資料 瀏覽器的工作原理 瀏覽器加載網頁時的過程是什么？ HTML渲染過程詳解 瀏覽器的工作原理 一、瀏覽器的高層結構 瀏覽器的主要組件為：...
摘要：瀏覽器的預解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預加載器發現了標簽，會對文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個標記時，由于預加載器已經將文件加載下來了，所以會被立即執行，不需要等待從網絡抓取資源，減緩了對渲染的阻塞。 參考資料 瀏覽器的工作原理 瀏覽器加載網頁時的過程是什么？ HTML渲染過程詳解 瀏覽器的工作原理 一、瀏覽器的高層結構 瀏覽器的主要組件為：...
閱讀 3072·2021-11-25 09:43
閱讀 2251·2021-09-07 10:28
閱讀 3543·2021-08-11 11:14
閱讀 2777·2019-08-30 13:49
閱讀 3544·2019-08-29 18:41
閱讀 1162·2019-08-29 11:26
閱讀 1976·2019-08-26 13:23
閱讀 3372·2019-08-26 10:43
