VIP20
本课程属于：039-模块化架构渲染瓶颈剖析 移动端与Android应用开发 · 共 20 门相关课程，组合学习更完整。
查看所属VIP全部课程 →
← 返回所属目录 咨询 / 购买

渲染卡顿问题中内存泄漏排查实战

共计 30 章节
点击此处阅读海量试读课程：100+行业、1000+细分领域
01
内存泄漏基础
什么是内存泄漏 · 内存生命周期（分配→使用→释放） · 常见泄漏类型
内存泄漏基础什么是内存泄漏
02
渲染卡顿现象
帧率掉帧 · 页面响应迟钝 · 动画抖动
渲染卡顿现象帧率掉帧
03
Chrome DevTools 内存面板入门
Memory 面板介绍 · Heap Snapshot · Allocation Timelin…
ChromeDevTools
04
使用 Performance 录制定位卡顿
Record 录制主线程活动 · 火焰图解读 · 长任务（Long Task）识别
Performance使用
05
Heap Snapshot 深度分析
快照对比 · 保留路径（Retaining Pat… · 浅拷贝与深拷贝
HeapSnapshot
06
Allocation Profiler 定位泄漏来源
录制分配时间线 · 过滤大对象 · 找到频繁分配的位置
AllocationProfiler
07
JavaScript 闭包导致的泄漏
闭包原理 · 未释放的闭包变量 · 排查方法（保留路径检查）
JavaScript闭包导致的泄漏
08
DOM 引用泄漏
元素被 JS 持有 · 删除 DOM 后仍被引用 · WeakRef 救场
DOM引用泄漏
09
全局变量泄漏
意外挂载到 window · 未声明的变量 · 严格模式防范
全局变量泄漏window
10
定时器与回调泄漏
setInterval 不清除 · 事件监听器未移除 · requestAnimationFr…
定时器回调泄漏
11
分离 DOM 节点泄漏
元素被移除但 JS 仍持有 · removeChild 后忘记置空引…
DOM分离
12
事件监听器泄漏
addEventListener 未… · 匿名函数无法移除 · 节流/防抖中的泄漏
事件监听器泄漏addEventList…
13
Canvas / WebGL 泄漏
纹理未释放 · 渲染循环中不断创建对象 · 帧缓冲区泄漏
CanvasWebGL
14
React 框架中的内存泄漏
useEffect 未清理副作用 · 全局状态管理引用 · 组件卸载后仍执行异步
React框架
15
Vue 框架中的内存泄漏
watch 未取消 · $refs 残留 · 第三方实例未销毁
Vue框架
16
第三方库 / 插件泄漏
Chart.js · ECharts · 动画库等实例未销毁
第三方库插件泄漏
17
使用 weakMap / weakSet 管理弱引用
弱引用与强引用区别 · 适用场景 · 避免泄漏模式
weakMapweakSet
18
FinalizationRegistry 与 WeakRef 高级用法
注册回调 · 清理时机 · 实际应用案例
Finalization…WeakRef
19
内存泄漏检测工具
Why Did You Render · React DevTools pro… · Chrome Memory 扩展
内存泄漏检测工具Why
20
单元测试中的内存泄漏检测
Jest / Mocha 下检测未清… · 监听器 · 使用 expect(leak).to…
单元测试内存泄漏检测
21
CI/CD 集成内存检测
Puppeteer 抓取内存快照 · Lighthouse CI 性能预算 · 阈值报警
CI/CD集成内存检测
22
线上监控方案
PerformanceObserve… · measureMemory API · Sentry 内存错误上报
线上监控方案PerformanceO…
23
实战案例一
无限滚动列表导致内存暴涨（图片未释放 · DOM 堆积 + 闭包泄漏）
实战案例一无限滚动列表导致…
24
实战案例二
WebSocket 重连导致事件重复…
实战案例二WebSocket
25
实战案例三
大型表格组件筛选卡顿（全局变量 +…
实战案例三大型表格组件筛选…
26
卡顿与泄漏的联合排查流程
先用 Performance 确定卡… · 再用 Memory 定位泄漏
卡顿泄漏的联合排查流…
27
修复策略与代码重构技巧
懒加载 · 虚拟列表 · 对象池
修复策略代码重构技巧
28
内存泄漏预防最佳实践
代码评审 checklist · lint 规则（eslint-plu… · 团队规范
内存泄漏预防最佳…checklist
29
从浏览器底层看内存
V8 垃圾回收机制（分代回收 · 增量标记 · 空闲时间回收）与泄漏的关系
从浏览器底层看内…V8
30
总结与展望
建立性能意识 · 持续监控 · 工具链建设
建立性能意识持续监控