首屏白屏超1秒问题主因是关键渲染路径阻塞，需内联真正首屏必需样式（如header、hero、基础按钮等）、用media属性绕过cssom阻塞、非关键css异步加载、字体preload，并通过语义化html和规范class命名保障可维护性。
首屏白屏超1秒，问题大概率不在网络或后端，而是关键渲染路径被阻塞——HTML结构没理清、样式加载顺序没拆开。
为什么内联
浏览器遇到 <style></style> 标签时，会暂停 DOM 构建，等 CSSOM 完成才继续。哪怕它在 里，也一样阻塞。
- 必须显式加
media="screen and (min-width: 0px)"才能绕过阻塞逻辑（注意：不是media="all"，后者仍阻塞） -
@import、@font-face、@keyframes在内联<style></style>中依然触发额外请求，且无法被 preload 覆盖 - 内联整个
main.css会让 HTML 体积暴涨，在 3G 网络下反而比外链更慢
如何识别并提取真正“首屏必需”的样式？
不是“页面顶部可见区域”的样式，而是“参与首次绘制且无 JS 干预就能生效”的规则集合。
- 用 Chrome DevTools 的 Rendering > FPS Meter + Layers 面板确认哪些节点实际参与了首帧绘制
- 排除所有依赖 JS 初始化的组件样式（如轮播图指示器、折叠面板箭头）
- 只保留
header、hero、h1、基础按钮.btn、链接a的默认态，不包含 hover / focus - 工具推荐：
critters（Vite 插件）或criticalCLI，但需配合真实设备尺寸测试，别信模拟器
外部 CSS 文件怎么加载才不拖慢首屏？
关键不是“要不要外链”，而是“什么时候加载、以什么优先级加载”。
-
<link rel="stylesheet" href="main.css">默认是阻塞渲染的，必须配合media或onload回调降级 - 非关键 CSS 改用
<link rel="preload" as="style" href="non-critical.css" onload="this.rel='stylesheet'">，再加<noscript><link rel="stylesheet" href="non-critical.css"></noscript> - 字体文件必须
preload，且带crossorigin属性，否则 FOIT 时间不可控 - 构建时启用
css-minimizer-webpack-plugin或esbuild的 CSS 压缩，但别关掉splitChunks—— 抽离公共样式能提升缓存命中率
语义化结构如何影响样式分离效果？
HTML 不是容器堆叠游戏，它是样式可预测性的底层契约。
- 用
<header></header>替代<div class="header">，CSS 就能写 <code>header h1 { margin-top: 0; }，不用靠 class 决定语义 - 禁用
display: none包裹非首屏内容——它仍构建 DOM、计算 CSSOM；改用<template></template>或 JS 动态挂载 - 所有 class 名必须表达意图，而非位置或样式，比如
product-card__price可以，mt-20或red-text不行 - 变量统一定义在
variables.css，其他文件只用var(--space-md)，改一个值，全链路响应
真正难的不是把样式抽出去，而是在第 7 次换肤需求来临时，还能一眼看出哪个 class 控制着按钮圆角、哪个变量决定卡片阴影深度——这种可追溯性，全靠结构和样式之间那条清晰的边界线撑着。
