詳解css加載會造成阻塞嗎

2024-07-11 08:32:10

字體：大中小

來源：轉載

供稿：網友

終于考試完了，今天突然想起來前陣子找實習的時候，今日頭條面試官問我，js執行會阻塞DOM樹的解析和渲染，那么css加載會阻塞DOM樹的解析和渲染嗎？所以，接下來我就來對css加載對DOM樹的解析和渲染做一個測試。

為了完成本次測試，先來科普一下，如何利用chrome來設置下載速度

1、打開chrome控制臺(按下F12),可以看到下圖，重點在我畫紅圈的地方

2、點擊我畫紅圈的地方(No throttling),會看到下圖,我們選擇GPRS這個選項

3、這樣，我們對資源的下載速度上限就會被限制成20kb/s，好，那接下來就進入我們的正題

css加載會阻塞DOM樹的解析渲染嗎？

用代碼說話：

<!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')) } setTimeout(h, 0) </script> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>這是紅色的</h1> </body></html>

假設： css加載會阻塞DOM樹解析和渲染

假設結果: 在bootstrap.css還沒加載完之前，下面的內容不會被解析渲染，那么我們一開始看到的應該是白屏，h1不會顯示出來。并且此時console.log的結果應該是一個空數組。

實際結果:如下圖