瀏覽器渲染網頁的過程

Karuru 發布于2019-08-23 16:49 / 2623人閱讀

摘要：異步請求線程在在連接后是通過瀏覽器新開一個線程請求，將檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件放到引擎的處理隊列中等待處理。

瀏覽器的主要功能是將用戶選擇的 web 資源呈現出來，它需要從服務器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是 HTML，也包括 PDF、image 及其他格式。

瀏覽器的線程

瀏覽器是多線程的，它們在內核制控下相互配合以保持同步。一個瀏覽器至少實現三個常駐線程：JavaScript 引擎線程，GUI 渲染線程，瀏覽器事件觸發線程。

GUI 渲染線程：負責渲染瀏覽器界面 HTML 元素，當界面需要重繪（Repaint）或由于某種操作引發回流（reflow）時，該線程就會執行。在 Javascript 引擎運行腳本期間，GUI 渲染線程都是處于掛起狀態的，也就是說被”凍結”了。

JavaScript 引擎線程：主要負責處理 Javascript 腳本程序

定時器觸發線程：瀏覽器定時計數器并不是由 JavaScript 引擎計數的， JavaScript 引擎是單線程的，如果處于阻塞線程狀態就會影響記計時的準確，因此瀏覽器通過多帶帶線程來計時并觸發定時。

事件觸發線程：當一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾，等待 JS 引擎的處理。這些事件包括當前執行的代碼塊如定時任務、瀏覽器內核的其他線程如鼠標點擊、AJAX 異步請求等。由于 JS 的單線程關系所有這些事件都得排隊等待 JS 引擎處理。定時塊任何和 ajax 請求等這些異步任務，事件觸發線程只是在到達定時時間或者是 ajax 請求成功后，把回調函數放到事件隊列當中。

異步 HTTP 請求線程：在 XMLHttpRequest 在連接后是通過瀏覽器新開一個線程請求，將檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件放到 JavaScript 引擎的處理隊列中等待處理。在發起了一個異步請求時，http 請求線程則負責去請求服務器，有了響應以后，事件觸發線程再把回到函數放到事件隊列當中。

瀏覽器渲染流程 1.解析 html，構建 dom 樹；解析 CSS 會產生 CSS 規則樹

瀏覽器解析 HTML 文檔的源碼，然后構造出一個 DOM 樹，DOM 樹的構建過程是一個深度遍歷的過程，當前節點的所有子節點都構建好以后才會去構建當前節點的下一個兄弟節點。

瀏覽器對 CSS 文件內容進行解析，一般來說，瀏覽器會先查找內聯樣式，然后是 CSS 文件中定義的樣式，最后再是瀏覽器默認的樣式，構建 CSS Rule Tree。

2.構建（construct） render 樹

根據 DOM 樹和 CSSOM 樹來構造 Rendering Tree。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因為一些像 Header 或 display:none 的東西就沒必要放在渲染樹中了。

3.布局（layout） render 樹

有了 Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的 CSS 定義以及他們的從屬關系，從而去計算出每個節點在屏幕中的位置。

4.繪制（painting） render 樹

按照算出來的規則，通過顯卡，把內容畫到屏幕上。

5.回流（reflow）

當瀏覽器發現某個部分發生了點變化影響了布局，需要倒回去重新渲染，內行稱這個回退的過程叫 reflow。reflow 會從這個 root frame 開始遞歸往下，依次計算所有的結點幾何尺寸和位置。

6.重繪（repaint）

改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部布局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變。

瀏覽器對 CSS 和 JS 的解析規則

CSS：

CSS 放在 head 中會阻塞頁面的渲染（頁面的渲染會等到 css 加載完成）

CSS 阻塞 JS 的執行（因為 GUI 線程和 JS 線程是互斥的，因為有可能 JS 會操作 CSS）

CSS 不阻塞外部腳本的加載（不阻塞 JS 的加載，但阻塞 JS 的執行，因為瀏覽器都會有預先掃描器）

JS：

直接引入的 JS 會阻塞頁面的渲染（GUI 線程和 JS 線程互斥）

異步加載的 JS（script 標簽中添加 defer 屬性）不阻塞頁面的渲染

異步加載的 JS（script 標簽中添加 async屬性），下載過程不阻塞頁面渲染，當下載完成后立即執行，阻塞頁面渲染

JS 不阻塞資源的加載

JS 順序執行，阻塞后續 JS 邏輯的執行

HTML 頁面加載和解析流程

用戶輸入網址（假設是個 html 頁面，并且是第一次訪問），瀏覽器向服務器發出請求，服務器返回 html 文件；

瀏覽器開始載入 html 代碼，發現＜ head ＞標簽內有一個＜ link ＞標簽引用外部 CSS 文件；

瀏覽器發出 CSS 文件的請求，服務器返回這個 CSS 文件；（同時 GUI 渲染線程繼續執行，互不影響）

瀏覽器繼續載入 html 中＜ body ＞部分的代碼，并且 CSS 文件已經拿到手了，開始渲染頁面；

瀏覽器在代碼中發現一個＜ img ＞標簽引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染后面的代碼；

服務器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼；

瀏覽器發現了一個包含一行 Javascript 代碼的＜ script ＞標簽，直接運行；

Javascript 腳本操作某個元素，它命令瀏覽器隱藏掉代碼中的某個標簽（style.display=”none”）。瀏覽器會重新渲染這部分代碼；

遇到＜/html ＞，流程結束；

當用戶操作，頁面產生交互，瀏覽器發現某個部分發生了點變化影響了布局，瀏覽器回流（reflow）；改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部布局的屬性時，瀏覽器重繪（repaint）。

HTML 頁面加載優化

頁面減肥。頁面的肥瘦是影響加載速度最重要的因素刪除不必要的空格、注釋。將 inline 的 script 和 css 移到外部文件，可以使用 HTML Tidy 來給 HTML 減肥，還可以使用一些壓縮工具來給 JavaScript 減肥；

減少文件數量。減少頁面上引用的文件數量可以減少 HTTP 連接數。許多 JavaScript、CSS 文件可以合并最好合并；

減少域名查詢。DNS 查詢和解析域名也是消耗時間的，所以要減少對外部 JavaScript、CSS、圖片等資源的引用，不同域名的使用越少越好；

緩存重用數據；

優化頁面元素加載順序。首先加載頁面最初顯示的內容和與之相關的 JavaScript 和 CSS，然后加載 DHTML 相關的東西，像什么不是最初顯示相關的圖片、flash、視頻等很肥的資源就最后加載；

減少 inline JavaScript 的數量。瀏覽器 parser 會假設 inline JavaScript 會改變頁面結構，所以使用 inline JavaScript 開銷較大，不要使用 document.write()這種輸出內容的方法，使用現代 W3C DOM 方法來為現代瀏覽器處理頁面內容；

使用現代 CSS 和合法的標簽。使用現代 CSS 來減少標簽和圖像，例如使用現代 CSS+文字完全可以替代一些只有文字的圖片，使用合法的標簽避免瀏覽器解析 HTML 時做“error correction”等操作，還可以被 HTML Tidy 來給 HTML 減肥；

不要使用嵌套 tables；

指定圖像和 tables 的大小。如果瀏覽器可以立即決定圖像或 tables 的大小，那么它就可以馬上顯示頁面而不要重新做一些布局安排的工作，這不僅加快了頁面的顯示，也預防了頁面完成加載后布局的一些不當的改變。

參考文章

網頁在瀏覽器上的渲染過程

性能優化——CSS和JS的加載和執行

瀏覽器渲染原理及流程

GPU云服務器云服務器 360瀏覽器怎么下載網頁上的視頻 jsp 瀏覽器渲染網頁端webrtc視頻渲染網頁端3d云渲染

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103337.html

影響網頁渲染的關鍵

摘要：最優化渲染路徑，實際上只要聚焦三件事情最小化關鍵資源的數量最小化關鍵字節數最小化關鍵路徑的長度理解頁面加載速度的測量辦法當百度談論頁面加載速度時，他們并不是指加載一個網頁的總時間。張超 — MAY 21, 2015 經常有站長、開發者、運維疑惑：為什么我們的后臺服務器很快，但是用戶要看網頁里面的內容卻需要很長時間？我們在上一篇文章《怪獸大作戰: 解析網站打開慢的原因》中簡單介紹了影...

weknow619 2019-05-28 16:53 評論0 收藏0
webkit渲染機制淺析

摘要：模塊和將下面的渲染機制，安全機制，插件機制等等隱藏起來，提供一個接口層。進行網頁的渲染進程，可能有多個。最后進程將結果由線程傳遞給進程最后，進程接收到結果并將結果繪制出來。這是之前在簡書上面的處女作，也搬過來了，以后就一直在 segmentfault 上面寫文章了，webkit技術內幕-朱永盛是我大四買的書，很舊的一本書了，當時只看了一點點，一直沒繼續看完它，現在才看完，，，說來慚愧...

Cobub 2019-08-02 11:03 評論0 收藏0
面試題之從敲入 URL 到瀏覽器渲染完成

摘要：響應由三個部分組成，分別是狀態行消息報頭響應正文。詳情參考小汪之前寫的文章瀏覽器內核之解釋器和模型解釋解釋過程是指從字符串經過解釋器處理后變成渲染引擎內部規則的表示過程。 showImg(https://segmentfault.com/img/remote/1460000016404846); 前言小汪最近在看【WebKit 技術內幕】一書，說實話，這本書寫的太官方了，不通俗易懂。...

MAX_zuo 2019-08-23 11:59 評論0 收藏0
Webkit 渲染基礎與硬件加速

摘要：網頁的渲染方式主要有兩種軟件渲染和硬件加速渲染。而使用合成化的渲染技術，以使用軟件繪圖的合成化渲染為例，對于使用繪制的層，其結果保存在內存中，之后傳輸到中進行合成。 Webkit 渲染基礎與硬件加速當瀏覽器加載一個 html 文件并對它進行解析完畢后，內核就會生成一個極為重要的數據結構即 DOM 樹，樹上每一個節點都對應著網頁里面的某一個元素，并且開發人員也可以通過 JavaScri...

ivan_qhz 2019-08-22 15:14 評論0 收藏0
瀏覽器渲染網頁的過程

摘要：異步請求線程在在連接后是通過瀏覽器新開一個線程請求，將檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件放到引擎的處理隊列中等待處理。瀏覽器的主要功能是將用戶選擇的 web 資源呈現出來，它需要從服務器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是 HTML，也包括 PDF、image 及其他格式。瀏覽器的線程瀏覽器是多線程的，它們在內核制控下相互配合以保持同...

thekingisalwaysluc 2019-08-02 16:12 評論0 收藏0