内联关键CSS可解决页面闪烁问题，关键CSS为首屏必需的最小样式集，通过手动或工具提取后放入<style>标签，并异步加载剩余样式以提升首屏渲染性能。
页面引入外部CSS时出现闪烁，通常是因为浏览器在加载和解析外链样式文件期间，先渲染了无样式的HTML内容，等CSS下载完成后再重新绘制，导致视觉上的“闪烁”或“FOUC”（Flash of Unstyled Content）。解决这个问题的核心思路是：确保关键样式尽早可用。其中，将关键CSS内联到页面的 <style> 标签中是一种高效且广泛使用的方法。
什么是关键CSS（Critical CSS）？
关键CSS是指页面首次渲染时必须用到的最小样式集合。它通常包括首屏可见区域（above-the-fold）元素的样式，比如头部导航、标题、按钮等。非关键的CSS（如页脚、隐藏模块的样式）可以延迟加载。
通过只内联这部分关键样式，可以让浏览器无需等待外部文件即可正确渲染首屏内容，显著减少甚至消除闪烁。
如何提取并内联关键CSS
将关键CSS内联到HTML的 <head> 中，能确保样式在DOM构建时立即生效。
立即学习“前端免费学习笔记（深入）”；
- 手动提取：分析首屏元素，复制对应的CSS规则，放入
<style>标签 - 使用工具自动提取：如 Penthouse、Critical（Webpack插件）、critters 等，可自动化生成关键CSS并注入HTML
- 构建流程集成：在打包过程中自动生成关键CSS并内联，其余样式仍通过
<link rel="stylesheet">异步加载
配合异步加载非关键CSS
内联关键CSS后，剩余的完整样式表应异步加载，避免阻塞渲染。
例如，使用 rel="preload" 加载主样式，并通过JavaScript动态插入：
<noscript><link rel="stylesheet" href="styles.css"></noscript>
这样既保证了首屏快速渲染，又不会影响整体样式的最终加载。
其他辅助优化建议
- 尽量减少关键CSS体积，避免内联过多样式拖慢HTML传输
- 启用Gzip或Brotli压缩，减小HTML和CSS文件大小
- 利用浏览器缓存，对异步CSS设置长期缓存策略
- 避免在CSS中使用 @import，它会延迟样式解析
基本上就这些。通过内联关键CSS + 异步加载其余样式的方式，能有效解决外链CSS引起的页面闪烁问题，提升用户第一眼的体验。方法不复杂，但容易忽略细节。
