html页面加载快慢取决于资源加载优先级与顺序：script需用defer/async避免阻塞，样式表必须置于head开头早于js，首屏图片禁用lazy并声明尺寸，preload关键资源须紧贴charset放置。
HTML 页面加载快不快，关键不在代码多炫，而在浏览器“看到什么、什么时候看到”。标签顺序不是排版习惯，而是告诉浏览器资源的优先级和依赖关系——放错位置，首屏可能白屏几百毫秒。
script 标签：别让 JS 卡住整个页面
浏览器解析 HTML 是从上到下流式进行的。遇到没加属性的 <script src="app.js"></script>，会立刻暂停 DOM 构建，等 JS 下载、执行完才继续。哪怕只有 1KB，网络延迟或执行卡顿也会拖慢首屏。
- 业务逻辑类脚本（如路由初始化、首屏渲染）用 defer，放在
里也安全；它并行下载，等 DOM 解析完再按顺序执行 - 完全独立的脚本（如统计、埋点）用 async；下载不阻塞，但执行时机不可控，不保证顺序
- 绝对不要在
里写无属性的外链 script，也别写大段内联 JS（如 console.log 以外的初始化逻辑） - 第三方 SDK 若不支持 defer，优先考虑沙箱化：
<iframe sandbox="allow-scripts" src="sdk.html"></iframe>
link rel="stylesheet"：样式必须抢在 JS 前面
CSS 是渲染阻塞资源，浏览器必须构建完 CSSOM 才能画第一帧。如果 <link rel="stylesheet"> 写在 <script></script> 后面，浏览器会先停在 script 上等执行，再回头下载 CSS——等于双重阻塞。
- 所有样式表
<link rel="stylesheet">必须紧贴开头，早于任何<script></script> - 禁止在 CSS 文件中用
@import引入其他样式，它强制串行加载，实测拖慢 FCP 超 300ms - 首屏关键样式（如标题、按钮、导航栏）建议内联进
<style></style>，控制在 2–3KB 内
img 标签：懒加载 ≠ 随便加 loading="lazy"
只加 loading="lazy" 不够，没声明尺寸会导致布局偏移（CLS），影响 Core Web Vitals 评分，甚至让浏览器直接降级为 eager 加载。
- 首屏图片（如 Hero 图、登录图标）必须删掉
loading="lazy"，显式写loading="eager"或不写，并加fetchpriority="high" - 所有
<img>必须带width和height属性（响应式可用aspect-ratio配合） - 非首屏图片用
loading="lazy"，配合srcset + sizes或<picture></picture>提供 WebP/AVIF 回退
preload 和 charset：关键资源要“最早被看见”
<link rel="preload"> 不是越早写越好，而是要在浏览器解析到它时，关键资源请求还没发起——否则就是白忙活。
- 字体、首屏关键 CSS、Hero 图的
<link rel="preload">必须放在最前面，紧挨<meta charset> -
<meta charset>必须出现在最开头（建议第 1 行），否则浏览器可能误判编码，触发整页重解析 - 别对 main.js 加 preload——它已被 defer 覆盖，再预加载反而挤占带宽
- preload 字体时务必加
crossorigin属性，否则无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
