溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“html頁面渲染過程是怎樣的”，在日常操作中，相信很多人在html頁面渲染過程是怎樣的問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html頁面渲染過程是怎樣的”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
當我們從網絡上得到HTML的相應字節時，DOM樹就開始構建了。由瀏覽器更新UI的線程負責。當遇到以下情況時，DOM樹的構建會被阻塞：
HTML的響應流被阻塞在了網絡中
有未加載完的腳本
遇到了script節點，但是此時還有未加載完的樣式文件
渲染樹構建自DOM樹，并且會被樣式文件阻塞。
由于是基于單線程的事件輪詢，即使沒有腳本和樣式的阻塞，當這些腳本或樣式被解析、執行并且應用的時候，也會阻塞頁面的渲染。
一些不會阻塞頁面渲染的情況：
定義的defer屬性和async屬性的
沒有匹配的媒體類型的樣式文件
沒有通過解析器插入script節點或樣式節點
下面，通過一個例子來說明一下（完整的代碼）：
復制代碼
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）。
在上面這種情況下，腳本和樣式文件會嚴重阻塞頁面的渲染。猜測預加載的目的就是減少這種阻塞時間。當渲染被阻塞的時候，它會做以下一些事：
輕量級的HTML（或CSS）掃描器（scanner）繼續在文檔中掃描
查找那些將來可能能夠用到的資源文件的url
在渲染器使用它們之前將其下載下來
但是，猜測預加載不能發現通過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”也被顯示在了頁面上。
到此，關于“html頁面渲染過程是怎樣的”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
