HTML5 页面性能优化大全

HTML5 页面性能优化大全：图片懒加载、资源预加载、渲染阻塞解决方案

页面慢一秒，用户少一半。这不是危言耸听，是数据的残酷。

HTML5 给了我们一整套武器库------从语义化标签到 Web Storage，从 Canvas 到 Service Worker。但工具再多，用不对就是在浪费性能。这篇文章把三个最核心的优化方向讲透：图片懒加载、资源预加载、渲染阻塞，每一条都是能直接落地的实战方案。

一、图片懒加载：非首屏资源的最优解

图片通常占页面带宽的 60% 以上。把它们全堆在首屏加载，等于让用户为根本看不到的内容买单。

方案一：`loading="lazy"` ------ 最简单，优先用

ini 复制代码

html
1<img src="photo.jpg" loading="lazy" alt="描述">
2

浏览器会自动延迟加载视口外的图片，滚动到附近时才触发请求。支持 Chrome、Firefox、Edge，Safari 也已跟进。

兼容性检测：

ini 复制代码

javascript
1const isLazySupported = 'loading' in HTMLImageElement.prototype;
2

不支持的浏览器需要降级到方案二或三。

方案二：Intersection Observer API ------ 性能最优

比 scroll 事件监听高效得多，异步触发，不阻塞主线程：

ini 复制代码

javascript
1const images = document.querySelectorAll('img[data-src]');
2const observer = new IntersectionObserver((entries) => {
3  entries.forEach(entry => {
4    if (entry.isIntersecting) {
5      const img = entry.target;
6      img.src = img.dataset.src;
7      img.removeAttribute('data-src');
8      observer.unobserve(img);
9    }
10  });
11}, { rootMargin: '200px' }); // 距视口 200px 时就开始加载
12
13images.forEach(img => observer.observe(img));
14

相比 scroll 事件 + getBoundingClientRect 的方案，IO 不会因高频触发而拖垮性能。

方案三：`scroll` 事件 + 节流 ------ 兼容性兜底

ini 复制代码

javascript
1function lazyLoad() {
2  const images = document.querySelectorAll('img[data-src]');
3  images.forEach(img => {
4    const rect = img.getBoundingClientRect();
5    if (rect.top < window.innerHeight && rect.bottom >= 0) {
6      img.src = img.dataset.src;
7      img.removeAttribute('data-src');
8    }
9  });
10}
11
12// 必须加节流，否则 scroll 事件每秒触发上百次
13let ticking = false;
14window.addEventListener('scroll', () => {
15  if (!ticking) {
16    requestAnimationFrame(() => { lazyLoad(); ticking = false; });
17    ticking = true;
18  }
19});
20

三种方案对比：

方案	性能	复杂度	兼容性	推荐度
`loading="lazy"`	⭐⭐⭐⭐⭐	极低	现代浏览器	首选
Intersection Observer	⭐⭐⭐⭐⭐	低	Chrome 51+/FF 55+	首选
scroll + 节流	⭐⭐⭐	中	全浏览器	兜底

占位图策略：用低质量图片（LQIP）或 SVG 渐变作为加载中的占位，尺寸与实际图片一致，避免布局跳动。

二、资源预加载：让浏览器"未卜先知"

预加载的核心逻辑：在正确的时间，用正确的优先级，加载正确的资源。

2.1 `<link rel="preload">` ------ 当前页面必需资源，最高优先级

ini 复制代码

html
1<link rel="preload" href="font.woff2" as="font" crossorigin>
2<link rel="preload" href="critical.css" as="style">
3<link rel="preload" href="app.js" as="script">
4<link rel="preload" href="hero.webp" as="image">
5

as 属性必须填，它告诉浏览器资源类型，从而设置正确的请求头和优先级。

⚠️ 预加载的资源若未被使用，浏览器会发出警告。只预加载真正需要的东西。

2.2 `<link rel="prefetch">` ------ 未来页面的资源，低优先级

ini 复制代码

html
1<link rel="prefetch" href="/next-page.html">
2<link rel="prefetch" href="/next-page.css" as="style">
3

浏览器在空闲时下载，不影响当前页面。适合多步骤表单、下一篇文章、用户高频访问的路由。

2.3 `<link rel="preconnect">` ------ 提前建立连接，省掉握手延迟

一次 HTTPS 请求的建立过程：DNS 解析 → TCP 握手 → TLS 协商，耗时可达数百毫秒。

ini 复制代码

html
1<link rel="preconnect" href="https://cdn.example.com">
2<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
3<link rel="dns-prefetch" href="//fonts.googleapis.com">
4

preconnect 包含 DNS 解析 + TCP + TLS，dns-prefetch 只做 DNS。CDN 和第三方 API 场景必用。

三者对比

指令	用途	优先级	典型场景
`preload`	当前页面必须的资源	最高	字体、首屏图片、关键 JS/CSS
`prefetch`	未来页面可能用的资源	最低	下一页、用户常访问的路由
`preconnect`	提前建立服务器连接	中	CDN、第三方 API、Web 字体

2.4 JS 动态预加载

ini 复制代码

javascript
1// 预加载图片
2const img = new Image();
3img.src = 'gallery-01.jpg';
4
5// 鼠标悬停时预加载下一页（按需触发）
6document.getElementById('nextBtn').addEventListener('mouseover', () => {
7  const link = document.createElement('link');
8  link.rel = 'prefetch';
9  link.href = '/next-page.json';
10  document.head.appendChild(link);
11});
12

三、渲染阻塞：JS/CSS 踩过的每一个坑

浏览器渲染流程：解析 HTML → 构建 DOM → 加载 CSS 构建 CSSOM → 执行 JS → 布局 → 绘制。任何环节阻塞，页面就白屏。

3.1 JS 阻塞 ------ `async` vs `defer`

属性	加载时机	执行时机	适用场景
`async`	异步下载，不阻塞解析	下载完立即执行，可能在 DOMContentLoaded 之前	独立脚本（统计、广告）
`defer`	异步下载，不阻塞解析	DOM 解析完后、DOMContentLoaded 前按序执行	有依赖关系的脚本
放 `<body>` 底部	同步下载	DOM 构建完后执行	万能兜底方案

xml 复制代码

html
1<!-- 推荐：defer 用于有依赖的脚本 -->
2<script src="app.js" defer></script>
3
4<!-- 推荐：async 用于独立脚本 -->
5<script src="analytics.js" async></script>
6

两者都不适合内联脚本（inline script），只对外部文件有效。且都不要在其中使用 document.write()。

3.2 CSS 阻塞渲染 ------ 但它不阻塞 JS 执行

CSS 加载不会停止 HTML 解析，但会阻塞 JS 执行（因为 JS 可能读取计算样式）。

解决方案：

CSS 放 <head>，JS 放 <body> 底部 ------ 经典且有效

内联首屏关键 CSS ，外部 CSS 用 preload：

xml 复制代码

html
1<style>/* 首屏关键样式 */</style>
2<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
3

媒体查询不阻塞 ：media 属性指定的 CSS 只在匹配时才阻塞

3.3 减少重排重绘 ------ 动画性能的生死线

频繁读写 offsetTop、getBoundingClientRect 会强制触发同步重排，是性能杀手。

坏做法	好做法
循环中读布局属性	批量读取，集中修改
`element.style.left = x + 1 + 'px'`	用 `transform: translateX()` 代替
频繁切换内联样式	用 CSS 类名切换，让浏览器批量处理
动画用 `setTimeout`	用 `requestAnimationFrame`

硬件加速技巧：

css 复制代码

css
1.animated-element {
2  will-change: transform;
3  transform: translateZ(0); /* 触发 GPU 合成 */
4}
5

四、其他关键优化速查

策略	做法	收益
图片格式	WebP/AVIF 替代 JPEG/PNG	体积减少 30%~50%
响应式图片	`srcset` + `sizes`	按设备像素比提供合适尺寸
视频预加载	`<video preload="metadata">`	只加载元数据，不浪费带宽
Service Worker	拦截请求返回缓存	二次访问秒开，支持离线
Web Workers	耗时计算移到后台线程	主线程不卡顿
合并请求	CSS/JS 合并 + Gzip	减少 HTTP 往返

五、一张图总结优先级

ini 复制代码

1首屏必须的资源 → preload（最高优先级）
2      ↓
3连接第三方域名 → preconnect / dns-prefetch
4      ↓
5未来页面资源 → prefetch（最低优先级，空闲时下载）
6      ↓
7非首屏图片 → loading="lazy" / Intersection Observer
8      ↓
9JS 脚本 → defer / async / 放 body 底部
10      ↓
11CSS → head 内联关键 + preload 外部 + 避免阻塞 JS
12

性能优化不是一次性工程，是持续测量、持续迭代的过程。打开 Chrome DevTools 的 Performance 面板，用数据说话，比任何经验都靠谱。

工具给你了，方法给你了。剩下的，就是动手。

HTML5 页面性能优化大全