HTML 性能优化

约 838 字大约 3 分钟

布欧-Lewyon

2026-05-16

性能优化从 HTML 开始。正确的标签和属性可以显著提升页面加载速度和用户体验。

脚本加载策略

默认行为（阻塞）

<script src="app.js"></script>

浏览器遇到 <script> 会：

暂停 HTML 解析
下载并执行脚本
继续解析 HTML

→ 阻塞渲染，放在 <head> 中会导致白屏。

`async` 异步加载

<script src="analytics.js" async></script>

下载时不阻塞 HTML 解析
下载完成后立即执行（可能阻塞解析）
执行顺序不保证（谁先下完谁先执行）
适用：独立脚本（统计、广告）

`defer` 延迟加载

<script src="app.js" defer></script>

下载时不阻塞 HTML 解析
HTML 解析完成后才按顺序执行
多个 defer 脚本保持执行顺序
适用：需要操作 DOM 的应用脚本

对比

加载方式	是否阻塞解析	执行时机	执行顺序
默认（无属性）	✅ 阻塞	下载后立即	按顺序
`async`	❌ 不阻塞	下载后立即	❌ 不保证
`defer`	❌ 不阻塞	HTML 解析完成后	✅ 按顺序

资源预加载

`<link rel="preload">`

提前加载关键资源（当前页面需要的）：

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="app.js" as="script">

`<link rel="prefetch">`

预加载下一页面可能用到的资源（低优先级）：

<link rel="prefetch" href="/next-page.html" as="document">
<link rel="prefetch" href="/images/next-hero.jpg" as="image">

`<link rel="preconnect">`

提前建立与第三方来源的连接（DNS + TCP + TLS）：

<link rel="preconnect" href="https://api.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">

`<link rel="dns-prefetch">`

仅提前解析 DNS（比 preconnect 开销小）：

<link rel="dns-prefetch" href="https://cdn.example.com">

对比

类型	作用	优先级
`preload`	加载当前页面所需资源	高
`prefetch`	预取下一页所需资源	低（浏览器空闲时）
`preconnect`	提前建立连接	高
`dns-prefetch`	提前解析 DNS	低

关键渲染路径

优化原则

减少阻塞：async / defer 脚本、内联关键 CSS
减少请求：合并文件、CSS Sprites、内联小资源
减少大小：压缩、<img loading="lazy"> 懒加载
关键路径优先：<link rel="preload"> 优先加载关键资源

布局偏移（CLS）

<!-- ❌ 没有设置图片尺寸 → 加载后页面跳动 -->
<img src="photo.jpg" alt="照片">

<!-- ✅ 设置尺寸 → 浏览器预留空间 -->
<img src="photo.jpg" alt="照片" width="800" height="600">

始终为图片、视频、iframe 等元素设置 width 和 height，防止布局偏移。

小结

优化技术	作用	用法
`async` / `defer`	避免脚本阻塞解析	`<script defer src="app.js">`
`preload`	提前加载关键资源	`<link rel="preload" href="..." as="...">`
`preconnect`	提前建立连接	`<link rel="preconnect" href="https://api.xxx">`
`loading="lazy"`	图片/iframe 懒加载	`<img loading="lazy">`
尺寸属性	防止布局偏移	`<img width="800" height="600">`

上一节：ARIA 无障碍访问