欢乐颂小说txt,好看的小说,神武八荒一颗小说

最近在學習前端的性能優化，有必要了解一下頁面的渲染流程，以便對癥下藥，找出性能的瓶頸所在。以下是我看到的一些東西，分享給大家。
參考：Understanding the renderer
頁面的渲染有以下特點：
•單線程事件輪詢
•定義明確、連續、操作有序（HTML5）
•分詞和構建DOM樹
•請求資源并預加載
•構建渲染樹并繪制頁面
具體來說：
當我們從網絡上得到HTML的相應字節時，DOM樹就開始構建了。由瀏覽器更新UI的線程負責。當遇到以下情況時，DOM樹的構建會被阻塞：
•HTML的響應流被阻塞在了網絡中
•有未加載完的腳本
•遇到了script節點，但是此時還有未加載完的樣式文件
渲染樹構建自DOM樹，并且會被樣式文件阻塞。
由于是基于單線程的事件輪詢，即使沒有腳本和樣式的阻塞，當這些腳本或樣式被解析、執行并且應用的時候，也會阻塞頁面的渲染。
一些不會阻塞頁面渲染的情況：
•定義的defer屬性和async屬性的
•沒有匹配的媒體類型的樣式文件
•沒有通過解析器插入script節點或樣式節點
下面，通過一個例子來說明一下（完整的代碼）：

復制代碼

代碼如下:
<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>

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

復制代碼

代碼如下:
<html>
<body>
　　<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<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>

上一篇：html4和html5區別之如何在一個input上添加焦點實現代碼

下一篇：改變HTML下拉框SELECT選項的多種方法

發表評論

共有條評論