01DNS查询优化
DNS查询
浏览器自身缓存 → 操作系统缓存 → 本地 hosts 文件 → 配置的递归 DNS 服务器。如果递归服务器缓存中没有记录，它会从根服务器开始，逐级向顶级域（如 .com）、权威服务器发起迭代查询，直到拿到最终 IP，并将结果按 TTL 缓存下来。一次完整的冷查询可能耗时数十到数百毫秒，而缓存命中可降至毫秒级甚至零耗时。
优化措施
1dns-prefetch 让浏览器提前完成指定域名的 DNS 解析。
2<link rel="dns-prefetch" href="//cdn.example.com">
3preconnect 更进一步，不仅做 DNS 解析，还提前完成 TCP 握手和 TLS 协商（HTTPS 场景）。
4<link rel="preconnect" href="https://cdn.example.com">
结论先行使用原则：只对确定会用到的第三方域名（如 CDN、字体服务、API 网关）添加预解析。
02网络请求优化
- 减少http请求
- 合并小图标：CSS sprites(精灵图)，SVG sprites
- 内联关键资源：首屏样式写到<head>里，不通过链接引入
- 使用http2：多路复用，服务端推送，头部压缩
03压缩资源
代码压缩
JS/CSS：使用Terser、UglifyJS、CSSNano等工具压缩。
HTML：使用HTMLMinifier。
图片压缩
响应式图片：使用srcset + sizes 或 <picture>按需加载。
懒加载
1<img loading="lazy">
压缩工具：Imagemin、Squoosh、TinyPNG
04浏览器缓存
- 强缓存： 设置Cache-Control（如max-age=31536000）和Expires。
- 协商缓存： 使用ETag/Last-Modified。
- Service Worker缓存： 实现离线访问、资源预缓存、网络降级策略。
- 版本化文件名： 文件名带哈希（如app.a3f4c8.js），实现“永久缓存+即时更新”。
05优化资源加载顺序
- CSS： 放在<head>中（尽早加载，避免FOUC）。 避免@import（增加请求链）。
- JS： 异步加载： async（加载完立即执行，不阻塞DOM解析）或 defer（DOM解析完后按序执行）。 关键JS内联，非关键JS延迟加载。
- <link rel="preload">：提前加载关键资源（字体、首屏图片）。
- <link rel="prerender">：预渲染页面（谨慎使用）