CSS加载会造成阻塞吗环境准备首先我们需要设置chrome的下载速度打开chrome浏览器按下f12，选择No th

环境准备

首先我们需要设置chrome的下载速度打开chrome浏览器按下f12，选择No throttling，选择较慢的网速即可。

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>

我们可以看到当DOM解析到h1的时候，CSS还没有加载完成说明CSS并不会阻塞DOM树的解析

CSS加载会阻塞DOM树的渲染吗？

上图中，我们看到了当css还没有加载出来的时候，页面显示白屏，知道CSS加载完成之后，红色字体才会显示出来，也就是说，下面的内容虽然解析了，但是并没有渲染出来。所以,css加载会阻塞DOM树渲染。

这样有什么好处呢？

这是浏览器的一种优化机制。因为当你加载CSS的时候，可能会修改下面的DOM节点的样式，如果css加载不阻塞DOM树渲染的话，那么当css加载之后，DOM树可能又得重新渲染或者回流了，这就造成了一些没有必要的消耗。所以浏览器干脆等待DOM树结构先解析完，然后等待css加载完毕之后，根据最终的样式将DOM树渲染，达到性能上的优化。

css加载会阻塞js运行吗？

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css阻塞</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
      console.log('before css')
      var startDate = new Date()
    </script>
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
  </head>
  <body>
    <h1>这是红色的</h1>
    <script>
      var endDate = new Date()
      console.log('after css')
      console.log('经过了' + (endDate -startDate) + 'ms')
    </script>
  </body>
</html>

由上图我们可以看出css加载语句之前再js代码先执行，然后css加载语句之后的代码迟迟没有执行，直到css加载完毕之后才执行。所以，css加载会阻塞后面js代码的执行。