轉(zhuǎn)載于：https://www.cnblogs.com/chenjg/p/7126822.html

? ? ? ? ? ? ? ? ? ? https://blog.csdn.net/bg70pvnybv1/article/details/78819711

js執(zhí)行會(huì)阻塞DOM樹的解析和渲染、 那么css加載會(huì)阻塞DOM樹的解析和渲染嗎？

結(jié)論：

1、css加載不會(huì)阻塞DOM樹的解析

2、css加載會(huì)阻塞DOM樹的渲染

3、css加載會(huì)阻塞后面js語(yǔ)句的執(zhí)行、

因此，為了避免讓用戶看到長(zhǎng)時(shí)間的白屏?xí)r間，我們應(yīng)該盡可能的提高css加載速度，比如可以使用以下幾種方法:

使用CDN(因?yàn)镃DN會(huì)根據(jù)你的網(wǎng)絡(luò)狀況，替你挑選最近的一個(gè)具有緩存內(nèi)容的節(jié)點(diǎn)為你提供資源，因此可以減少加載時(shí)間)

對(duì)css進(jìn)行壓縮(可以用很多打包工具，比如webpack,gulp等，也可以通過(guò)開(kāi)啟gzip壓縮)

合理的使用緩存(設(shè)置cache-control,expires,以及E-tag都是不錯(cuò)的，不過(guò)要注意一個(gè)問(wèn)題，就是文件更新后，你要避免緩存而帶來(lái)的影響。其中一個(gè)解決防范是在文件名字后面加一個(gè)版本號(hào))

減少http請(qǐng)求數(shù)，將多個(gè)css文件合并，或者是干脆直接寫成內(nèi)聯(lián)樣式(內(nèi)聯(lián)樣式的一個(gè)缺點(diǎn)就是不能緩存)

注：js是如何阻塞DOM樹的解析和渲染的？

· 如果async為true，那么腳本在下載完成后異步執(zhí)行。

· 如果async為false，defer為true，那么腳本會(huì)在頁(yè)面解析完畢之后執(zhí)行。

· 如果async和defer都為false，那么腳本會(huì)在頁(yè)面解析中，停止頁(yè)面解析，立刻下載并且執(zhí)行，