1. 内存泄漏与渲染卡顿：问题背景与课程目标

说起内存泄漏，很多前端同学第一反应是“哦，就是闭包没释放嘛”。但真到了线上，页面越用越卡，滚动像踩泥巴，点击要等两三秒才有反应——这个时候你再回头排查，会发现事情远没那么简单。

我入行第三年，第一次独立负责一个后台仪表盘项目。上线一周，用户投诉说“页面像幻灯片”。我打开性能面板一看，内存占用曲线从300MB一路飙到1.2GB，然后整个浏览器卡死。那天我加班到凌晨三点，最后定位到一个定时器里没清理的DOM引用。嗯，从那以后，我对内存泄漏有了刻骨铭心的认识。

1.1 什么是内存泄漏？为什么会引起渲染卡顿？

内存泄漏，说白了就是程序申请了一块内存，用完之后不还回去。JavaScript的垃圾回收机制（GC）会定期扫描，但一旦有「不可达」之外的原因让引用链还连着，那这块内存就永远收不回来了。

你想想看，内存泄漏引起渲染卡顿的过程是这样的：

1. 内存不断增长 —— 泄漏的对象越积越多，堆空间被慢慢填满。
2. GC 频繁触发 —— 内存吃紧时，V8 引擎会反复执行垃圾回收，而 GC 是「Stop The World」的，回收期间主线程暂停，所有操作都等着。
3. 帧率暴跌 —— 一次 GC 可能耗时几十甚至几百毫秒，如果你的刷新率目标是 60fps（每帧 16.6ms），那么一次 GC 就能卡掉好几帧。
4. 用户体验崩坏 —— 用户感受就是「卡顿」、「掉帧」、「越用越慢」。

1.2 我遇到过的典型案例

这里列几个我在项目里亲手抓过的泄漏场景，都有点儿代表性：

场景	泄漏原因	表现
长列表无限滚动	滚动的 DOM 元素未卸载，且绑定的事件未移除	滚动越久越卡，内存曲线阶梯上升
定时器未清除	setInterval/setTimeout 回调里引用了外部变量	页面最小化再打开，内存突增
全局缓存对象	Map/Array 只增不删，缓存命中率低	操作几次后，响应延迟明显
事件监听泄漏	addEventListener 挂在元素上，但元素被移除时没移除监听	反复打开关闭弹窗，内存持续上升
闭包隐式引用	函数内部保持了对大对象的外部引用	内存无明显暴增，但 GC 次数异常高

我个人习惯是把这些常见模式整理成一个检查清单，每次遇到卡顿排查时，先过一遍清单。这比从头瞎猜快得多。

1.3 本课程能帮你解决什么问题？

这个教程不是讲理论，是讲实战。你学完之后应该能做到这些：

• 定位泄漏 —— 用 Chrome DevTools 的 Memory 面板、Performance 面板准确找到泄漏对象和引用链。
• 理解原理 —— 搞懂 V8 的垃圾回收机制，知道什么对象会被判为「泄漏」。
• 修复常见模式 —— 定时器、事件监听、闭包、DOM引用、全局缓存……每个都有标准解法。
• 预防复发 —— 在写代码时就避开那些容易泄漏的坑，配合自动化工具做持续监控。

我之前带过一个团队，大家看完这套东西之后，线上性能问题减少了80%。说白了，大部分泄漏就那么几种套路，你把它摸透了，就没什么可怕的。

1.4 知识体系总览

下面这张图是整个课程的知识框架，你可以把它当作路线图。每次学完一节，回来看看自己走到了哪一步。

1.5 学习前的准备

在跟着课程走之前，建议你准备好下面几样东西：

• 一个可调试的测试项目 —— 随便一个带复杂交互的 React/Vue 项目就行，甚至原生 JS 都可以。
• Chrome 浏览器（最新版） —— 我们大部分调试都会用到 DevTools。
• Node.js 10+ —— 如果需要跑一些 CLI 检测工具。
• 记笔记的习惯 —— 我个人喜欢用 Notion 或者飞书文档，每章整理一个 Checklist。

你可能会问：「我已经会用 DevTools 了，还有必要学这个吗？」我的看法是，会用和会「系统性地排查」是两码事。我以前也会看内存面板，但面对一张堆快照时只知道看数字大小，不知道该看什么引用链。直到我搞懂了背后的 GC 算法和对象图遍历，才真正可以「指哪打哪」。