浏览器控制台之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)‌。
相关推荐
excel1 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子31 分钟前
Webpack 5模块联邦
前端·javascript·面试
前端双越老师31 分钟前
为何前端圈现在不关注源码了?
面试·前端框架·源码
玲小珑33 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了34 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆41 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug