常见的问题场景
很多开发者会在DOM加载完成后通过JavaScript修改元素的隐藏状态，比如下面这样的写法：
// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
const targetEle = document.getElementById('hidden-box');
targetEle.style.display = 'none';
});这种写法在DOM内容较多、加载速度稍慢的页面中，会出现元素先显示一瞬间，再突然消失的闪烁问题，因为DOMContentLoaded事件触发时，页面已经完成了DOM树的构建，元素已经渲染到页面上了，此时再修改样式就会出现视觉上的跳动。
正确的实现思路
优先使用CSS定义初始状态
最稳定的方式是在CSS中先定义元素的初始隐藏状态，再用JavaScript控制后续的显示逻辑，避免页面渲染时的闪烁：
/* 初始隐藏目标元素 */
#hidden-box {
display: none;
}
/* 如果需要保留元素占位，可使用visibility */
#hidden-box-visibility {
visibility: hidden;
}之后再需要显示元素时，通过JavaScript修改对应的属性即可：
// 显示display隐藏的元素
function showDisplayBox() {
const box = document.getElementById('hidden-box');
box.style.display = 'block'; // 根据实际布局选择对应值，如flex、grid等
}
// 显示visibility隐藏的元素
function showVisibilityBox() {
const box = document.getElementById('hidden-box-visibility');
box.style.visibility = 'visible';
}必须使用JS控制初始状态的处理方式
如果因为业务逻辑必须要在JavaScript中定义初始隐藏状态，那么需要在元素渲染前就执行隐藏逻辑，此时可以使用内联脚本，放在元素的后面立即执行：
<div id="inline-hidden-box">需要初始隐藏的内容</div>
<script>
// 内联脚本，元素定义后立即执行，避免渲染后再修改
document.getElementById('inline-hidden-box').style.display = 'none';
</script>这种方式可以确保在浏览器渲染该元素之前就已经修改了样式，不会出现闪烁问题。
两种隐藏方式的差异对比
| 属性 | 隐藏效果 | 是否占位 | 是否触发重排 |
|---|---|---|---|
display: none | 元素完全不渲染 | 否 | 是 |
visibility: hidden | 元素不可见但保留占位 | 是 | 否 |
注意事项
- 不要依赖
window.onload事件控制初始隐藏，该事件需要等待所有资源（图片、样式表等）加载完成才触发，闪烁概率更高。 - 如果使用框架开发，要遵循框架的生命周期规则，比如在Vue的
created阶段设置初始状态，而不是mounted之后。 - 修改
display属性时要注意元素原本的布局类型，避免隐藏后再显示时出现布局错乱。
核心原则：初始隐藏状态的定义要尽量提前，能放到CSS处理的就不要放到JavaScript中处理，从源头避免渲染闪烁问题。
JavaScript元素隐藏display属性visibility属性初始状态修改时间：2026-05-25 10:08:02