首屏白屏超1秒主因是HTML解析阻塞和关键资源加载顺序不当；应内联首屏CSS、用defer加载JS、精准preload关键资源，并禁用@import和document.write。
首屏白屏超1秒，八成不是后端慢，而是 HTML 结构和样式加载顺序没理清——关键渲染路径被阻塞了。
为什么内联关键 CSS 比 link 加载更有效
浏览器解析到 <link rel="stylesheet"> 时会暂停 DOM 构建，直到 CSSOM 完成；而内联 <style> 虽然增加 HTML 体积，但能立即参与渲染树构建，避免首次绘制延迟。
- 只内联首屏必需的样式（如
header、.hero、按钮基础态），通常占原始 CSS 体积的 10%–30% - 内联内容建议控制在 ~14KB（gzip 后约 4–8KB），否则可能跨 TCP 包影响 TTFB
- 禁止在
<style>中使用@import或@font-face，它们仍会触发额外请求并阻塞 - 若用 CSS-in-JS（如 Emotion），确认 SSR 时已将关键样式序列化进
<style data-emotion>并注入首屏 HTML
如何识别并分离“非首屏”HTML 结构
所谓“非首屏”，是指用户滚动前不可见、且不参与初始布局计算的内容。强行渲染它们会延长 DOM 构建时间、增加内存占用，并可能触发无谓重排。
- 用 Chrome DevTools 的 Rendering > FPS Meter 和 Layers 面板观察首屏区域是否包含大量隐藏/折叠节点
- 把轮播图下方的推荐列表、评论区、侧边栏等，改用
<template>或纯 JS 动态插入（innerHTML或document.createElement） - 对 tab 切换类内容，初始只保留激活 tab 的 HTML，其余用
data-html属性暂存字符串，切换时再解析挂载 - 慎用
display: none包裹非首屏区块——它仍会参与 CSSOM 计算和 DOM 构建，只是不绘制；真正要的是“不创建”
preload + onload 异步加载非关键 CSS 的正确写法
<link rel="preload"> 不是越多越好，滥用会抢占带宽、挤掉真正关键的资源。它只提前下载，不改变应用时机，必须配对真实 rel="stylesheet" 才生效。
立即学习“前端免费学习笔记（深入）”；
- 必须同时满足三要素：
rel="preload"+as="style"+onload回调切换rel - 两个
href字符串必须完全一致（大小写、路径都不能差） -
onload里要立即设this.onload = null，防止重复执行 - 加
<noscript><link rel="stylesheet" href="..."></noscript>给禁用 JS 的用户兜底 - 错误示例：
<link rel="preload" href="main.css">—— 缺少as="style"，浏览器按普通 fetch 处理，根本不会提升优先级
HTML 结构精简中最容易被忽略的细节
语义化标签和压缩本身不难，但以下几点常被跳过，却直接影响解析效率与内存占用：
- 删除所有开发期遗留的
<!-- test -->、空<div></div>、冗余嵌套（比如<div><div><div><p>） - 用
<main>、<section>替代无意义<div class="wrapper">，浏览器能跳过部分样式匹配逻辑 - 禁用
defer的脚本若操作 DOM，必须确保document.body已存在；现代项目中优先用type="module"，它天然具有defer行为 - 本地大型 HTML 页面（如离线报表）中，外部 CSS 的 I/O 开销可能高达数秒；此时内联虽牺牲可维护性，却是唯一可行解
