終于考試完了,今天突然想起來(lái)前陣子找實(shí)習(xí)的時(shí)候,今日頭條面試官問(wèn)我,js執(zhí)行會(huì)阻塞DOM樹(shù)的解析和渲染,那么css加載會(huì)阻塞DOM樹(shù)的解析和渲染嗎?所以,接下來(lái)我就來(lái)對(duì)css加載對(duì)DOM樹(shù)的解析和渲染做一個(gè)測(cè)試。
為了完成本次測(cè)試,先來(lái)科普一下,如何利用chrome來(lái)設(shè)置下載速度
打開(kāi)chrome控制臺(tái)(按下F12),可以看到下圖,重點(diǎn)在我畫紅圈的地方
點(diǎn)擊我畫紅圈的地方(No throttling),會(huì)看到下圖,我們選擇GPRS這個(gè)選項(xiàng)
這樣,我們對(duì)資源的下載速度上限就會(huì)被限制成20kb/s,好,那接下來(lái)就進(jìn)入我們的正題
css加載會(huì)阻塞DOM樹(shù)的解析渲染嗎?
用代碼說(shuō)話:
<!DOCTYPE html><html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function h () { console.log(document.querySelectorAll('h1')) &n