前端性能优化方案

一、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 控制