最近在學(xué)習(xí)前端的性能優(yōu)化，有必要了解一下頁(yè)面的渲染流程，以便對(duì)癥下藥，找出性能的瓶頸所在，頁(yè)面的渲染有以下特點(diǎn)：?jiǎn)尉€程事件輪詢/定義明確、連續(xù)、操作有序等等感興趣的朋友可以了解下
最近在學(xué)習(xí)前端的性能優(yōu)化，有必要了解一下頁(yè)面的渲染流程，以便對(duì)癥下藥，找出性能的瓶頸所在。以下是我看到的一些東西，分享給大家。
參考：Understanding the renderer
頁(yè)面的渲染有以下特點(diǎn)：
•單線程事件輪詢
•定義明確、連續(xù)、操作有序（HTML5）
•分詞和構(gòu)建DOM樹(shù)
•請(qǐng)求資源并預(yù)加載
•構(gòu)建渲染樹(shù)并繪制頁(yè)面
具體來(lái)說(shuō)：
當(dāng)我們從網(wǎng)絡(luò)上得到HTML的相應(yīng)字節(jié)時(shí)，DOM樹(shù)就開(kāi)始構(gòu)建了。由瀏覽器更新UI的線程負(fù)責(zé)。當(dāng)遇到以下情況時(shí)，DOM樹(shù)的構(gòu)建會(huì)被阻塞：
•HTML的響應(yīng)流被阻塞在了網(wǎng)絡(luò)中
•有未加載完的腳本
•遇到了script節(jié)點(diǎn)，但是此時(shí)還有未加載完的樣式文件
渲染樹(shù)構(gòu)建自DOM樹(shù)，并且會(huì)被樣式文件阻塞。
由于是基于單線程的事件輪詢，即使沒(méi)有腳本和樣式的阻塞，當(dāng)這些腳本或樣式被解析、執(zhí)行并且應(yīng)用的時(shí)候，也會(huì)阻塞頁(yè)面的渲染。
一些不會(huì)阻塞頁(yè)面渲染的情況：
•定義的defer屬性和async屬性的
•沒(méi)有匹配的媒體類型的樣式文件
•沒(méi)有通過(guò)解析器插入script節(jié)點(diǎn)或樣式節(jié)點(diǎn)
下面，通過(guò)一個(gè)例子來(lái)說(shuō)明一下（完整的代碼）：
代碼如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="other.js"></scr' + 'ipt>');
</script>
<div>Hi again!</div>
<script src="last.js"></script>
</body>
</html>
代碼很容易看明白，如果放在瀏覽器中打開(kāi)會(huì)立即顯示出想要的頁(yè)面。下面，讓我們用慢鏡頭回放的方式來(lái)看看它究竟是怎么渲染的。
代碼如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>...
首先，解析器遇到了example.css，并將它從網(wǎng)絡(luò)中下載下來(lái)。下載樣式表的過(guò)程是耗時(shí)的，但是解析器并沒(méi)有被阻塞，繼續(xù)往下解析。接下來(lái)，解析器遇到script標(biāo)簽，但是由于樣式文件沒(méi)有加載下來(lái)，阻塞了該腳本的執(zhí)行。解析器被阻塞住，不能繼續(xù)往下解析。
渲染樹(shù)也會(huì)被樣式文件阻塞，所以這時(shí)候沒(méi)有瀏覽器不會(huì)去渲染頁(yè)面，換句話說(shuō)，如果example.css文件下載不下來(lái)，Hi there! 是顯示不出來(lái)的。
接下來(lái)，繼續(xù)。。。
代碼如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="other.js"></scr' + 'ipt>');
</script>
一旦example.css文件加載完成，渲染樹(shù)也就被構(gòu)建好了。
內(nèi)聯(lián)的腳本執(zhí)行完之后，解析器就會(huì)立即被other.js阻塞住。一旦解析器被阻塞，瀏覽器就會(huì)收到繪制請(qǐng)求，"Hi there!"也就顯示在了頁(yè)面上。
當(dāng)other.js加載完成之后，解析器繼續(xù)向下解析。。。
代碼如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="other.js"></scr' + 'ipt>');
</script>
<div>Hi again!</div>
<script src="last.js"></script>
解析器遇到last.js之后會(huì)被阻塞，然后瀏覽器收到了另一個(gè)繪制請(qǐng)求，"Hi again!"就顯示在了頁(yè)面上。最后last.js會(huì)被加載，并且會(huì)被執(zhí)行。
但是，為了減緩渲染被阻塞的情況，現(xiàn)代的瀏覽器都使用了猜測(cè)預(yù)加載（speculative loading）。
在上面這種情況下，腳本和樣式文件會(huì)嚴(yán)重阻塞頁(yè)面的渲染。猜測(cè)預(yù)加載的目的就是減少這種阻塞時(shí)間。當(dāng)渲染被阻塞的時(shí)候，它會(huì)做以下一些事：
•輕量級(jí)的HTML（或CSS）掃描器（scanner）繼續(xù)在文檔中掃描
•查找那些將來(lái)可能能夠用到的資源文件的url
•在渲染器使用它們之前將其下載下來(lái)
但是，猜測(cè)預(yù)加載不能發(fā)現(xiàn)通過(guò)javascript腳本來(lái)加載的資源文件（如，document.write()）。
注：所有的“現(xiàn)代”瀏覽器都支持這種方式。
回過(guò)來(lái)再看上面的例子，通過(guò)猜測(cè)預(yù)加載這種方式是怎么工作的。
代碼如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>...
解析器返現(xiàn)了example.css，并從網(wǎng)絡(luò)獲取，解析器沒(méi)有被阻塞，繼續(xù)解析，當(dāng)遇到了內(nèi)聯(lián)的script節(jié)點(diǎn)時(shí)，被阻塞住，由于樣式文件沒(méi)有加載完成，阻塞了腳本的執(zhí)行。渲染樹(shù)同樣也被樣式文件阻塞住，所以瀏覽器沒(méi)有收到渲染請(qǐng)求，看不到任何東西。到目前為止，和剛才提到的那種方式是一樣的。但是接下來(lái)就由變化了。
預(yù)加載器（Speculative loader）繼續(xù)“閱讀”文檔，發(fā)現(xiàn)了last.js并視圖加載它。接下來(lái)：
代碼如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="other.js"></scr' + 'ipt>');
</script>
一旦example.css文件加載完成，渲染樹(shù)也就完成了構(gòu)建，內(nèi)聯(lián)的腳本也可以執(zhí)行，之后解析器又被other.js阻塞住。解析器被阻塞住之后，瀏覽器會(huì)收到第一個(gè)渲染請(qǐng)求，“Hi there!” 會(huì)被現(xiàn)實(shí)在頁(yè)面上。這個(gè)步驟和剛才那種情況是一致的。然后：
代碼如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="other.js"></scr' + 'ipt>');
</script>
<div>Hi again!</div>
<script src="last.js"></script>
解析器發(fā)現(xiàn)了last.js，但是由于預(yù)加載器剛才已經(jīng)把它給加載下來(lái)了，放在了瀏覽器的緩存里，所以last.js會(huì)被立即執(zhí)行。之后，瀏覽器會(huì)收到渲染請(qǐng)求“Hi again”也被顯示在了頁(yè)面上。
通過(guò)前后兩種情況的對(duì)比，希望大家可以對(duì)頁(yè)面的渲染有一定的了解，然后再有針對(duì)性的做一些優(yōu)化。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試