最近在學習前端的效能最佳化，有必要瞭解一下頁面的渲染流程，以便對症下藥，找出效能的瓶頸所在。以下是我看到的一些東西，分享給大家。
參考：Understanding the renderer
頁面的渲染有以下特點：
具體來說：
當我們從網路上得到HTML的相應位元組時，DOM樹就開始構建了。由瀏覽器更新UI的線程負責。當遇到以下情況時，DOM樹的構建會被阻塞：
渲染樹構建自DOM樹，並且會被樣式檔案阻塞。
由於是基於單線程的事件輪詢，即使沒有指令碼和樣式的阻塞，當這些指令碼或樣式被解析、執行並且應用的時候，也會阻塞頁面的渲染。
一些不會阻塞頁面渲染的情況：
下面，通過一個例子來說明一下（完整的代碼）：
1 <html> 2 <body> 3 <link rel="stylesheet" href="example.css"> 4 <div>Hi there!</div> 5 <script> 6 document.write('<script src="other.js"></scr' + 'ipt>'); 7 </script> 8 <div>Hi again!</div> 9 <script src="last.js"></script>10 </body>11 </html>
代碼很容易看明白，如果放在瀏覽器中開啟會立即顯示出想要的頁面。下面，讓我們用縮時攝影回放的方式來看看它究竟是怎麼渲染的。
1 <html>2 <body>3 <link rel="stylesheet" href="example.css">4 <div>Hi there!</div>5 <script>...
首先，解析器遇到了example.css，並將它從網路中下載下來。下載樣式表的過程是耗時的，但是解析器並沒有被阻塞，繼續往下解析。接下來，解析器遇到script標籤，但是由於樣式檔案沒有載入下來，阻塞了該指令碼的執行。解析器被阻塞住，不能繼續往下解析。
渲染樹也會被樣式檔案阻塞，所以這時候沒有瀏覽器不會去渲染頁面，換句話說，如果example.css檔案下載不下來，Hi there! 是顯示不出來的。
接下來，繼續。。。
<html><body> <link rel="stylesheet" href="example.css"> <div>Hi there!</div> <script> document.write('<script src="other.js"></scr' + 'ipt>'); </script>
一旦example.css檔案載入完成，渲染樹也就被構建好了。
內聯的指令碼執行完之後，解析器就會立即被other.js阻塞住。一旦解析器被阻塞，瀏覽器就會收到繪製請求，"Hi there!"也就顯示在了頁面上。
當other.js載入完成之後，解析器繼續向下解析。。。
1 <html>2 <body>3 <link rel="stylesheet" href="example.css">4 <div>Hi there!</div>5 <script>6 document.write('<script src="other.js"></scr' + 'ipt>');7 </script>8 <div>Hi again!</div>9 <script src="last.js"></script>
解析器遇到last.js之後會被阻塞，然後瀏覽器收到了另一個繪製請求，"Hi again!"就顯示在了頁面上。最後last.js會被載入，並且會被執行。
但是，為了減緩渲染被阻塞的情況，現代的瀏覽器都使用了猜測預先載入（speculative loading）。
在上面這種情況下，指令碼和樣式檔案會嚴重阻塞頁面的渲染。猜測預先載入的目的就是減少這種阻塞時間。當渲染被阻塞的時候，它會做以下一些事：
但是，猜測預先載入不能發現通過javascript指令碼來載入的資源檔（如，document.write()）。
註：所有的“現代”瀏覽器都支援這種方式。這句話有待商榷，具體請看我下一篇隨筆（正在整理中。。。）。
回過來再看上面的例子，通過猜測預先載入這種方式是怎麼工作的。
1 <html>2 <body>3 <link rel="stylesheet" href="example.css">4 <div>Hi there!</div>5 <script>...
解析器返現了example.css，並從網路擷取，解析器沒有被阻塞，繼續解析，當遇到了內聯的script節點時，被阻塞住，由於樣式檔案沒有載入完成，阻塞了指令碼的執行。渲染樹同樣也被樣式檔案阻塞住，所以瀏覽器沒有收到渲染請求，看不到任何東西。到目前為止，和剛才提到的那種方式是一樣的。但是接下來就有變化了。
預先載入器（Speculative loader）繼續“閱讀”文檔，發現了last.js並試圖載入它，（註：此時，如果example.css沒有載入下來，last.js是不會載入的，一直處於pending狀態）。接下來：
1 <html>2 <body>3 <link rel="stylesheet" href="example.css">4 <div>Hi there!</div>5 <script>6 document.write('<script src="other.js"></scr' + 'ipt>');7 </script>
一旦example.css檔案載入完成，渲染樹也就完成了構建，內聯的指令碼也可以執行，之後解析器又被other.js阻塞住。解析器被阻塞住之後，瀏覽器會收到第一個渲染請求，“Hi there!” 會被現實在頁面上。這個步驟和剛才那種情況是一致的。然後：
1 <html>2 <body>3 <link rel="stylesheet" href="example.css">4 <div>Hi there!</div>5 <script>6 document.write('<script src="other.js"></scr' + 'ipt>');7 </script>8 <div>Hi again!</div>9 <script src="last.js"></script>
解析器發現了last.js，但是由於預先載入器剛才已經把它給載入下來了，放在了瀏覽器的緩衝裡，所以last.js會被立即執行。之後，瀏覽器會收到渲染請求“Hi again”也被顯示在了頁面上。
通過前後兩種情況的對比，希望大家可以對頁面的渲染有一定的瞭解，然後再有針對性的做一些最佳化。晚安！
（完）^_^
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
