前端性能优化方案
一、HTML优化策略
1、减少DOM层级
<!-- 避免 --><div><div><div><p>内容</p></div></div></div><!-- 推荐 --><div class="content">内容</div>原因：嵌套过深会增加渲染树的构建时间
2、异步加载非关键资源
<!-- defer/async 区别 --><script defer src="non-critical.js"></script> <!-- DOM解析后执行 --><script async src="analytics.js"></script> <!-- 下载完立即执行 -->3、预加载关键资源
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="next-page.html"> <!-- 空闲时预加载 -->二、CSS优化策略
1、关键 CSS 内联，避免阻塞渲染
<!-- 将非关键CSS移到body底部 -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">2、减少页面重绘和回流
回流（reflow）：是指由于DOM结构或样式发生改变，浏览器需要重新计算元素的几何属性，然后重新布局页面的过程
重绘（repaint）：是指当元素样式发生改变，但不影响布局时，浏览器只需要重新绘制受影响的部分，而不需要重新计算布局
- 尽量减少深度嵌套或复杂选择器的使用，以提高 CSS 渲染效率
- 避免频繁的DOM操作：频繁修改DOM会导致重排和重绘，尽量批量处理DOM修改，或者使用DocumentFragment来构建DOM树后再添加到页面
- 合理使用GPU加速：使用CSS3的硬件加速功能，可以将需要进行动画或变换的元素提升到一个独立的渲染层，从而避免浏览器进行重新布局（Reflow）和绘制（Repaint）。可以触发 GPU 硬件加速的 CSS 属性包括 transform、filter、will-change 和 position:fixed
3、图像压缩、格式选择和精灵图
- WebP 格式替代 JPEG/PNG（兼容性需考虑）：相比于PNG和JPEG的优点主要包括更小的文件大小、更高的压缩效率和更好的图像质量保持。
- TinyPNG压缩图片
- 精灵图：将许多小图像合并成一个大图像。这样，在加载页面时，只需要获取一个图像来显示多个页面元素
4、图片懒加载
仅在图像进入浏览器视口时加载图像
将 img 的src属性设置成一张默认图片，在图片加载出来之前显示默认图片。
用data-自定义属性名 (data-src) 接收图片的真实路径，待图片滚动到可视区域的时候开始加载图片，待图片加载出来之后替换掉之前的默认图片
三、Javascript优化策略
1、防抖与节流
防抖，就是指触发事件后，在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖确保函数在一段时间内只执行一次，且是在最后一次触发事件后执行。
节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流确保函数按照固定的时间间隔执行。
2、虚拟列表优化长列表
3、Web Worker处理密集型任务
浏览器提供的 JavaScript 多线程解决方案，它允许在主线程之外运行脚本，避免阻塞 UI 渲染
四、webpack优化策略
减少打包体积（减小最终资源大小）
| 优化点 | 做法 |
|---|---|
| ✅ Tree Shaking | 删除未使用代码（使用 ES6 import/export 模块规范） |
| ✅ 压缩 JS | 使用 TerserPlugin 进行代码压缩（默认内置于 mode=production） |
| ✅ 压缩 CSS | 使用 css-minimizer-webpack-plugin |
| ✅ 压缩图片 | 使用 image-webpack-loader 或在打包前压缩 |
| ✅ 忽略 Moment.js 的多语言 | new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }) |
| ✅ 使用 CDNs | 将大库（如 React、Vue）用 CDN 引入，设置为 externals |
| ✅ 使用按需加载库 | 例如 lodash-es + babel-plugin-lodash |
五、CDN优化策略
CDN 优化（内容分发网络）是部署在全球各地的缓存服务器集群，将静态资源（图片、JS、CSS 等）缓存到离用户更近的服务器，提升加载速度，减少延迟。
CDN 优化策略
| 优化点 | 说明 | 配置建议 |
|---|---|---|
| ① 使用 CDN 加速静态资源 | 加快加载速度（图片、JS、CSS、字体等） | 将资源上传到 CDN 服务商（如阿里云、腾讯云、七牛、Cloudflare） |
| ② 设置域名分发 | 资源使用独立域名，防止与主站 Cookie 冲突 | 如静态资源用 static.example.com |
| ③ DNS 预解析 | 提前建立连接 | HTML 添加：<link rel="dns-prefetch" href="//static.example.com"> |
| ④ preconnect | 提前建立 TCP + TLS 连接 | <link rel="preconnect" href="https://cdn.example.com"> |
| ⑤ CDN 缓存控制 | 控制资源更新策略 | 在 CDN 控制台设置 Cache-Control、Expires |
六、浏览器缓存优化策略
浏览器缓存通过存储资源副本（CSS、JS、图片等），避免重复请求服务器，提升性能。
两类缓存方式
| 类型 | 说明 | 特点 |
|---|---|---|
| ① 强缓存（强制使用缓存） | 不发请求，直接读取缓存资源 | Cache-Control、Expires 控制 |
| ② 协商缓存（可能使用缓存） | 发送请求，服务端判断是否使用缓存 | ETag、Last-Modified 控制 |