如何在Laravel应用中消除无样式内容闪烁(FOUC)问题

问题原因排查与解决方案 #

你之前的方案失效原因 #

• 第二种方案没有给body设置初始的display: none，所以修改display属性的逻辑完全不生效
• 第一种方案监听的readyState === 'complete'需要等待页面所有资源（图片、字体等）全部加载完成才会触发，且如果你的脚本放置位置晚于CSS引入，会出现隐藏逻辑还没执行页面已经开始渲染的问题

解决步骤 #

1. 调整资源引入位置
   Laravel默认使用Vite打包前端资源，请确保@vite(['resources/css/app.css', 'resources/js/app.js'])指令放在<head>标签内，不要放在<body>底部。如果是使用原生link标签引入CSS，也需要将所有核心样式的link标签全部放在head中，浏览器加载head内的CSS时会阻塞后续DOM渲染，等样式加载完成后再渲染内容，从根源避免闪烁。
2. 使用更可靠的防闪烁逻辑
   将以下代码直接放在<head>标签的最顶部，优先级高于其他所有资源引入：

<style>
body {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.1s ease;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.body.style.visibility = 'visible';
    document.body.style.opacity = '1';
});
</script>

3. 排查异步加载逻辑
   检查是否有核心页面样式是通过JS动态插入、或者设置了异步加载CSS的逻辑，核心样式不要使用异步加载，全部打包到主CSS文件中同步加载即可。

疑问解答 #

• 其他站点没有该问题的核心逻辑是：所有核心样式都放在head内同步加载，浏览器会等待样式加载完成再渲染内容，不会出现先渲染无样式内容再加载样式的情况。
• 本地环境仍出现闪烁的原因是资源引入顺序错误，CSS引入晚于DOM内容，哪怕本地加载速度极快，浏览器解析顺序依然是先渲染DOM内容，再应用后面加载的样式，所以会出现短时间闪烁。

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