还在面试时被问到 “页面加载怎么优化？” 时只会说 动态加载 和 懒加载 吗？今天这篇文章带你突破瓶颈！
页面加载优化不是简单地组件懒加载就完事了，也不是甩一句 “用了 Gzip 压缩” 就能糊弄过去。真正的页面优化是一场 从 URL 输入到页面渲染完成 的接力赛，每一个环节都可能成为瓶颈。
所以，今天我们不讲那些表面的优化手段，而是拆解页面加载的 全链路流程，从 DNS 解析 到 TCP 连接，从 资源下载 到 代码解析，再到 UI 渲染，手把手带你掌握一整套 硬核优化思路。
不止秒杀面试官，还能真正提升你项目的加载速度，让用户不再卡在加载动画里怀疑人生！
🌍 1. URL 输入 —— 域名解析优化
当你在浏览器地址栏输入 https://example.com，第一步是 DNS 解析，将域名解析为 IP 地址。这个过程通常会有 100ms~300ms 的延迟，优化方案如下：
- DNS 预解析：浏览器会对某些域名进行 预解析，减少用户访问时的等待时间。可以在
<head>里手动添加：ini
代码解读复制代码<link rel="dns-prefetch" href="//example.com"> - 使用更快的 DNS 解析：像 Google DNS（
8.8.8.8）、Cloudflare DNS（1.1.1.1）通常比默认 ISP 提供的 DNS 解析更快。 - 使用 CDN：CDN（内容分发网络）能让 DNS 解析到离用户更近的服务器，减少解析时间。
🗄️ 2. 缓存策略 —— 让页面加载更快
缓存就是让浏览器 少请求 或 不请求 服务器，直接用本地存储的资源。
- 合理设置 HTTP 缓存
强缓存（
Cache-Control: max-age）：一定时间内，直接用本地缓存，不去服务器请求。协商缓存（
ETag、Last-Modified）：浏览器发请求时带上缓存标识，服务器判断资源是否更新，未更新则返回 304。
强缓存和协商缓存想要详细掌握有很多知识点，大家可以自行翻阅资料学习。关键词：
强缓存、协商缓存、304的过程
- Service Worker 进行 PWA 缓存
PWA（渐进式 Web 应用） 使用 Service Worker 来拦截请求，缓存关键资源，实现离线访问和秒开。
如果项目 不是 PWA，那么你通常不会直接使用 PWA 缓存，不过这一点如果你能回答出来也是加分项。
🔌 3. 建立连接 —— TCP/TLS 优化
在 DNS 解析完后，浏览器会与服务器建立 TCP 连接，如果是 HTTPS，还要进行 TLS 连接。这两个过程加起来，通常需要 300ms~500ms。
- 开启 HTTP/2 或 HTTP/3
HTTP/2 多路复用，让多个请求共用一个 TCP 连接，减少握手时间。
HTTP/3 采用 QUIC 协议，减少连接延迟，优化网络传输。
- 启用 TLS 1.3
TLS 1.3 连接速度更快，减少握手时间，推荐在服务器上启用！
- 使用
preconnect提前建立连接ini
代码解读复制代码<link rel="preconnect" href="https://cdn.example.com">这样浏览器可以提前与 CDN 建立连接，提升加载速度！
相关知识点：
HTTP1.1和HTTP2的区别、HTTP2特性、HTTPS、TCP连接
📡 4. 发送请求 —— 减少 HTTP 请求
当连接建立后，浏览器会向服务器发送 HTTP 请求，获取页面资源。减少 HTTP 请求的次数 可以极大提高加载速度。
- 合并请求
CSS、JS 合并打包：使用 Webpack/Vite 进行打包，减少 HTTP 请求次数。
雪碧图（Sprite） ：减少小图片请求次数，比如 Icon 合并成一张雪碧图。
- 使用 HTTP/2 多路复用
HTTP/2 允许多个请求共享一个 TCP 连接，避免了传统 HTTP 1.1 的 队头阻塞 问题。
- 使用 Code Splitting（代码拆分）
只加载当前页面需要的代码，避免一次性加载所有资源。
Code Splitting一般和动态加载放在一起说：
- Code Splitting：将代码拆分成更小的 chunk，使用
Vite、Webpack、Rollup等构建工具。- 动态加载：在需要时再加载这些 chunk，依赖于 Code Splitting 拆分出的代码，使用
React.lazy、Vue 异步组件、路由懒加载等。
📥 5. 资源下载 —— 静态资源优化
服务器响应后，浏览器开始下载 HTML、CSS、JS 和图片等静态资源。
- Gzip/Brotli 压缩
服务器端启用 Gzip 或 Brotli 可以大幅减少 HTML、CSS、JS 文件的大小：
bash
代码解读复制代码gzip on; gzip_types text/css application/javascript; - 使用 WebP/AVIF 图片格式
WebP 和 AVIF 比 PNG、JPG 体积小 30%~50% ，加载更快。
- 懒加载（Lazy Loading）
图片懒加载：
ini
代码解读复制代码<img src="image.jpg" loading="lazy" />组件懒加载：
ini
代码解读复制代码const LazyComponent = React.lazy(() => import('./Component')); - Vite 的
esbuild进行 JS 压缩esbuild比 Webpack 内置的 Terser 速度快 20 倍！
🔄 6. 代码解析 —— 提高解析 & 执行效率
浏览器下载完资源后，需要解析 HTML、CSS、JS，接着执行脚本。
- 减少 JavaScript 解析时间
使用
defer/async加载 JS，避免阻塞页面渲染：xml
代码解读复制代码<script src="main.js" defer></script>
知识点：
异步加载脚本，知道defer和async语法吗
- 减少 CSS 阻塞
CSS 会阻塞渲染，使用
media进行按需加载：ini
代码解读复制代码<link rel="stylesheet" href="print.css" media="print">
🎨 7. UI 渲染 —— 渲染优化
- CSS 动画比 JS 动画更流畅
让浏览器利用 GPU 加速：
css
代码解读复制代码transform: translate3d(0, 0, 0); - 避免回流 & 重绘
减少不必要的 DOM 操作，一次性修改
classList，不要频繁操作style。
写在最后
总的来说，页面加载优化这道题看似简单，实则考察的范围非常广。它不仅仅是考察你对动态加载和Code Splitting的了解，还涉及前端工程化Vite/Webpack、性能监控、网络请求优化、资源管理等多个方面。
在实际面试中，面试官可能会进一步追问：Tree Shaking、FCP、LCP...等相关知识点。
建议全文掌握！作为一名有经验的前端开发者，熟练掌握这些知识不仅是加分项，更是提升项目性能、应对复杂场景的必备技能！ 🚀
