首屏白屏时间长主因是html解析被阻塞，而非语义化不足；关键在于避免未加defer/async的script、未设media的link阻塞解析，精简嵌套结构，内联≤1kb首屏css，并用template减少动态解析开销。
为什么首屏白屏时间长，跟HTML结构直接相关
不是HTML写得不够“语义化”，而是浏览器解析到关键内容前，被卡在了不该停的地方。DOM构建是流式、自上而下的，一旦遇到未加defer或async的<script></script>，或者没设media的<link rel="stylesheet">，解析就暂停——首屏按钮如果埋在第6层div里，它就得等前面所有阻塞资源处理完才能被构建出来。
常见错误现象包括：FCP > 3s但DOMContentLoaded早已触发、LCP元素迟迟不出现、移动端3G下首屏超过5秒。
-
<main></main>、<article></article>这类承载首屏内容的标签，必须紧贴开头，别被导航栏、广告位、统计脚本挡在后面 - 删掉所有
display: none却仍留在DOM里的节点——它们不渲染，但吃内存、拖慢解析，尤其在搜索页/列表页易堆积 - 避免
<table>布局：表格需整行解析完才开始渲染，比<code>flex或grid多一次强制重排 - 深层嵌套（如
div > section > article > header > h1）本身不慢，但会让首屏内容物理位置靠后，延长首次绘制时机 - 用
critters或purgecss + html-webpack-plugin自动提取，别手写——人工容易漏或贪多 - 内联后务必验证：打开DevTools → Network → 看
index.html响应体大小是否明显增加，且Parse HTML阶段不再被Recalculate Style挂起 - 服务端无法缓存内联样式，每次HTML更新都得重传全部，不适合频繁发版的项目
- 打印样式用
<link rel="stylesheet" href="print.css" media="print">，浏览器直接跳过下载 - 暗色模式后备样式用
media="(prefers-color-scheme: dark)"，仅匹配时拉取 - 非首屏CSS用
<link rel="preload" as="style" href="non-critical.css">提前拉取，再用JS动态插入<link>，避免阻塞 - 禁用
@import：它串行加载、打断并行，等价于把多个CSS请求压成单队列 - 必须用
document.importNode(template.content, true)克隆，否则原template会被移走，下次调用就空了 - 克隆后需手动绑定事件——
template不保留JS行为 - 服务端返回的HTML片段必须是纯结构（无
/），否则response.text()后直接插入会破坏DOM - IE完全不支持，需fallback到
<script type="text/template"></script>+ 正则提取
内联CSS不能超1KB，否则得不偿失
内联<style></style>确实能绕过网络请求，让CSSOM和DOM并行构建，但体积失控反而拖慢首字节到达（TTFB）和初始HTML解析。1KB是经验阈值：再小，覆盖不了首屏基础样式；再大，在弱网下传输延迟会盖过收益。
真正要内联的，只是首屏必需的尺寸、颜色、字体大小等基础声明，比如.logo、.hero-title、.primary-btn的padding和background-color；动画、主题色、响应式断点全扔外部文件。
非首屏资源必须用media或rel="preload"隔离
<link rel="stylesheet">默认按media="all"处理，浏览器视其为关键资源，哪怕它只定义暗色模式或打印样式。不加media属性，等于主动把非关键CSS拖进关键渲染路径。
同理，字体、图标、弹窗模块这些非首屏依赖项，不能靠JS动态插入来“延迟”——它们早就在HTML里，只是没被用到而已。真正有效的是从加载源头切断依赖。
<template></template>不是语法糖，是减少重复解析的硬手段
用innerHTML = htmlStr插入动态内容，每次都要重新解析HTML字符串、构建DOM、触发布局计算；而<template></template>内容是惰性DocumentFragment，不执行脚本、不加载资源、不参与渲染树，克隆后插入几乎零解析开销。
但它有明确使用边界：不能直接appendChild(template)，不能指望里面<script></script>自动执行，也不能用querySelector直接查template.content里的节点。
link挪到了body底部，或者以为async就能解决一切JS阻塞——其实它不保序，SSR场景下可能执行时DOM还没就绪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
