終于考試完了，今天突然想起來(lái)前陣子找實(shí)習(xí)的時(shí)候，今日頭條面試官問(wèn)我，js執(zhí)行會(huì)阻塞DOM樹的解析和渲染，那么css加載會(huì)阻塞DOM樹的解析和渲染嗎？所以，接下來(lái)我就來(lái)對(duì)css加載對(duì)DOM樹的解析和渲染做一個(gè)測(cè)試。

為了完成本次測(cè)試，先來(lái)科普一下，如何利用chrome來(lái)設(shè)置下載速度

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

  2. 點(diǎn)擊我畫紅圈的地方(No throttling),會(huì)看到下圖,我們選擇GPRS這個(gè)選項(xiàng)
    大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

  3. 這樣，我們對(duì)資源的下載速度上限就會(huì)被限制成20kb/s，好，那接下來(lái)就進(jìn)入我們的正題

css加載會(huì)阻塞DOM樹的解析渲染嗎？

用代碼說(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