做视频剪辑的时候，经常要往网页里嵌入预览效果，比如加个动态字幕或者背景动画。但有时候页面一刷新，内容突然闪一下才正常显示，看着特别别扭，客户看了都觉得不专业。
为啥会出现加载闪烁？
这种情况通常叫FOUC（Flash of Unstyled Content），说白了就是浏览器先显示了原始内容，等CSS或JS加载完才重新渲染。尤其在用Vue、React这类前端框架，或者引入了大量动效资源时更容易出现。
常见场景举个例子
你做了个炫酷的片头动画，用JavaScript控制元素淡入。可用户打开页面时，先看到所有元素堆在一起，1秒后才开始动画——这就是典型的加载闪烁。
几个实用的解决办法
最直接的是“先藏后显”。在页面加载完成前，把那些会动的元素设成不可见，等脚本执行完再展示。比如给body加个loading状态：
<body class="is-loading">
<script>
window.addEventListener('load', function() {
document.body.classList.remove('is-loading');
});
</script>
</body>配合CSS这样写：
.is-loading .animated-element {
opacity: 0;
visibility: hidden;
}
.animated-element {
transition: opacity 0.3s ease;
opacity: 1;
visibility: visible;
}
还有一种情况是用了Web字体。比如你选了个特殊中文字体做标题，本地没缓存时，浏览器先用默认字体显示，等字体下载完再替换，这就造成闪烁。解决方法是用font-display: swap;控制加载行为，或者提前用preload提示浏览器优先加载：
<link rel="preload" href="custom-font.woff2" as="font" type="font/woff2" crossorigin>视频类页面特别注意
如果你在网页里嵌了自定义播放器，尤其是带封面、进度条、弹幕的复杂界面，建议在JS初始化完成前，把交互层全 hide 起来。可以先只留一个静态图，等脚本跑完再激活控件，避免按钮乱跳、时间错位这些尴尬场面。
另外，资源加载顺序也很关键。CSS尽量放head里，JS文件如果不是必须，就放在body底部，避免阻塞渲染。现在主流做法是用async或defer属性异步加载脚本，减少对页面主流程的影响。
实际调试时，可以用Chrome的“Disable cache”功能模拟首次访问，看看有没有闪屏问题。发现问题后逐段注释代码，定位到底是哪部分引起的，再针对性处理。