html标签顺序决定首屏渲染速度，关键在于浏览器解析时机：script需defer/async或置于body末尾，link[rel=stylesheet]必须在script前，img须带width/height且首屏禁用lazy，preload资源要置于head最前。
HTML标签顺序直接影响浏览器解析流和首屏渲染时机，调错位置比写慢JS更易引发白屏——关键不是“放哪儿”，而是“什么时候让浏览器看到它”。
为什么<script>放在<head>里会卡住整个页面</script>
浏览器解析HTML是流式自上而下进行的，遇到未加属性的<script src="app.js"></script>会立刻暂停DOM构建，等JS下载、执行完才继续。哪怕JS只有1KB，网络延迟或执行阻塞都会让首屏渲染推迟几百毫秒。
-
<script></script>必须出现在末尾，或加defer（推荐业务逻辑）/async（适合埋点、统计） - 绝对不要在
里写<script>console.log()</script>，除非是极小的CSP nonce注入逻辑 - 第三方SDK脚本若没提供
defer支持，优先用<iframe sandbox="allow-scripts"></iframe>沙箱化加载
link rel="stylesheet"为什么必须放在script前面
CSS是渲染阻塞资源，浏览器必须构建完CSSOM才能开始绘制第一帧。如果<link rel="stylesheet">出现在<script></script>之后，浏览器会先停在script上等JS执行，再回头下载CSS——等于双重阻塞。
- 所有
<link rel="stylesheet">应紧贴开头，早于任何<script></script> - 禁止在CSS文件中用
@import引入其他样式表，它强制串行加载，实测拖慢FCP 300ms+ - 关键CSS（如首屏按钮、标题样式）应内联进
<style></style>，控制在2–3KB以内
img loading="lazy"和width/height顺序不能颠倒
loading="lazy"本身不阻塞解析，但若没提前声明width和height，图片加载时会触发布局偏移（CLS），浏览器不得不重排重绘——这比加载慢更伤Core Web Vitals评分。
- 所有
<img>标签必须显式带width和height属性，哪怕只是占位值 - 首屏图片（如Hero图、登录框图标）要删掉
loading="lazy"，改用loading="eager"或直接不写 - 响应式图片用
srcset+sizes，避免手机加载桌面尺寸图；<picture></picture>包裹WebP/AVIF时，<source></source>必须在<img>前
preload资源必须出现在关键路径之前
<link rel="preload">不是“越早写越好”，它只对当前导航中「确定马上要用」的资源有效。写在HTML靠后位置，可能等浏览器解析到它时，关键资源请求早已发起。
- 字体、首屏关键CSS、Hero图的
<link rel="preload">必须放在最前面，紧挨<meta charset> - 不要对
main.js加preload——它已被defer覆盖，再预加载反而挤占带宽 - preload字体时
crossorigin属性必加，否则字体不会生效
真正卡顿的地方，往往不在你写的JavaScript里，而在HTML被浏览器读到第一行时，就已埋下的顺序陷阱——比如一个没加defer的统计脚本，或一张没设width/height的懒加载图，它们安静地躺在模板里，却让首屏多等800ms。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
