浏览器控制台之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)‌。
相关推荐
磊叔的技术博客2 分钟前
LLM 系列(六):模型推理篇
人工智能·面试·llm
岁忧4 分钟前
(LeetCode 面试经典 150 题 ) 58. 最后一个单词的长度 (字符串)
java·c++·算法·leetcode·面试·go
前端(从入门到入土)11 分钟前
前端请求后端服务403(Invalid CORS request)
前端
蓝天白云下遛狗38 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
万少3 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端