网站加载瞬间CSS半失效闪烁，是正常加载还是CSS/JS存在故障？

你遇到的这个现象是典型的无样式内容闪烁（FOUC，Flash of Unstyled Content），不属于正常加载过程，可通过前端优化解决，常见原因和解决方案如下：

• CSS放置位置或加载方式不合理
  如果你把核心CSS放在了页面body底部，或是通过JS动态注入加载CSS，浏览器会先解析渲染纯HTML内容，等CSS加载、解析完成后才会重绘页面，就会出现1秒左右的无样式间隙。
  解决方案：把所有页面核心样式对应的CSS文件通过<link>标签放在<head>标签内同步加载。
• CSS资源加载效率过低
  未压缩的CSS体积过大、服务器未开启gzip/brotli压缩、CSS资源响应速度慢都会拉长加载耗时，导致渲染等待。
  解决方案：清理CSS中未使用的冗余样式，对CSS文件进行压缩，配置服务器开启静态资源压缩规则。
• 资源加载顺序错误
  如果<head>标签内同步执行的JS脚本放在了CSS链接的前面，JS执行会阻塞后续CSS的加载解析，也会触发该问题。如果使用了@import规则引入CSS，也会因为@import的串行加载逻辑拉长CSS总加载时长。
  解决方案：把非关键的JS脚本挪到</body>标签之前引入，或是给JS加上async/defer属性避免阻塞渲染；替换所有@import引入为<link>标签直接引入。

你可以通过浏览器开发者工具的网络面板，禁用缓存后刷新页面查看CSS资源的加载时序，确认是否存在CSS加载晚于DOM首次渲染的情况，就能定位具体原因。

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