聊聊关于CSS 与 JS 是怎么阻塞 DOM 解析和渲染的

前言

CSS和JS的加载和执行可以影响DOM解析和渲染。在了解阻塞DOM解析和渲染的原理之前，我们需要明白DOM解析和渲染的基本概念。

DOM解析和渲染

DOM（文档对象模型）是根据HTML文档构建的一个树形结构，它表示了HTML文档的结构和内容。DOM解析是将HTML文档转换为一个DOM树的过程。

DOM解析和渲染的流程如下：

1. 浏览器接收到HTML文档并开始解析。
2. 解析过程中，浏览器将HTML文档解析为DOM树，并根据解析到的样式信息生成渲染树（包含了所有可见的DOM节点和其样式）。
3. 生成渲染树后，浏览器开始布局（计算每个元素在视口中的位置和大小）。
4. 最后，浏览器将渲染树绘制到屏幕上。

CSS的阻塞

1. 外部CSS文件阻塞：
当浏览器下载外部CSS文件时，它会暂停DOM解析和渲染过程，直到CSS文件下载完毕并解析完成为止。这是因为浏览器在解析HTML文档的过程中，需要根据CSS样式来构建渲染树，因此必须等待CSS文件加载完毕。

2. 内部CSS和嵌入式CSS阻塞：
在解析HTML文档时，浏览器会按照解析顺序逐行读取代码。当浏览器遇到内部CSS或嵌入式CSS时，它会停止解析HTML，先解析并构建渲染树，然后再继续解析之后的HTML代码。这样可以确保在DOM解析完毕后，样式信息已经加载完毕。

JS的阻塞

1. 外部JS文件阻塞：
当浏览器下载外部JS文件时，会暂停DOM解析和渲染过程，直到JS文件下载并执行完成为止。这是因为JS可以操作DOM和改变样式，因此必须等待JS执行完毕，避免对尚未构建完毕的DOM进行操作。

2. 内部JS和嵌入式JS阻塞：
浏览器在解析HTML代码时，当遇到内部JS或嵌入式JS时，会停止DOM解析和渲染，先执行JS代码，然后再继续解析HTML。这样可以保证在JS执行之前，DOM已经构建完毕。

解决方法

1. 异步加载：
使用<script async src="script.js">语法可以告诉浏览器该JS文件可以异步加载和执行，不会阻塞DOM解析和渲染。

2. 延迟加载：
使用<script defer src="script.js">语法可以告诉浏览器该JS文件可以延迟加载，在HTML解析完毕后再执行，不会阻塞DOM解析，但会阻塞渲染。

3. 内联CSS和JS：
将CSS和JS代码直接嵌入到HTML中，可以减少外部资源的加载时间，提高页面加载速度。

总的来说，优化CSS和JS的加载方式可以提高页面的加载速度和用户体验。