css加载造成阻塞

CSS加载是否会造成阻塞？

1. css加载不会阻塞DOM结构的解析
2. css加载会阻塞DOM结构的渲染
3. css加载会阻塞后面js语句的执行

浏览器渲染过程

1. 解析css文件和html文件分别形成CSSOM Tree和DOM Tree，两者并行，不会互相影响
2. 将解析后的CSSOM Tree与DOM Tree合并形成渲染树render Tree
3. 将合并后的渲染树渲染到页面上

1. css文件和html文件的渲染并行，所以不会阻塞DOM结构的解析，但是会阻塞后续的页面渲染
2. 代码中JS语句可能会操作前面的DOM结构从而形成重绘和重排（不重要，专门写一下加深一下这俩的印象），所以浏览器渲染时，会让js语句的执行放在css执行完成之后，所以css的加载也会造成js语句的执行

实际开发中，有时由于css的加载过慢，导致页面进入时有较长时间的白屏

解决方法：
1. 进行压缩，如使用webpack、gulp等工具对css文件进行压缩
2. 减少请求数，将多个css文件进行合并，或者写成内联样式（不推荐写成内联，不方便后续需求修改和代码的阅读）
3. 使用CDN引入（cdn引入会根据当前的网络挑选最近的一个具有缓存内容的节点提供资源）