浏览器控制台之memory

浏览器控制台 Memory 面板详细使用示例


1. 堆快照分析闭包泄漏

  • 场景‌:单页应用中,切换页面后内存持续增长,怀疑闭包引用未释放。

  • 操作步骤‌:

    1. 打开 Chrome 开发者工具 > Memory 面板,点击 ‌Heap snapshot‌ 拍摄初始快照‌。
    2. 执行页面跳转操作后,再次拍摄快照。
    3. 对比两次快照,筛选 Closure 类型对象,观察未被释放的闭包‌。
  • 代码示例‌:

javascript 复制代码
function createLeak() {
  const data = new Array(100000).fill('leak'); // 大数组被闭包引用
  return () => console.log(data); // 闭包未释放,导致 data 无法回收
}
const leakedFunc = createLeak();
// 即使不再使用 leakedFunc,内存仍被占用
  • 优化 ‌:手动解除引用(如 leakedFunc = null)‌。

2. 时间线记录高频操作内存溢出

  • 场景‌:频繁操作动画导致页面卡顿,需定位内存分配瓶颈。

  • 操作步骤‌:

    1. 在 Memory 面板选择 ‌Allocation instrumentation on timeline‌,点击开始录制‌。
    2. 执行高频操作(如快速滚动列表、频繁触发动画)。
    3. 停止录制后,观察时间线上的蓝色竖条(内存分配事件),定位到频繁分配临时对象的函数‌。
  • 代码示例‌:

javascript 复制代码
function renderFrame() {
  const tempData = new Array(1000).fill({ x: Math.random() }); // 频繁创建临时对象
  // ...渲染逻辑
}
setInterval(renderFrame, 16); // 60FPS 动画
  • 优化‌:改用对象池复用临时对象‌。

3. DOM 节点未销毁导致内存残留

  • 场景‌:动态弹窗关闭后,DOM 节点未被移除,内存占用持续增加。

  • 操作步骤‌:

    1. 使用 ‌Heap snapshot‌ 拍摄弹窗打开前后的快照‌。
    2. 筛选 Detached DOM tree(已脱离 DOM 树但未被回收的节点),检查弹窗相关 div 节点‌。

代码示例‌:

javascript 复制代码
function openModal() {
  const modal = document.createElement('div');
  document.body.appendChild(modal);
  // 关闭时未执行 modal.remove()
}

4. 事件监听器未解绑引发泄漏

  • 场景 ‌:全局 resize 事件监听未移除,页面切换后回调函数仍占用内存。

  • 操作步骤‌:

    1. 在堆快照中搜索 EventListener 对象‌。
    2. 对比页面切换前后的监听器数量,定位未解绑的事件‌。
javascript 复制代码
window.addEventListener('resize', handleResize);
// 页面卸载时未执行 removeEventListener
  • 优化 ‌:在组件销毁或页面卸载时调用 removeEventListener‌。

5. 分析大文件上传内存占用

  • 场景‌:上传 1GB 文件时页面卡顿,需确认内存分配是否合理。

  • 操作步骤‌:

    1. 使用 ‌Allocation sampling‌ 录制文件分片上传过程‌。
    2. 查看统计结果,分析 ArrayBufferBlob 对象的分配频率和大小‌。
  • 优化‌:

    • 分片上传(如每片 2MB)‌25。
    • 上传完成后主动释放内存:file = null; URL.revokeObjectURL(url)‌。
相关推荐
举个栗子dhy1 分钟前
第一章、React + TypeScript + Webpack项目构建
前端·javascript·react.js
大杯咖啡5 分钟前
localStorage与sessionStorage的区别
前端·javascript
RaidenLiu17 分钟前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost17 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost19 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost26 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪27 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在34 分钟前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方36 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
炒米233339 分钟前
【Array】数组的方法
javascript