浏览器控制台之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)‌。
相关推荐
課代表13 小时前
Acrobat DC 文本域表单验证中的 js 使用
javascript·正则表达式·表单验证·数据完整性·字段验证·事件对象·自定义验证
鱼樱前端13 小时前
uni-app快速入门章法(一)
前端·uni-app
uhakadotcom13 小时前
入门教程:常用的 Python 第三方库:python-logstash
后端·面试·github
zhangxuyu111813 小时前
flex布局学习记录
前端·css·学习
掘金一周13 小时前
🍏让前端去做 iPhone 的液态玻璃❓ | 掘金一周 10.2
前端·人工智能·后端
用户63879947730513 小时前
Next.js 多语言对决:next-intl vs next-i18next vs Intlayer
javascript
9号达人13 小时前
Java19 新特性详解与实践
java·后端·面试
Keepreal49613 小时前
谈谈对javascript原型链的理解以及原型链的作用
前端·javascript
itslife13 小时前
vite 源码 - 配置
前端·javascript
Keepreal49614 小时前
Typescript中type和interface的区别
前端·typescript