css加載是否會阻塞dom樹渲染


這里說的是頭部引入css的情況

首先,我們都知道:css是由單獨的下載線程異步下載的。

 

 

咱們先分析下css加載會影響什么,剛才的問題太籠統了,咱們需要細化一下。

會影響什么呢? 一個就是DOM樹解析,一個就是構建渲染樹【render樹】。

 

假設都不影響。

這個時候你加載css的時候,很可能會修改下面DOM節點的樣式,
如果css加載不阻塞render樹渲染的話,那么當css加載完之后,
render樹可能又得重新重繪或者回流了,這就造成了一些沒有必要的損耗。所以這個假設是不成立得。

另外不影響dom樹的解析和構建,本來dom樹的解析和構建這一步和css還沒有關系,所以根本談不上影響吧。而且是兩個不同的線程,各忙各的唄。

所以干脆就先把DOM樹的結構先解析完,把可以做的工作做完,然后等你css加載完之后,
在根據最終的樣式來渲染render樹,這種做法性能方面確實會比較好一點。

 

 

所以我們得出結論

  • css加載不會阻塞DOM樹解析(異步加載時DOM照常構建)

  • 但會阻塞render樹渲染(渲染時需等css加載完畢,因為render樹需要css信息)

這可能也就是瀏覽器的一種優化機制。

 

還有一種情況是 css資源一直沒響應,那頁面會事怎樣呢?這個留個作業,可以自己試試,有結果了給我留言吧。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM