第 1 卷
前端性能优化全解析
1. 前端开发中性能优化的核心操作
前端性能优化围绕「加载性能」「渲染性能」「运行性能」三大维度展开，核心操作如下：
• 加载阶段优化：资源压缩（JS/CSS/图片）、代码分割、懒加载、CDN 接入、DNS 预解析、HTTP
缓存配置、减少 HTTP 请求（雪碧图、资源合并）、使用现代资源格式（WebP、Avif）、预加载关键资源
• 渲染阶段优化：避免重绘与回流、优化 CSS 选择器、使用 Flex/Grid 布局（性能优于传统布局）、
异步加载非关键 CSS、首屏渲染优化（⻣架屏、关键 CSS 内联）
• 运行阶段优化：JS 代码性能优化、避免内存泄漏、使用虚拟 DOM、防抖节流、优化事件绑定（事
件委托）、减少 DOM 操作、合理使用 Web Worker（处理耗时任务）
2. 代码分割(Code Splitting) 及性能优化实践
什么是代码分割
代码分割是指将原本打包在一起的整份 JS/CSS 代码，按一定规则拆分成多个小的代码块（chunk），而非一次性加载所有资源的前端优化技术。它解决了传统打包模式下「打包体积过大、首屏加载时间
过长」的问题。
开发中如何利用代码分割优化性能
- 按路由分割（最常用，框架友好支持）
◦ Vue：结合 vue-router 的 import() 动态导入实现路由懒加载
Code block
1const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue')
2const router = new VueRouter({ routes: [{ path: '/', component: Home }] })
◦ React：结合 react-router 与 import() 实现
Code block
1const About = React.lazy(() => import(/* webpackChunkName: "about" */
- 按组件分割（非核心组件按需加载）
对弹窗、图表等非首屏必需的组件，使用 import() 动态导入，触发特定操作（如点击按钮）时再加载组件代码。
- 按功能模块分割（第三方库分割）
对体积较大的第三方库（如 Lodash、ECharts），单独拆分成独立 chunk，避免与业务代码打包在一起，利用浏览器缓存缓存第三方库资源。
◦ Webpack 配置示例：通过 splitChunks 拆分第三方依赖
Code block
1module.exports = { 2optimization: {
3splitChunks: { 4chunks: 'all',
5cacheGroups: { 6vendor: {
| 7 | test: /[\\/]node_modules[\\/]/, |
|---|---|
| 8 | name: 'vendors', |
| 9 | priority: -10 |
| 10 | } |
| 11 | } |
| 12 | } |
| 13 } | |
| 14 } |
3. 懒加载(Lazy Loading) 与预加载(Preloading)
核心定义
• 懒加载（延迟加载）：指资源（图片、组件、路由等）并非页面初始化时加载，而是在其即将进入
可视区域或触发特定操作时，才开始加载的技术。
• 预加载（提前加载）：指在页面核心资源加载完成后、浏览器空闲时，主动提前加载后续可能需要
用到的资源（如下一个路由的组件、一张非首屏图片）的技术。
核心作用
• 懒加载的作用：
• 预加载的作用：
- 提前缓存后续需要的资源，当用户触发相关操作（如跳转路由、点击按钮）时，资源已缓存，
提升交互响应速度，减少等待时间
- 合理利用浏览器空闲时间，不阻塞核心资源的加载和渲染
4. CDN 定义及核心作用
什么是 CDN
CDN（Content Delivery Network，内容分发网络）是一套分布式的边缘节点服务器集群，它会将源站的静态资源（JS、CSS、图片、视频等）缓存到靠近用户的边缘节点上，当用户请求资源时，无需
访问源站，直接从最近的边缘节点获取资源。
CDN 的核心作用
- 提升资源加载速度：用户从就近的边缘节点获取资源，减少网络传输距离和延迟，解决「跨地域访
问慢」的问题
- 减轻源站压力：大部分静态资源请求由边缘节点承接和响应，大幅减少源站的访问量和带宽消耗
- 提高网站可用性和容灾能力：CDN 节点多为分布式部署，某一个节点故障时，会自动切换到其他可
用节点，避免源站单点故障导致的服务不可用
- 实现静态资源缓存：边缘节点会缓存静态资源，重复请求可直接返回缓存内容，进一步提升响应速
度
5. CDN 原理、使用场景及开发实践
CDN 的核心原理
- 资源缓存：CDN 首次接收到用户请求时，会先向源站请求资源，获取后将资源缓存到该边缘节点，
并设置缓存过期时间
- 调度系统（核心）：通过 GSLB（全局负载均衡）系统，根据用户的地理位置、网络质量、节点负
载情况等因素，智能分配最近、最优的边缘节点给用户
- 请求转发与响应：用户请求资源时，先发送到 GSLB 进行节点调度，再由调度后的边缘节点提供资
源服务；若节点无缓存或缓存过期，会先回源更新缓存，再响应用户
- 缓存失效机制：当源站资源更新时，可通过主动推送、手动刷新或等待缓存过期的方式，让 CDN
节点更新缓存，保证用户获取最新资源
CDN 的使用场景
全站分卷索引 · 7 卷
- 1第 1 卷
- 前端性能优化全解析
- 1. 前端开发中性能优化的核心操作
- • 加载阶段优化：资源压缩（JS/CSS/图片）、代码分割、懒加载、CDN 接入、DNS 预解析、HTTP
- • 渲染阶段优化：避免重绘与回流、优化 CSS 选择器、使用 Flex/Grid 布局（性能优于传统布局）、
- • 运行阶段优化：JS 代码性能优化、避免内存泄漏、使用虚拟 DOM、防抖节流、优化事件绑定（事
- 2. 代码分割(Code Splitting) 及性能优化实践
- 什么是代码分割
- 开发中如何利用代码分割优化性能
- ◦ Vue：结合 vue-router 的 import() 动态导入实现路由懒加载
- ◦ React：结合 react-router 与 import() 实现
- ◦ Webpack 配置示例：通过 splitChunks 拆分第三方依赖
- 3. 懒加载(Lazy Loading) 与预加载(Preloading)
- 2第 2 卷
- 开发中的 CDN 使用实践
- 6. 浏览器缓存 & HTTP 缓存策略
- 1. 强缓存
- • 核心：浏览器直接从本地缓存读取资源，无需和服务器建立连接，响应状态码为 200 OK
- • 控制字段（HTTP 1.0/1.1）：
- ◦ Expires：HTTP 1.0 字段，是一个绝对时间戳（如 Wed, 31 Dec 2025 23:59:59
- ◦ Cache-Control：HTTP 1.1 字段，优先级高于 Expires，支持相对时间配置（如
- ▪ public：所有节点（浏览器、CDN 等）均可缓存
- ▪ private：仅浏览器可缓存（默认值）
- ▪ no-cache：不使用强缓存，直接进入协商缓存
- ▪ no-store：不缓存任何资源
- ▪ max-age：缓存有效时间（秒）
- 3第 3 卷
- ◦ 避免频繁修改 width、 height、 margin、 top 等布局属性
- ◦ 实现元素移动、缩放、透明度变化时，使用 transform 和 opacity，这两个属性由 GPU
- 8. Vue、React 中的虚拟DOM如何增强性能
- 核心前提：真实DOM操作的性能瓶颈
- 虚拟DOM增强性能的核心原理
- ◦ Diff 算法优化策略：同层对比（不跨层级对比，降低复杂度）、key 标识（精准复用节点，避免
- 补充：框架层面的优化
- • Vue：通过响应式系统精准监听状态变化，结合虚拟 DOM 的 Diff 算法，实现按需更新；Vue 3 还引
- • React：通过 Fiber 架构实现可中断的 Diff 过程，优先处理高优先级任务，避免长时间阻塞主线
- 9. CSS选择器会影响浏览器的渲染性能吗
- 低效CSS选择器（应避免）
- 优化CSS选择器的实践
- 4第 4 卷
- 10. JavaScript代码性能优化操作
- ◦ 使用 Web Worker：将耗时计算（如大数据处理、复杂算法）放到 Web Worker 中执行，Web
- ◦ 拆分长任务：将超过 50ms 的长任务拆分为多个小任务，通过 requestIdleCallback 或
- ◦ 数据查询优化：使用 Map/Set 替代 Array 进行高频查询（Map 的查找时间复杂度为 O(1)，
- ◦ 避免不必要的循环嵌套：循环嵌套的时间复杂度通常为 O(n²) 甚至更高，尽量优化为单层循环
- ◦ 缓存计算结果：对重复计算的结果进行缓存（如斐波那契数列的递归优化、组件渲染中的计算
- ◦ 减少直接 DOM 操作，优先使用虚拟 DOM 或框架提供的 API
- ◦ 使用事件委托（事件冒泡机制），减少事件绑定数量
- ◦ 避免频繁创建匿名函数：匿名函数无法被缓存，频繁创建会增加内存开销（如在 render 方
- ◦ 函数柯里化/防抖节流：减少不必要的函数执行（后文详细说明）
- ◦ 避免递归深度过深：递归深度过深会导致调用栈溢出，可改为迭代实现
- ◦ 使用 defer / async 加载非关键 JS 脚本：
- 5第 5 卷
- ◦ 部分第三方库（如ECharts、jQuery）在使用后需要手动销毁实例，否则会导致内存泄漏
- ◦ 避免对象之间形成循环引用（如 a.b = b; b.a = a），虽然现代浏览器的垃圾回收机制
- 12. 防抖和节流提高性能的场景
- 防抖（Debounce）
- • 核心逻辑：触发事件后，延迟n秒再执行函数；若在n秒内再次触发事件，则重新计时，最终只执行
- • 提高性能的场景（需要「最后一次触发」执行的场景）：
- 节流（Throttle）
- • 核心逻辑：触发事件后，每隔n秒只执行一次函数，无论事件触发多频繁，保证函数在固定时间间
- • 提高性能的场景（需要「间隔执行」的场景，保证执行频率稳定）：
- 13. 常见图片优化操作及性能提升方案
- ◦ 静态图片：优先使用 WebP/Avif 格式（压缩率远高于 JPG/PNG，相同视觉效果下体积更小），
- ▪ WebP：支持有损压缩和无损压缩，静态图片体积比 JPG 小 25%-35%，比 PNG 小 50% 左
- 6第 6 卷
- ◦ Performance 面板：录制页面加载和运行过程，分析帧率、主线程阻塞、回流重绘、JS 执行时
- ◦ Network 面板：监控所有资源的加载时间、大小、请求状态，分析资源加载瓶颈（如大文件加
- ◦ Layers 面板：查看页面的合成层，分析 GPU 加速情况
- ◦ Console 面板：通过 console.time() / console.timeEnd() 手动测试代码执行时间
- ◦ Performance Insights 面板：更简洁的性能分析面板，适合快速定位首屏加载、交互卡顿问题
- • Chrome Lighthouse
- ◦ 内置在 Chrome DevTools 中（Audits 面板），可生成全面的性能报告，包含核心 Web 指标
- ◦ 支持手动运行，也可集成到 CI/CD 流程中，实现自动化性能监控
- • Web Vitals：Google 推出的前端性能监控库，专门用于监控核心 Web 指标（LCP、FID、CLS、
- • Sentry：不仅支持错误监控，还支持性能监控，可跟踪页面加载、API 请求、函数执行的耗时，定
- • New Relic：企业级应用性能监控工具，支持前端、后端全链路性能监控
- • Fiddler：网络抓包工具，监控 HTTP/HTTPS 请求，分析资源加载和接口性能问题
- 7第 7 卷
- ◦ 注意： href 属性只需填写域名（无需带具体路径），如 https://cdn.xxx.com 而非
- ◦ 优先级：可配合 preconnect 使用（ preconnect 不仅预解析 DNS，还会建立 TCP 连
- ◦ X-DNS-Prefetch-Control: on：开启 DNS 预解析（默认值）
- ◦ X-DNS-Prefetch-Control: off：关闭 DNS 预解析（不推荐，除非有特殊需求）
- ◦ 示例（Nginx 配置）：
- ◦ HTML 标签： <meta http-equiv="X-DNS-Prefetch-Control" content="off">
- ◦ HTTP 响应头： X-DNS-Prefetch-Control: off
- DNS 预解析的应用场景
- 注意事项
- 总结