CSS加载造成的阻塞优化

要点：

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

优化方法：

1. 把CSS文件放在HTML文档的头部（head）中，避免FOUC问题。

2. 尽可能减少使用@import语句和内联样式，因为它们会降低CSS文件的下载和解析速度。

3. 将多个CSS文件合并成一个文件，以减少HTTP请求次数，加快页面加载速度。

4. 压缩CSS文件以减少文件大小，从而减少下载时间。

5. 使用CSS预处理器（如Sass或Less）来优化CSS代码。

6. 对于较大的CSS文件，可以使用异步加载或延迟加载技术来提高页面渲染速度，确保首屏内容可以快速呈现，而不需要等待CSS文件的下载和解析。

原理分析：

浏览器渲染的流程：

1. HTML解析文件，生成DOM Tree，解析CSS文件生成CSSOM Tree
2. 将Dom Tree和CSSOM Tree结合，生成Render Tree(渲染树)
3. 根据Render Tree渲染绘制，将像素渲染到屏幕上。

流程分析：

1. DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。
2. 然而，由于Render Tree是依赖于DOM Tree和CSSOM Tree的，所以他必须等待到CSSOM Tree构建完成，也就是CSS资源加载完成(或者CSS资源加载失败)后才能开始渲染。因此，CSS加载是会阻塞Dom的渲染的。
3. 由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。

注:CSSOM（CSS Object Model）是CSS的对象模型，它是由CSS规则组成的树状结构，用于描述文档中应用的CSS样式规则。CSSOM树中的每个节点都是CSS样式规则中的一个部分，例如选择器、样式属性等，这些节点组成了一个完整的CSS规则对象，用于计算元素节点的最终样式。

浏览器的页面加载：

对于浏览器来说，页面加载主要有两个事件，onLoad和DOMContentLoaded。onLoad的是等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。DOMContentLoaded，是当页面的内容解析完成后，则触发该事件。

1. 如果页面中同时存在css和js，并且存在js在css的后面，则DOMContentLoaded事件会在css加载完后才执行。
2. 其他情况下，DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。