默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器不会渲染任何已处理的内容，直至CSSOM构建完毕
javascript 不仅可以读取和修改DOM 属性，还可以读取和修改CSSOM 属性
当浏览器遇到一个script标记时，DOM 构建将暂停，直至脚本完成执行。
javascript 可以查询和修改 DOM 与 CSSOM
CSSOM 构建时，javascript 执行将暂停，直至 CSSOM 就绪。
所以，script 标签的位置很重要。实际使用时，可以遵循下面2个原则
CSS 优先：引入顺序上，CSS 资源优于javascript资源
javascript 应尽量少影响 DOM 的构建
个人理解 css 的解析会 阻塞 javascript 的运行，CSSDOM Tree和 DOM Tree 形成 渲染树Rendor Tree,所以css 没有解析完的时候会阻止渲染树的形成，造成渲染的阻塞（不是 阻塞DOM Tree 的构建）（此时文档不会在页面上显示）
所以 css link 标签放文档的前面 ，优先让 css 的 http 请求完成， CSSDOM 的 构建完成
javascript 会阻塞 DOM Tree 的构建，所以 javasript 一般都放在文档后面。
CSS 会阻塞渲染吗？
从浏览器的渲染原理来看，渲染引擎会将css 构建成 CSSOM Tree 然后再渲染页面。也就是说，CSS 会 阻塞 页面的渲染！但是，CSS 并不会阻塞 DOM 的解析。（因为需要具有 DOM 以及 CSSOM 才会构建渲染树）
css加载会阻塞js运行吗？
由上面的推论，我们可以得出，css加载不会阻塞DOM树解析，但是会阻塞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.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>
假设: css加载会阻塞后面的js运行
预期结果: 在link后面的js代码，应该要在css加载完成后才会运行
实际结果:
由上图我们可以看出，位于css加载语句前的那个js代码先执行了，但是位于css加载语句后面的代码迟迟没有执行，直到css加载完成后，它才执行。这也就说明了，css加载会阻塞后面的js语句的执行。详细结果看下图(css加载用了5600+ms):
结论
由上所述，我们可以得出以下结论:
- css加载不会阻塞DOM树的解析
- css加载会阻塞DOM树的渲染
- css加载会阻塞后面js语句的执行、
因此，为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法:
- 使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)
- 对css进行压缩(可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩)
- 合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)
- 减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)
