修改DOM元素padding引发的回流范围问题：是否触发全DOM回流？

首先看目标DOM结构：

<body>
  <div>
    <div class="wrapper">
      <div><span>hello world!</span></div>
    </div>
  </div>
</body>

当修改类名为wrapper的<div>元素的padding属性时，会触发reflow（重排）与repaint（重绘），针对你的疑问，具体分析如下：

• 疑问1：是否会触发整个DOM（包括所有子元素及祖先元素）的reflow与repaint？
  不会。浏览器会做最小化重排优化，只会重新计算受影响的元素布局，不会遍历并更新整个DOM树的布局。

• 疑问2：还是仅影响其子元素，不涉及祖先元素？
  不是。wrapper的padding变化会改变自身的几何尺寸（宽/高），如果它的父元素处于正常文档流中且没有设置固定宽高、overflow:hidden等布局限制，父元素的尺寸会被wrapper的新尺寸影响，进而触发父元素的reflow，这种影响会向上传递，直到遇到有布局隔离的祖先元素（比如设置了固定宽高、overflow:auto/hidden的容器，或是脱离文档流的绝对/固定定位元素）。

• 疑问3：或是会触发部分子元素与部分祖先元素的reflow？
  这是正确的情况：

  1. 首先会触发wrapper自身的reflow，因为它的几何属性发生了变化；
  2. 所有子元素会被触发reflow——子元素的布局依赖父元素的内边距，wrapper的padding变化会改变子元素的可用空间，因此子元素需要重新计算布局；
  3. 部分祖先元素会被触发reflow——只有那些在正常文档流中，尺寸会被wrapper的尺寸变化影响的祖先元素才会被波及，遇到有布局约束（比如固定宽高、脱离文档流）的祖先元素时，重排会停止。

另外，repaint的范围通常与reflow的范围一致，因为布局变化会导致元素外观改变，所有被reflow的元素都会触发repaint；如果变化元素与其他元素存在视觉重叠，现代浏览器也会智能处理重叠区域的repaint，避免不必要的重绘。

内容的提问来源于stack exchange，提问作者Johnexe