CSS加載問題
css加載會(huì)不會(huì)阻塞DOM樹的解析?
css加載會(huì)不會(huì)阻塞DOM樹的渲染?
css加載會(huì)不會(huì)阻塞后面js語句的執(zhí)行?
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</title>
<meta charset="UTF-8">
<style>
h1 {
color: red !important
}
</style>
<script>
// 第一次測(cè)試部分
function h() {
console.log(document.querySelectorAll('h1'))
}
setTimeout(h, 0)
///////////////////////
// 第二次測(cè)試部分
console.log('before css');
var startTime = new Date()
///////////////////////
</script>
<link rel="stylesheet">
</head>
<body>
<h1>Hello World!! color:red</h1>
<script>
// 第二次測(cè)試
var endTime = new Date();
console.log('after css');
console.log('耗時(shí)' + (endTime - startTime) + 'ms');
</script>
</body>
</html>
在Chrome 將網(wǎng)絡(luò)狀態(tài)改成 GPRS 500kb/s 低網(wǎng)速下測(cè)試
-
css加載(下載)會(huì)阻塞DOM樹的解析渲染嗎？ 不會(huì)
由上運(yùn)行我們可以看到，當(dāng)css還沒加載完成的時(shí)候凝赛，h1并沒有顯示，但是此時(shí)控制臺(tái)輸出如下
NodeList可以得知戚长，此時(shí)DOM樹至少已經(jīng)解析完成到了h1那里敦腔，而此時(shí)css還沒加載完成缆八，也就說明潜秋，css并不會(huì)阻塞DOM樹的解析蛔琅。
-
css加載(下載)會(huì)阻塞DOM樹渲染？ 會(huì)
由上二次測(cè)試代碼輸出峻呛，我們也可以看到罗售，當(dāng)css還沒加載出來的時(shí)候辜窑，頁面顯示白屏挡闰，直到css加載完成之后肋联，紅色字體才顯示出來，也就是說论泛，下面的內(nèi)容雖然解析了职恳，但是并沒有被渲染出來所禀。所以，css加載會(huì)阻塞DOM樹渲染话肖。
總結(jié): 這可能也是瀏覽器的一種優(yōu)化機(jī)制北秽。因?yàn)槟慵虞dcss的時(shí)候葡幸，可能會(huì)修改下面DOM節(jié)點(diǎn)的樣式最筒，如果css加載不阻塞DOM樹渲染的話，那么當(dāng)css加載完之后蔚叨，DOM樹可能又得重新重繪或者回流了床蜘，這就造成了一些沒有必要的損耗。所以我干脆就先把DOM樹的結(jié)構(gòu)先解析完蔑水，把可以做的工作做完邢锯，然后等你css加載完之后，在根據(jù)最終的樣式來渲染DOM樹搀别，這種做法性能方面確實(shí)會(huì)比較好一點(diǎn)丹擎。
-
css加載會(huì)阻塞js運(yùn)行嗎？
第二次測(cè)試代碼的結(jié)果
before css
等待下載時(shí)間
after css
經(jīng)過了5662ms表明位于css加載語句前的那個(gè)js代碼先執(zhí)行了歇父，但是位于css加載語句后面的代碼遲遲沒有執(zhí)行蒂培，直到css加載完成后，它才執(zhí)行榜苫。這也就說明了护戳，css加載會(huì)阻塞后面的js語句的執(zhí)行。
綜合
css加載不會(huì)阻塞DOM樹的解析
css加載會(huì)阻塞DOM樹的渲染
css加載會(huì)阻塞后面js語句的執(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等赏壹，也可以通過開啟gzip壓縮)
合理的使用緩存(設(shè)置cache-control,expires,以及E-tag都是不錯(cuò)的么伯，不過要注意一個(gè)問題，就是文件更新后卡儒，你要避免緩存而帶來的影響田柔。其中一個(gè)解決防范是在文件名字后面加一個(gè)版本號(hào))
減少http請(qǐng)求數(shù)俐巴，將多個(gè)css文件合并，或者是干脆直接寫成內(nèi)聯(lián)樣式(內(nèi)聯(lián)樣式的一個(gè)缺點(diǎn)就是不能緩存)
