這里說的是頭部引入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資源一直沒響應,那頁面會事怎樣呢?這個留個作業,可以自己試試,有結果了給我留言吧。
