Laravel项目首次访问页面CSS未加载、预加载器失效问题

• 首屏无样式闪烁、预加载器不生效本质是关键渲染路径阻塞、预加载器依赖资源未优先加载，当前模板代码存在4个直接导致问题的写法问题：
  1. 预加载器DOM放在body起始位置，但它的显示样式完全依赖外部CSS文件加载，外部CSS请求、解析的1-2秒空窗期内，浏览器会先渲染无样式的原始DOM，预加载器拿不到对应样式自然无法显示
  2. 错误将非CSS资源（flaticon的.svg、.ttf字体文件）用<link rel="stylesheet">方式引入，浏览器会将这类资源识别为无效样式表，阻塞渲染队列，拖慢正常CSS的解析速度
  3. 重复引入两个版本的FontAwesome图标库（本地5.0.6版本+第三方JS引入的版本），多余的请求会占用首屏加载带宽，拉长资源加载等待时间
  4. 未给预加载器配置首屏内联关键样式，浏览器无法在外部CSS加载完成前立刻渲染全屏预加载层遮盖原始内容

1. 清理无效/重复资源引入 #

删除head中两行错误的非CSS资源引入：

<!-- 以下两行直接删除，字体文件不能用stylesheet方式引入 -->
<link rel="stylesheet" href="{{ asset('theme/icon-fonts/flaticon/flaticon.svg')}}"/>
<link rel="stylesheet" href="{{ asset('theme/icon-fonts/flaticon/flaticon.ttf')}}"/>

二选一保留FontAwesome资源：要么保留本地引入的fontawesome-all.min.css、删除第三方kit的script标签；要么删除本地FontAwesome样式引入、保留kit脚本，避免重复请求。

2. 注入预加载器内联关键样式 #

在head标签内、所有外部资源引入之前，加入一段最小化的内联样式，无需等待外部CSS加载即可立刻渲染预加载层：

<style>
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#preloader {
  position: fixed;
  z-index: 99999;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease;
}
#preloader .left-side,
#preloader .right-side {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #fff;
}
#preloader .left-side { left: 0; }
#preloader .right-side { right: 0; }
#preloader .loading-area {
  position: relative;
  z-index: 2;
  text-align: center;
}
</style>

内联样式只保留预加载器生效必需的属性即可，不要把整份主题CSS全量内联，控制在10KB以内不会阻塞HTML解析。

3. 调整CSS资源加载优先级 #

给关键CSS增加预加载提示，非关键CSS延迟加载，缩短首屏渲染等待时间：

<!-- 关键主题样式优先预加载 -->
<link rel="preload" as="style" href="{{ asset('theme/css/style.css')}}" onload="this.rel='stylesheet'">
<link rel="preload" as="style" href="{{ asset('theme/css/responsive.css')}}" onload="this.rel='stylesheet'">
<!-- 动画类非关键样式延迟加载，不阻塞首屏 -->
<link rel="stylesheet" href="{{ asset('theme/css/animate.css')}}" media="print" onload="this.media='all'">
<!-- 其余字体、图标样式正常引入即可 -->
<link rel="shortcut icon" href="{{ asset('theme/img/favico.png')}}">
<link rel="stylesheet" href="{{ asset('theme/icon-fonts/fontawesome-5.0.6/css/fontawesome-all.min.css')}}">
<link rel="stylesheet" href="{{ asset('theme/icon-fonts/flaticon/flaticon.css')}}">
<link rel="stylesheet" href="{{ asset('theme/font/stylesheet.css')}}">

4. 补全预加载器关闭逻辑 #

确认现有主题JS中包含页面加载完成后隐藏预加载器的逻辑，如果没有，就在</body>标签前加入以下代码：

<script>
window.addEventListener('load', () => {
  const preloader = document.querySelector('#preloader');
  if (!preloader) return;
  preloader.style.opacity = '0';
  document.body.style.overflow = 'auto';
  setTimeout(() => preloader.remove(), 600);
});
</script>

修改完成后按Ctrl+F5强制清空缓存刷新页面，首屏会立刻显示预加载界面，不会再出现1-2秒的无样式内容闪烁，等核心资源加载完成后预加载器自动淡出，显示正常页面内容。

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