了解html頁面的渲染過程

2021-08-01 07:33:09 字數 2521 閱讀 1043

頁面的渲染有以下特點:

具體來說:

當我們從網路上得到html的相應位元組時,dom樹就開始構建了。由瀏覽器更新ui的執行緒負責。

當遇到以下情況時,dom樹的構建會被阻塞:

由於是基於單執行緒的事件輪詢,即使沒有指令碼和樣式的阻塞,當這些指令碼或樣式被解析、執行並且應用的時候,也會阻塞頁面的渲染。

一些不會阻塞頁面渲染的情況:

下面,通過乙個例子來說明一下(完整的**):

rel="stylesheet"

href="example.css">

hi there!div>

document.write(' + 'ipt>');

script>

hi again!div>

src="last.js">

script>

body>

html>

**很容易看明白,如果放在瀏覽器中開啟會立即顯示出想要的頁面。下面,讓我們用慢鏡頭回放的方式來看看它究竟是怎麼渲染的。

"stylesheet" href="example.css">

hi there!

...

接下來,繼續。。。

rel="stylesheet"

href="example.css">

hi there!div>

document.write(' + 'ipt>');

script>

一旦example.css檔案載入完成,渲染樹也就被構建好了。

內聯的指令碼執行完之後,解析器就會立即被other.js阻塞住。一旦解析器被阻塞,瀏覽器就會收到繪製請求,」hi there!」也就顯示在了頁面上。

other.js載入完成之後,解析器繼續向下解析。。。

rel="stylesheet"

href="example.css">

hi there!div>

document.write(' + 'ipt>');

script>

hi again!div>

src="last.js">

script>

解析器遇到last.js之後會被阻塞,然後瀏覽器收到了另乙個繪製請求,」hi again!」就顯示在了頁面上。最後last.js會被載入,並且會被執行。

但是,為了減緩渲染被阻塞的情況,現代的瀏覽器都使用了猜測預載入(speculative loading)。

注:所有的「現代」瀏覽器都支援這種方式。這句話有待商榷

回過來再看上面的例子,通過猜測預載入這種方式是怎麼工作的。

"stylesheet" href="example.css">

hi there!

...

解析器返現了example.css,並從網路獲取,解析器沒有被阻塞,繼續解析,當遇到了內聯的script節點時,被阻塞住,由於樣式檔案沒有載入完成,阻塞了指令碼的執行。渲染樹同樣也被樣式檔案阻塞住,所以瀏覽器沒有收到渲染請求,看不到任何東西。到目前為止,和剛才提到的那種方式是一樣的。但是接下來就有變化了。

預載入器(speculative loader)繼續「閱讀」文件,發現了last.js並試圖載入它,(注:此時,如果example.css沒有載入下來,last.js是不會載入的,一直處於pending狀態)。接下來:

rel="stylesheet"

href="example.css">

hi there!div>

document.write(' + 'ipt>');

script>

一旦example.css檔案載入完成,渲染樹也就完成了構建,內聯的指令碼也可以執行,之後解析器又被other.js阻塞住。解析器被阻塞住之後,瀏覽器會收到第乙個渲染請求,「hi there!」 會被現實在頁面上。這個步驟和剛才那種情況是一致的。然後:

rel="stylesheet"

href="example.css">

hi there!div>

document.write(' + 'ipt>');

script>

hi again!div>

src="last.js">

script>

解析器發現了last.js,但是由於預載入器剛才已經把它給載入下來了,放在了瀏覽器的快取裡,所以last.js會被立即執行。之後,瀏覽器會收到渲染請求「hi again」也被顯示在了頁面上。

html頁面渲染過程

1.解析html檔案,建立dom樹 自上而下解析,遇到任何樣式 link style 和指令碼 script 都會阻塞 1 css載入不會阻塞html檔案的解析,但會阻塞dom的渲染 2 css載入會阻塞後面js語句的執行 3 js會阻塞html的解析和渲染 4 沒有defer和async標籤的sc...

瀏覽器渲染頁面的過程

瀏覽器是如何渲染頁面的?首先,輸入的 在通過dns解析後得到伺服器位址。然後,瀏覽器向伺服器發起http請求,經過tcp ip三次握手確認連線後,伺服器將需要的 發回給瀏覽器。最後,瀏覽器接收到 後進行解析,經過三大步驟 dom構造 布局 繪製頁面。第一步,dom構造 瀏覽器首先將收到的html 通...

Html頁面渲染

瀏覽器與伺服器的互動 瀏覽器的主要功能是將使用者選擇的web資源呈現出來,它從伺服器請求資源,並將得到的資源 html,pdf,image等等 顯示在瀏覽器視窗。那麼從使用者敲入url到完整渲染出來,經歷了什麼過程呢?也就是說整個瀏覽器的工作流程是怎樣的呢?整個過程大致如下 1.輸入url,瀏覽器根...