教程详情
1. 优先加载关键资源
- 将link标签引入的CSS文件放在head顶部，确保页面样式优先渲染（如link rel="stylesheet" href="style.css"）。
- 使用`media="print"`属性隐藏非首屏CSS（如广告样式表），延迟加载到后台（如link rel="stylesheet" href="ad.css" media="print"）。
2. 延迟加载JavaScript
- 将主脚本script src="main.js"从head移至body底部，避免阻塞DOM构建（如电商页面先显示商品列表再执行交互脚本）。
- 对第三方分析代码（如Google Analytics）添加`async`属性，异步加载以减少首页等待时间（如script async src="analytics.js"）。
3. 预加载核心资源
- 在head中添加link rel="preload" href="logo.png"，提前请求页面图标或首屏图片。
- 使用link rel="prefetch" href="data.json"在后台静默加载次屏数据（如用户下拉时才需加载的表格内容）。
4. 合并压缩资源
- 将多个小图标合并为一张`sprite.png`，通过CSS背景定位显示，减少HTTP请求次数（如导航栏图标从5次请求优化为1次）。
- 启用Gzip压缩（服务器配置`.htaccess`添加`mod_deflate`规则），将JS/CSS文件体积缩小60%-70%。
5. 缓存策略应用
- 在`.htaccess`文件中设置`Cache-Control: max-age=31536000`，强制浏览器缓存静态资源（如Logo、字体文件）一年。
- 使用`serviceWorker`注册缓存策略（如`cacheFirst`模式优先读取本地存储的JS文件）。
6. 异步字体加载
- 将link href="font.ttf" rel="stylesheet"改为link href="font.ttf" rel="preload" as="font"，配合JS动态插入text元素，避免字体文件阻塞渲染。
- 采用`font-display: swap` CSS属性，在字体加载完成前临时使用系统默认字体。
7. 图片懒加载
- 对非首屏图片添加`loading="lazy"`属性（如文章配图），仅在滚动到视口时加载（可节省80%的图片请求带宽）。
- 使用WebP格式替换JPEG/PNG（如将`banner.jpg`转为`banner.webp`，体积降低40%）。
8. DNS预解析
- 在HTML头部添加link rel="dns-prefetch" href="//api.example.com"，提前解析第三方API域名（如支付接口服务器）。
- 通过JavaScript动态插入script src="tracker.js" preload，在用户空闲时预加载追踪脚本。
9. 服务端推送配置
- 在服务器启用HTTP/2多路复用（如Nginx配置`http2 on`），将CSS/JS文件一次性推送至客户端。
- 使用`Push-Notification` API在页面加载时主动推送即将需要的资源（如用户点击按钮后立即加载弹窗所需的JS文件）。
