第 5 卷

◦ 部分第三方库（如ECharts、jQuery）在使用后需要手动销毁实例，否则会导致内存泄漏

1// ECharts实例创建 2const myChart = echarts.init(document.getElementById('chart'));

3 4// 组件卸载时销毁ECharts实例

5myChart.dispose();

1. 避免循环引用

◦ 避免对象之间形成循环引用（如 a.b = b; b.a = a），虽然现代浏览器的垃圾回收机制

（标记清除法）已能处理循环引用，但在低版本浏览器或特殊场景下仍可能导致内存泄漏，尽量避免不必要的循环引用

12. 防抖和节流提高性能的场景

防抖（Debounce）和节流（Throttle）是两种用于「限制函数执行频率」的技术，核心作用是：避免函数因高频触发（如滚动、输入、点击）而频繁执行，减少不必要的计算和 DOM 操作，从而提升页面

性能和流畅度。

防抖（Debounce）

• 核心逻辑：触发事件后，延迟n秒再执行函数；若在n秒内再次触发事件，则重新计时，最终只执行

一次函数

• 提高性能的场景（需要「最后一次触发」执行的场景）：

1. 搜索框输入联想：用户在搜索框输入时，无需每输入一个字符就发送请求，而是等用户输入停

止后（如500ms内无输入），再发送联想请求，减少接口请求次数，减轻服务器压力

1. 窗口大小调整（resize）：用户调整浏览器窗口大小时，会高频触发 resize 事件，使用防

抖可在窗口调整完成后，只执行一次布局调整逻辑，减少回流次数

1. 文本编辑器自动保存：等用户停止输入后，再执行自动保存操作，避免频繁保存导致的性能开

销

1. 按钮防重复点击：避免用户快速点击按钮（如提交表单），导致多次触发接口请求，使用防抖

可保证只执行一次提交逻辑

节流（Throttle）

• 核心逻辑：触发事件后，每隔n秒只执行一次函数，无论事件触发多频繁，保证函数在固定时间间

隔内只执行一次

• 提高性能的场景（需要「间隔执行」的场景，保证执行频率稳定）：

1. 鼠标移动（mousemove）：如拖拽元素、鼠标悬浮跟随效果，高频触发 mousemove 事件，

使用节流可稳定执行跟随逻辑，提升流畅度

1. 高频点击按钮：如点赞按钮、刷新按钮，用户快速点击时，使用节流可限制点击频率（如1秒内

只能点击一次），避免频繁触发接口请求

1. 视频播放进度条拖拽：拖拽进度条时，高频触发事件，使用节流可稳定更新播放时间，减少性

能开销

13. 常见图片优化操作及性能提升方案

图片是前端静态资源中体积占比最高的部分，图片优化的核心是「在保证视觉效果的前提下，最小化图片体积，减少加载时间」，常见优化操作如下：

1. 选择合适的图片格式

◦ 静态图片：优先使用 WebP/Avif 格式（压缩率远高于 JPG/PNG，相同视觉效果下体积更小），

兼容低版本浏览器时可提供 JPG/PNG 降级方案

▪ WebP：支持有损压缩和无损压缩，静态图片体积比 JPG 小 25%-35%，比 PNG 小 50% 左

右

▪ Avif：压缩率比 WebP 更高，体积更小，但兼容性略差于 WebP

▪ JPG：适合色彩丰富的图片（如摄影图、宣传图），有损压缩，体积较小

▪ PNG：适合透明图片、图标、线条图（无损压缩，支持透明通道）

▪ SVG：适合矢量图（图标、logo、简单图形），无限放大不失真，体积小

◦ 动态图片：优先使用 WebM 格式（体积比 GIF 小 50% 以上），兼容低版本浏览器时使用 GIF

1. 图片压缩（无损/有损压缩）

◦ 有损压缩：在可接受的视觉损耗范围内，降低图片质量，减小体积（如 JPG 质量设为

70%-80%，视觉效果无明显差异，体积大幅减小）

◦ 无损压缩：不损失图片质量，通过优化图片编码方式减小体积（如 PNG 图片压缩）

◦ 工具推荐：在线压缩（TinyPNG、CompressJPG）、构建时压缩（webpack 的 image-

webpack-loader）

1. 使用合适的图片尺寸，避免大图小用

◦ 避免加载远大于显示尺寸的图片（如显示尺寸为 200x200px，却加载 1000x1000px 的图

片），造成不必要的带宽浪费和加载时间

◦ 使用响应式图片：根据设备屏幕尺寸和分辨率，加载不同尺寸的图片

1. 图片懒加载（核心优化）

◦ 对非首屏图片（如下方内容图片、列表图片）使用懒加载，只有当图片即将进入可视区域时才

加载，减少首屏加载时间

◦ 实现方式：原生 loading="lazy"（简单易用，现代浏览器支持）、Intersection

Observer API（兼容性更好，可自定义逻辑）

Code block

1<!-- 原生懒加载 --> 2<img src="image.jpg" alt="懒加载图片" loading="lazy">

1. 使用雪碧图（CSS Sprite）

◦ 将多个小图标（如导航图标、按钮图标）合并为一张大图，通过 CSS background-

position 定位显示单个图标

◦ 优势：减少 HTTP 请求次数（多个图标只需加载一张图片），提升加载速度

1. 图片预加载（针对性使用）

◦ 对后续即将用到的图片（如下一个轮播图、跳转后的首屏图片）使用预加载，提前缓存，提升

交互流畅度

1. 使用 CDN 加速图片加载

◦ 将图片上传到 CDN 平台，利用 CDN 的边缘节点加速图片加载，减少网络延迟

1. 避免图片内联（大图片）

◦ 小图标可使用 Base64 内联（减少 HTTP 请求），但大图片不建议内联（会增加 HTML 文件体

积，影响首屏加载）

14. 性能监控工具及页面性能监控方法

常用性能监控工具

• Chrome DevTools（最常用）