前端性能优化六：css阻塞

1. css加载会阻塞DOM树的解析和渲染吗?

(1). html代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>

(2). 打开一个新窗口,打开chrome的network,设置下载速度为slow 3G:

①. html页面最开始就是Finished状态.

②. bootcss刚开始处于pending状态:
    a. 当css还没加载完成时,h1并没有显示.
    b. 但此时控制台输出内容.
    c. 直到css加载完成后,红色字体才显示出来.即:内容虽然解析了,但并没有被渲染出来.

③. 结论:
    a. DOM树至少已经解析完成到了h1那里.
    b. 此时css还没加载完成. => css并不会阻塞DOM树的解析.
    c. 加载完成后才显示. => css加载会阻塞DOM树渲染.

加载css时,可能会修改DOM节点的样式,如果css加载不阻塞DOM树渲染的话,那么当css加载完之后，DOM树可能又得重新重绘或者回流了，这就造成了一些没有必要的损耗。所以我干脆就先把DOM树的结构先解析完，把可以做的工作做完，然后等你css加载完之后，在根据最终的样式来渲染DOM树，这种做法性能方面确实会比较好一点。

2. css加载会阻塞js运行吗?

(1). html代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      console.log('before css')
      var startDate = new Date()
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <h1>这是红色的</h1>
    <script>
      var endDate = new Date()
      console.log('after css')
      console.log('经过了' + (endDate -startDate) + 'ms')
    </script>
  </body>
</html>

(2). 打开一个新窗口,打开chrome的network,设置下载速度为slow 3G:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

①. html页面最开始就是Finished状态.

②. bootcss刚开始处于pending状态:
    a. 当css还没加载完成时,h1并没有显示.
    b. 但此时控制台输出内容:before css. => css加载前的js代码先执行了.
    c. 直到css加载完成后,文字才显示出来. => css加载后的js代码没有执行.
    d. 此时,才显示after css、经过了5662ms.

③. 结论:
    a. css加载会阻塞后面的js语句的执行.