通过 CSS 隐藏目标元素（如 display: none），再利用 window.addEventListener('load') 在资源加载完毕后更新内容并显示，可避免用户看到原始内容闪烁，实现平滑的内容初始化。
通过 css 隐藏目标元素（如 `display: none`），再利用 `window.addeventlistener('load')` 在资源加载完毕后更新内容并显示，可避免用户看到原始内容闪烁，实现平滑的内容初始化。
在 Web 开发中，若需动态修改 DOM 节点内容，但又不希望用户在页面加载过程中看到原始文本（例如“loading...”）被突兀替换，关键在于控制可见性时机，而非单纯依赖执行顺序。window.onload 确实会等待所有资源（图片、样式表、脚本等）加载完成，此时操作 DOM 是安全的，但若元素默认可见，替换过程仍会产生视觉闪动。
推荐做法是：初始隐藏目标元素 → 页面完全加载后更新内容 → 再显式展示。这既保证了 DOM 操作的安全性，又消除了内容跳变。
✅ 正确实现示例：
<!DOCTYPE html>
<html>
<head>
<style>
#myitem {
border: 1px solid #333;
width: 120px;
height: 40px;
display: none; /* 初始隐藏，防止闪现 */
background-color: #f0f9ff;
text-align: center;
line-height: 40px;
font-family: -apple-system, sans-serif;
}
</style>
</head>
<body>
<div id="myitem">loading...</div>
<script>
window.addEventListener('load', () => {
const item = document.getElementById('myitem');
if (item) {
item.textContent = 'Ready!'; // 推荐使用 textContent 替代 innerText（更安全、性能更好）
item.style.backgroundColor = '#4CAF50';
item.style.color = 'white';
item.style.display = 'block'; // 最后一步才显示
}
});
</script>
</body>
</html>⚠️ 注意事项：
- 不要使用 document.write() 或过早操作未解析的节点（如放在 <head> 中执行 getElementById），否则可能返回 null；
- 若只需等待 DOM 解析完成（不等待图片等资源），可用 DOMContentLoaded 事件替代 load，响应更快；
- 对于现代应用，建议结合 async/await 与 fetch() 加载数据后更新，确保内容真实就绪；
- innerText 会触发重排（reparse），而 textContent 仅操作文本节点，性能更优且无兼容性风险。
总结：真正的“加载中不可见”并非靠 JS 执行速度，而是靠 CSS 的初始隐藏 + 合理的时机控制。这是兼顾用户体验与代码健壮性的标准实践。
