了解html頁面的渲染過程以備學習前端的效能最佳化_HTML/Xhtml_網頁製作
- WBOY原創
- 2016-05-16 16:40:411519瀏覽
最近在學習前端的效能優化，有必要了解頁面的渲染流程，以便對症下藥，找出效能的瓶頸所在。以下是我看到的一些東西，分享給大家。
參考：Understanding the renderer
頁的渲染有以下特點：
•單執行緒事件輪詢
•定義明確、連續、操作有序（HTML5）
•分詞與建構DOM樹
•請求資源並預先載入
•建立渲染樹並繪製頁面
具體來說：
當我們從網路上得到HTML的對應位元組時，DOM樹就開始建置了。由瀏覽器更新UI的執行緒負責。當遇到以下情況時，DOM樹的構建會被阻塞：
•HTML的響應流被阻塞在了網絡中
•有未加載的腳本
•遇到了script節點，但是此時還有未載入完的樣式檔
渲染樹建構自DOM樹，並且會被樣式檔阻塞。
由於是基於單執行緒的事件輪詢，即使沒有腳本和樣式的阻塞，當這些腳本或樣式被解析、執行並且應用的時候，也會阻塞頁面的渲染。
一些不會阻塞頁面渲染的情況：
•定義的defer屬性和async屬性的
•沒有匹配的媒體類型的樣式檔案
•沒有通過解析器插入script節點或樣式節點
下面，透過一個例子來說明（完整的程式碼）：
複製程式碼
程式碼如下:Hi there!
<script> <br /> document.write('<script src="other.js">' 'ipt>'); <br /> </script>
Hi again!
程式碼很容易看明白，如果放在瀏覽器中開啟會立即顯示出想要的頁面。下面，讓我們用慢動作回放的方式來看看它究竟是怎麼渲染的。
複製程式碼
程式碼如下:Hi there!
<script>... <br /></script>
首先，解析器遇到了example.css，並將它從網路中下載下來。下載樣式表的過程是耗時的，但是解析器並沒有被阻塞，繼續往下解析。接下來，解析器遇到script標籤，但由於樣式檔案沒有載入下來，所以阻塞了該腳本的執行。解析器被阻塞住，不能繼續往下解析。
渲染樹也會被樣式檔案阻塞，所以這時候沒有瀏覽器不會去渲染頁面，換句話說，如果example.css檔案下載不下來，Hi there! 是顯示不出來的。
接下來，繼續。 。 。
複製程式碼
程式碼如下:Hi there!
<script> <br /> document.write('<script src=" other.js">' 'ipt>'); <br /></script>
一旦example.css檔案載入完成，渲染樹也就被建置好了。
內聯的腳本執行完後，解析器就會立即被other.js阻塞住。一旦解析器被阻塞，瀏覽器就會收到繪製請求，"Hi there!"也就顯示在了頁面上。
當other.js載入完成之後，解析器繼續向下解析。 。 。
複製程式碼
程式碼如下:Hi there!
document.write('
Hi again!
解析器遇到last.js之後會被阻塞，然後瀏覽器收到了另一個繪製請求，"Hi again!"就顯示在了頁面上。最後last.js會被載入，並且會被執行。
但是，為了減緩渲染被阻塞的情況，現代的瀏覽器都使用了猜測預載（speculative loading）。
在上面這種情況下，腳本和樣式檔案會嚴重阻塞頁面的渲染。猜測預先載入的目的就是減少這種阻塞時間。當渲染被阻塞的時候，它會做以下一些事：
•輕量級的HTML（或CSS）掃描器（scanner）繼續在文件中掃描
•找出那些將來可能能夠用到的資源檔案的url
•在渲染器使用它們之前將其下載下來
但是，猜測預先載入不能發現透過javascript腳本來載入的資源檔案（如，document.write()）。
註：所有的「現代」瀏覽器都支援這種方式。
回過來再看上面的例子，透過猜測預先載入這種方式是怎麼運作的。
複製程式碼
程式碼如下:Hi there!
<script>... <br /></script>
<script>... <br /><br /><br />解析🎜>解析🎜>解析🎜>解析🎜>解析🎜>解析🎜>解析🎜>解析🎜>解析🎜>解析🎜>解析🎜>解析🎜>解析器返現了example.css，並從網絡獲取，解析器沒有被阻塞，繼續解析，當遇到了內聯的script節點時，被阻塞住，由於樣式文件沒有加載完成，阻塞了腳本的執行。渲染樹同樣也被樣式檔案阻塞住，所以瀏覽器沒有收到渲染請求，看不到任何東西。到目前為止，和剛才提到的那種方式是一樣的。但是接下來就由變化了。 <br><div class="msgheader">預先載入器（Speculative loader）繼續「閱讀」文檔，發現了last.js並且檢視載入它。接下來：<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode28'));"><u>複製程式碼<div class="msgborder" id="phpcode28"><br />程式碼如下：<br /><br /> <br /><html> <br /><html> <br /> <body> <br /> <link rel="stylesheet" href="example.css"> <br /> <div>Hi there! <script> <br /> 㟎> <script> <br /> 〦. src="other.js">' 'ipt>'); <br> </script>
一旦example.css檔案載入完成，渲染樹也就完成了構建，內聯的腳本也可以執行，之後解析器又被other.js阻塞住。解析器被阻塞住之後，瀏覽器會收到第一個渲染請求，「Hi there!」 會被現實在頁面上。這個步驟和剛才那種情況是一致的。然後：
複製代碼
代碼如下:
<script> </script>
㟎> <script> < ="other.js">' 'ipt>'); <br /> </script> 代碼如下:
Hi there!
<script> </script>
Hi again!
解析器發現了last.js，但是由於預載器剛才已經把它給加載下來了，放在了瀏覽器的緩存裡，所以last.js會被立即執行。之後，瀏覽器會收到渲染請求「Hi again」也被顯示在了頁面上。 透過前後兩種情況的對比，希望大家可以對頁面的渲染有一定的了解，然後再有針對性的做一些優化。晚安！ （完）^_^
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn