css加载会阻塞DOM树解析吗？

CSS加载会阻塞DOM树的构建，但不会阻塞DOM树的解析。 关键区别在于“构建”和“解析”。

1. 解析: 浏览器解析HTML文档，将HTML代码转换为DOM树。这一步是将HTML代码转换成浏览器可以理解的树形结构。

2. 构建: 浏览器构建渲染树（Render Tree）。渲染树包含了页面上所有可见元素的布局和样式信息。

CSS加载会阻塞渲染树的构建，因为浏览器需要知道每个元素的样式才能构建渲染树。如果CSS文件很大或者网络连接缓慢，那么渲染树的构建就会被延迟，从而导致页面显示空白。

更详细的解释：

• 浏览器解析HTML文档，生成DOM树。
• 浏览器解析CSS文件，生成CSSOM（CSS Object Model）。
• 浏览器将DOM树和CSSOM合并，生成渲染树。
• 浏览器根据渲染树进行布局（Layout），计算每个元素的位置和大小。
• 浏览器将布局后的渲染树绘制到屏幕上（Paint）。

因为渲染树依赖于DOM树和CSSOM，所以CSS加载会阻塞渲染树的构建。但是，DOM树的解析和CSS的下载是可以并行的。浏览器会先解析HTML文档，然后在解析过程中遇到link标签引用CSS文件时，会异步下载CSS文件。 即使CSS文件还没有下载完成，浏览器仍然会继续解析HTML文档，构建DOM树。

所以，准确的说是CSS的加载会阻塞渲染树的构建，进而影响到页面的首次渲染，让用户感觉页面加载慢。 为了优化页面加载速度，通常建议：

• 将CSS放在head标签内: 这样浏览器可以尽早下载CSS文件，减少阻塞时间。
• 使用CSS媒体查询: 可以使用媒体查询将不同设备的CSS分开加载，避免加载不必要的CSS。
• 优化CSS文件大小: 减小CSS文件大小可以加快下载速度。
• 使用关键CSS (Critical CSS): 将首屏渲染所需的CSS内联到HTML中，可以加快首屏渲染速度。

总而言之，CSS加载不会阻塞DOM树的解析，但会阻塞渲染树的构建，从而影响页面的首次渲染速度。