向现有DOM插入元素会触发哪些渲染流程？影响范围如何？

插入节点时浏览器完成的核心计算工作 #

• DOM结构校验与挂载：首先校验插入节点的合法性，比如禁止跨文档插入节点、自动修正不符合嵌套规则的结构（比如直接往<table>下插入<div>会被自动包进<tbody>或调整位置），之后更新DOM树中关联节点的父子、兄弟引用关系，把新节点（及其携带的子节点）挂到DOM树的对应位置。
• 样式规则计算：遍历所有生效的CSS规则（浏览器默认样式、页面作者样式、行内样式），匹配所有命中新节点及其子节点的选择器，结合祖先节点的可继承样式属性，计算出每个节点所有CSS属性的最终生效值，也就是开发者工具Computed面板展示的计算后样式。
• 渲染对象生成：为每个需要参与渲染的可见节点生成对应类型的渲染对象，标记节点的渲染特性（块级、行内、替换元素、表单控件等）；不可见节点（比如<head>内的元信息标签、设置了display: none的节点）不会生成渲染对象。

会触发的渲染流程环节 #

插入节点不会固定走完全部渲染流程，具体触发环节和节点本身的特性直接相关：

• Render Tree（渲染树）更新：只要插入的节点包含可见内容，这一步必然触发。浏览器会把新生成的渲染对象插入到渲染树的对应位置，渲染树仅保留需要参与显示的节点结构，和DOM树不是一一映射关系。如果插入的是不可见节点，不会触发这一步。
• Layout（布局/重排）：当插入的节点会占据正常文档流空间、或者影响其他节点的几何属性（位置、宽高、边距）时触发。浏览器会计算所有受影响节点在视口中的精确坐标、尺寸、排版规则等几何信息。如果插入的节点不占据文档流空间（比如display: none的节点、完全脱离文档流且不挤压其他元素位置的悬浮节点），不会触发这一步。
• Paint（绘制/重绘）：布局计算完成后触发，浏览器会将需要更新的区域转换成像素绘制指令，把节点的背景、边框、文字、阴影等所有视觉属性绘制到对应的图层上。
• Composite（合成）：如果插入的节点触发了独立合成层生成（比如带有3D变换属性、设置了will-change: transform、opacity值小于1），这一步会把所有图层按正确的层级顺序合并，最终输出到屏幕完成显示。

渲染流程的影响范围 #

现代浏览器普遍实现了成熟的增量渲染优化，不会因为单次DOM插入就重算整个文档，影响范围完全由新节点的影响边界决定：

• 绝大多数场景下仅做局部更新：
  • 如果插入的节点脱离正常文档流（比如position: fixed/absolute定位的悬浮元素、位于独立合成层内的节点），布局计算只会覆盖节点自身和它的子节点，绘制范围也仅限定在节点覆盖的屏幕区域，完全不会影响其他文档内容。
  • 如果插入的节点在正常文档流内，浏览器只会标记受影响的“脏区”：通常包含新节点本身、它的后续流内兄弟节点、以及需要根据子节点内容自适应尺寸的祖先节点，不会遍历整个文档树做全量重算。比如在1000条长度的长列表末尾插入1条新列表项，浏览器只会计算这1条新项的布局，以及列表容器可能的高度变化，前面999条已存在的列表项完全不会进入重算流程。
• 只有极少数场景会触发接近全文档范围的重算：比如在页面根节点的最顶部插入一个宽度100%的块级元素，且页面大量元素使用了依赖视口/根节点尺寸的单位（vw/vh、绑定根字号的rem），这时候受影响的节点范围才会覆盖大部分文档区域。

注意：网上不少早期前端文章提到“修改DOM就会触发全页面重排”是已经过时的错误结论，当前主流浏览器的布局、绘制优化已经非常成熟，只会重算实际被改动影响的节点区域。

内容的提问来源于stack exchange，提问作者rohit.bels