WEB 是如何工作的

是兄弟节点，在 DOM 树的构建过程中，当前节点所有的子节点全都构建完成后才会构建下一兄弟节点

构建 CSSOM 树

在上面的 HTML 中，

里有个外部样式表 style.css，HTML 解析到这里时会向服务器请求资源，得到这样的资源：

body { 
 font-size: 16px}p { 
 font-weight: bold 
}span { 
 color: red 
}p span { 
 display: none 
}img { 
 float: right 
}

和处理 HTML 类似，浏览器处理 CSS 构建了 CSSOM

构建渲染树

前面已经构建了 DOM 树和 CSSOM 树，现在浏览器就把它们合并成一个渲染树

在渲染树的构建过程中，浏览器遍历 DOM 树，然后对应 CSSOM 树给每个节点设置计算样式（最终样式），设置了 display: none 的节点，将会在渲染树中移除

这样，渲染树就包含了页面上所有可见的内容和它们的计算样式

布局、绘制

渲染树只包含了内容和样式，要放到浏览器窗口中，还需要计算它们在窗口里的确切的位置和大小，这个过程叫做布局，也称为“自动重排”

浏览器从渲染树的根节点开始遍历，我们可以想象为有外向里的过程，先确定外层的位置大小，在向里层计算

布局流程的输出是一个“盒模型”，它会精确地捕获每个元素在视口内的确切位置和尺寸：所有相对测量值都转换为屏幕上的绝对像素

布局完成后，浏览器会立即发出“Paint Setup”和“Paint”事件，将渲染树中的每个节点转换成屏幕上的实际像素，这一步通常称为“绘制”或“栅格化”

重排和重绘

当 DOM 或 CSSOM 被修改时，会发生重排（Reflow），也就是把上面的步骤重新来一遍，这样才能确定哪些像素需要在屏幕上进行重新渲染，这个过程也被叫做回流

如果改变的属性与元素的位置大小无关，比如背景颜色，那么浏览器只会重新绘制那个元素，这个过程叫重绘（Repaint）

重排必然会引起重绘，重绘则不一定会重排

CSS、JS 阻塞

默认情况下，CSS 是阻塞渲染的资源，浏览器需要等 DOM 和 CSSDOM 都准备好之后才会渲染，注意，这里说的是阻塞渲染，而不是阻塞 DOM 的构建，事实上 DOM 和 CSSDOM 的构建是可以同时进行的

构建 CSSOM 会阻塞它后面 JavaScript 语句的执行，而 JavaScript 语句的执行又会阻止 CSSOM 的构建，原因很简单，因为 JavaScript 执行时可能会改变 CSSOM，同时进行会对性能产生影响

除非将 JavaScript 显式声明为异步，否则它会阻止构建 DOM，因为默认情况下，浏览器遇到