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

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

  1. 打開chrome控制臺(按下F12),可以看到下圖,重點在我畫紅圈的地方
    大學生就業(yè)培訓,高中生培訓,在職人員轉(zhuǎn)行培訓,企業(yè)團訓

  2. 點擊我畫紅圈的地方(No throttling),會看到下圖,我們選擇GPRS這個選項
    大學生就業(yè)培訓,高中生培訓,在職人員轉(zhuǎn)行培訓,企業(yè)團訓

  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'))   &n