https://amatsuzero.github.io/LastStand/tags/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6/Recent content in 浏览器的垃圾回收机制 on Last StandHugozh-cnThu, 17 Jul 2025 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/performance/performance-003/Tue, 17 Dec 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/performance/performance-003/<p>浏览器的垃圾回收（Garbage Collection, GC）机制是前端性能优化和内存管理的重要基础。</p> <h2 id="一垃圾回收的基本概念">一、垃圾回收的基本概念</h2> <ul> <li><strong>目的</strong>：自动回收不再使用的内存，避免内存泄漏，保证浏览器性能稳定。</li> <li><strong>GC 触发</strong>：当浏览器检测到内存不足或特定条件时，启动垃圾回收过程。</li> </ul> <h2 id="二主要垃圾回收算法">二、主要垃圾回收算法</h2> <h3 id="1-标记清除mark-and-sweep">1. 标记清除（Mark-and-Sweep）</h3> <ul> <li>浏览器从**根对象（Global、执行上下文中的变量）**开始，标记所有可达对象。</li> <li>没被标记的对象被认为不可达，即不再被使用，进行回收。</li> <li>是现代 JS 引擎普遍采用的算法。</li> </ul> <h3 id="2-引用计数reference-counting">2. 引用计数（Reference Counting）</h3> <ul> <li>每个对象维护引用计数，引用增加时计数+1，引用消失时计数-1。</li> <li>计数为 0 的对象立即回收。</li> <li><strong>缺陷：无法处理循环引用</strong>，现代引擎一般不单独使用。</li> </ul> <h2 id="三垃圾回收的触发时机">三、垃圾回收的触发时机</h2> <ul> <li>内存分配达到一定阈值时自动触发。</li> <li>主动调用相关接口（如 Chrome DevTools 手动触发）。</li> <li>页面卸载时进行清理。</li> </ul> <h2 id="四内存泄漏常见原因">四、内存泄漏常见原因</h2> <ol> <li><strong>全局变量未释放</strong> 全局变量一直被引用，无法回收。</li> <li><strong>闭包导致的变量无法释放</strong> 闭包作用域内变量被外部引用。</li> <li><strong>定时器未清除</strong> <code>setInterval</code>、<code>setTimeout</code> 未正确清除，导致引用保留。</li> <li><strong>DOM 节点引用未释放</strong> JS 中持有对已删除 DOM 的引用。</li> <li><strong>事件监听未移除</strong> 绑定事件后，未及时解绑，导致内存无法回收。</li> </ol> <h2 id="五性能优化建议">五、性能优化建议</h2> <ul> <li>避免不必要的全局变量。</li> <li>使用完定时器及时清除。</li> <li>解绑不再使用的事件监听。</li> <li>谨慎使用闭包，避免无用变量持久存在。</li> <li>小心操作 DOM，及时释放引用。</li> </ul> <h2 id="常见考点">常见考点</h2> <p>面试中考察点主要包括 GC 的原理、算法、触发时机、内存泄漏原因及避免方法：</p> <ol> <li>浏览器垃圾回收的原理和常见算法？</li> <li>标记清除与引用计数的区别与优缺点？</li> <li>什么是内存泄漏？常见的内存泄漏类型？</li> <li>如何避免内存泄漏？</li> <li>JS 引擎如何判断对象是否可回收？</li> <li>浏览器中 GC 触发的时机？</li> <li>如何用 Chrome DevTools 监测内存泄漏？</li> <li>事件监听和闭包如何导致内存泄漏？</li> </ol>