如何在HTML加载完成但页面绘制前捕获事件或修改DOM避免视觉闪烁？

你的问题很典型——DOMContentLoaded虽然能在DOM加载完成后触发，但此时浏览器往往已经开始准备绘制页面了，所以修改样式会导致短暂的原样式显示，也就是所谓的"闪烁"。下面给你几个可靠的解决方案：

方案1：将脚本直接放在目标元素之后（最优解） #

HTML是自上而下解析执行的，当脚本紧跟在目标DOM元素后面时，浏览器解析到脚本时，前面的元素已经被添加到DOM树中了，这时候修改样式不会触发重绘，因为浏览器还没开始整个页面的绘制流程。

修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { width: 200px; height: 200px; border: solid; }
</style>
</head>
<body>
<div id="container"></div>
<script>
// 无需等待任何事件，直接执行
document.getElementById("container").style.height = "0";
</script>
</body>
</html>

这个方法是最直接且兼容性最好的，完全能避免闪烁问题。

方案2：用CSS预隐藏元素，修改后再显示 #

如果你的脚本必须放在其他位置（比如底部统一管理），可以先通过CSS将元素设置为不可见，修改样式后再恢复可见性。这样用户不会看到原始样式的瞬间：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { 
  width: 200px; 
  height: 200px; 
  border: solid; 
  visibility: hidden; /* 初始隐藏，元素仍占空间 */
  /* 或者用 opacity: 0; 效果类似，适合需要过渡动画的场景 */
}
</style>
</head>
<body>
<div id="container"></div>
<script>
window.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById("container");
  container.style.height = "0";
  container.style.visibility = "visible"; // 修改完成后显示
});
</script>
</body>
</html>

注意：visibility: hidden和opacity: 0的区别是前者不会触发重排，后者会，但都能达到隐藏初始样式的效果，根据你的需求选择。

方案3：用requestAnimationFrame在绘制前执行修改 #

如果一定要依赖DOMContentLoaded事件，可以在事件回调中使用requestAnimationFrame，它会确保代码在浏览器下一次绘制前执行，能最大程度减少闪烁：

window.addEventListener("DOMContentLoaded", () => {
  requestAnimationFrame(() => {
    document.getElementById("container").style.height = "0";
  });
});

不过这个方案的效果不如前两种，因为DOMContentLoaded触发时可能已经接近绘制阶段了，但比直接在事件回调中修改要好。

原理补充 #

浏览器的渲染流程大致是：

1. 解析HTML构建DOM树
2. 解析CSS构建CSSOM树
3. 合并DOM和CSSOM生成渲染树
4. 布局（计算元素位置和大小）
5. 绘制（将像素渲染到屏幕）

DOMContentLoaded是在步骤1完成后触发，但此时步骤2-4可能已经开始，甚至部分内容已经绘制到屏幕上了，这时候修改样式会触发重新布局和绘制，导致用户看到闪烁。而方案1的脚本执行时机是在步骤1中（元素刚被解析完），此时渲染树还没生成，修改样式会直接融入后续的渲染流程，不会有闪烁。

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