Flex Grid渲染差异：为何示例1滚动流畅度优于示例2？

核心差异根源：容器高度的计算逻辑 #

• 示例1的height: 90vh是固定视口比例高度，浏览器能直接基于当前视口尺寸计算出容器的精确像素高度，容器尺寸全程固定，不会随内容变化而改变。
• 示例2的height: 100%是依赖父元素的百分比高度，若父元素未设置明确高度，浏览器会动态根据容器内的内容高度计算容器尺寸，导致容器高度始终处于不确定状态。

滚动时的性能差异细节 #

1. 布局重排的触发频率不同

   • 示例1中容器高度固定，滚动仅涉及内容区域的位置更新，浏览器无需重新计算容器高度和整体Flex布局，重排（reflow）范围极小，滚动操作可快速完成。
   • 示例2中容器高度随内容动态变化，滚动时浏览器需要持续重新计算容器的实际高度，同时触发整个Flex Grid的布局重排——包括每行元素的位置、尺寸重新计算，频繁的重渲染直接导致滚动卡顿、空白条（重排延迟引发的内容渲染不及时）。

2. 浏览器滚动优化的适配差异

   • 固定高度的容器（90vh），浏览器可提前确定滚动区域边界，启用滚动合成优化（如GPU加速的合成层滚动），直接在合成层处理滚动操作，无需占用主线程做布局计算，滚动流畅度高。
   • 高度依赖内容的容器（100%），浏览器无法提前锁定滚动边界，无法完全启用滚动合成优化，每次滚动都需要主线程参与布局计算，性能开销大幅提升。

3. Flex Grid布局计算的负载差异

   • 容器高度动态变化时，Flex Grid需重复计算每一行的布局细节（行高、元素对齐方式等），当表格行数较多时，这种计算的性能开销会被放大，进一步加剧滚动延迟。
   • 固定高度容器下，Flex Grid的布局仅在初始化时计算一次，滚动过程中无需重新计算行布局，性能负载极低。

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