html关键内容应紧贴body开头，script需defer/async，首屏css内联，图片加fetchpriority="high"，html缓存头设为no-cache。
关键内容必须写在HTML靠前位置
浏览器解析HTML是流式、自上而下的，DOM构建从开始逐节点进行。一旦遇到未声明defer或async的<script></script>，或未加media隔离的<link rel="stylesheet">，就会暂停解析——首屏内容被卡在后面，白屏时间就来了。
常见错误现象包括：LCP指标差、移动端3G下首屏超3秒、用户点击按钮无响应（因为JS还没执行完）。
-
<main></main>、<article></article>、首屏标题和主图的<img>标签，应尽量紧贴开头，不要被导航栏、广告位、统计脚本包围 - 避免把
<script src="vendor.js"></script>写在顶部；更不要在里内联几百行JS - 删掉所有
display: none但仍在DOM里的冗余节点——它们不参与渲染树，却占用解析时间和内存，尤其在列表页易堆积
script标签必须带defer或async，除非是极小内联逻辑
默认情况下，浏览器遇到<script></script>会立即暂停HTML解析，下载并执行脚本后才继续。这个“停顿”就是首屏延迟的直接原因。
不是所有脚本都适合async：它下载不阻塞，但执行时机不可控，可能早于DOM构建完成，导致document.getElementById返回null。
- 外部脚本优先用
defer：按文档顺序下载+执行，保证DOM已解析完毕，适合业务逻辑、路由初始化等 -
async只用于完全独立的脚本，比如埋点SDK、客服浮窗，且必须确保不依赖任何DOM节点 - 内联小逻辑（如设置
data-theme）可保留在，但体积务必控制在1KB以内，且不能调用querySelector之类API
CSS必须区分关键与非关键，且加载方式严格对应
CSSOM构建必须等关键CSS下载并解析完成才能生成渲染树，所以“CSS文件体积大+没内联+没预加载”=首屏卡死。选择器复杂度本身不影响性能，但加载时机错配会直接拖垮LCP。
注意：@import会阻塞并串行下载，等价于把多个HTTP请求压成一个长队列，绝对禁用。
- 首屏所需CSS（通常≤14KB）应内联在
中，用<style></style>包裹，避免额外RTT - 非关键CSS（如打印样式、暗色模式后备）必须加
media属性，例如<link rel="stylesheet" href="print.css" media="print"> - 非首屏组件CSS可用
<link rel="preload" as="style" href="card.css">提前拉取，再通过JS动态插入<link>
图片和iframe必须显式控制加载优先级与时机
默认情况下，所有<img>都被标记为low优先级，哪怕它是LCP候选元素；<iframe></iframe>则默认同步加载，极易阻塞主线程。
别依赖“浏览器自己会优化”——它不会主动识别哪张图是首屏核心，也不会判断iframe是否真的需要立即渲染。
- 首屏关键图必须加
fetchpriority="high"且loading="eager"（lazy会延迟到滚动才触发） - 大于100KB的图片建议加
decoding="async"，把解码任务移出主线程；SVG或小图标保持默认即可 -
<iframe></iframe>一律用loading="lazy"，或更彻底地——初始不渲染，滚动到视口时再动态appendChild
Cache-Control头对HTML本身的配置。很多人给index.html设了max-age=31536000，结果CDN缓存了旧HTML，用户刷新也看不到新按钮。它必须是no-cache或max-age=0, must-revalidate，且CDN后台要设为“遵循源站响应头”，否则一切优化都白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
