问题描述 #

在中低端移动设备的浏览器中打开像Stack Overflow这类包含大量DOM元素的网站时，旋转设备方向会短暂出现明显的白色区域。

重现步骤：

• 打开Chrome浏览器，访问Stack Overflow
• 按下F12打开开发者工具，再按Ctrl+Shift+M调出设备工具栏
• 选择一款中端移动设备，将网络状态设置为「中端移动设备」
• 点击旋转按钮即可观察到该现象

问题根源 #

这种现象本质是设备性能不足以快速处理方向切换时的页面重排与重绘：

• Stack Overflow这类网站DOM节点数量极多，旋转屏幕时浏览器需要重新计算整个页面的布局（重排），再重新绘制所有可见元素（重绘），中低端设备的CPU/GPU算力有限，无法在瞬间完成这些操作，就会出现短暂的空白。
• 部分移动浏览器的方向切换逻辑是先清空当前视图再重新渲染，这个过程的间隙就会露出白色背景。

可行的优化方案 #

如果你是网站开发者，可以从这些方向优化：

• 精简DOM结构：移除页面中不必要的隐藏元素、合并嵌套过深的节点，减少重排时需要计算的元素数量。
• 提前告知浏览器优化：给页面中核心的、会随方向变化的元素添加will-change: transform属性，让浏览器提前为这些元素的变换做好渲染优化准备。
• 触发硬件加速：使用transform: translateZ(0)或transform: translate3d(0, 0, 0)将页面核心内容交给GPU渲染，减轻CPU的计算压力，不过注意不要滥用，避免GPU内存占用过高。
• 避免同步布局读写：在JavaScript中操作DOM时，不要在读取offsetWidth、scrollTop这类布局属性后立刻修改元素样式，这会强制浏览器触发同步重排，增加性能开销。
• 预先适配媒体查询：针对横屏/竖屏分别写好对应的CSS样式，让浏览器旋转时能快速匹配样式规则，减少计算时间。

如果只是普通用户，暂时没有太好的解决办法，只能等待设备厂商或浏览器优化，或者尽量在旋转时稍作等待~

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