JavaScript中的内存释放
<p style="box-sizing: border-box; margin-right: 0; margin-bottom: 16px; margin-left: 0; line-height: 1.25; border-bottom: 1px solid rgba(234, 236, 239, 1); padding-bottom: 0.3em; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; margin-top: 0 !important"><span style="font-size: 16px">C、C++语言需要手动管理内存的分配与释放（常用方法：malloc(), calloc(), realloc()和free()等）。而JavaScript与Java、C#相似，内置了垃圾回收器，能自动管理内存的分配与释放。</span></p><h2 style="box-sizing: border-box; margin-bottom: 16px; margin-top: 24px; line-height: 1.25; border-bottom: 1px solid rgba(234, 236, 239, 1); padding-bottom: 0.3em; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">内存生命周期:</h2>
<ol style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; padding-left: 2em; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">
<li style="box-sizing: border-box">分配内存</li>
<li style="box-sizing: border-box; margin-top: 0.25em">使用分配的内存(读与写操作)</li>
<li style="box-sizing: border-box; margin-top: 0.25em">当应用程序不再需要时，释放掉已分配的内存</li>
</ol>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px"><img src="https://github.com/cucygh/js-leakage-patterns/raw/master/JavaScript%E5%86%85%E5%AD%98%E9%82%A3%E7%82%B9%E4%BA%8B/images/life-cycle.png"></p>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">虽然垃圾回收器能能自动管理内存分配、释放，但并不意味着开发者不再需要关注内存管理。因为一些不好的编码会导致内存泄露，即应用程序不再需要的内存没有被释放掉。因此了解内存管理是很重要的。</p>
<h2 style="box-sizing: border-box; margin-bottom: 16px; margin-top: 24px; line-height: 1.25; border-bottom: 1px solid rgba(234, 236, 239, 1); padding-bottom: 0.3em; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">Javascript中的内存分配</h2>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">当声明变量时，JavaScript会自动为变量分配内存</p>
<div class="highlight highlight-source-js" style="box-sizing: border-box; margin-bottom: 16px; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> numberVar = 100; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">为整数分配内存</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> stringVar = 'node simplified';<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 为字符串分配内存 </span>
<span style="color: rgba(0, 0, 255, 1)">var</span> objectVar = {a: 1}; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 为对象分配内存</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> a = ; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 为数组分配内存</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> f(a) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> a + 2<span style="color: rgba(0, 0, 0, 1)">;
} </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 为函数分配内存 </span></pre>
</div>
</div>
<h2 style="box-sizing: border-box; margin-bottom: 16px; margin-top: 24px; line-height: 1.25; border-bottom: 1px solid rgba(234, 236, 239, 1); padding-bottom: 0.3em; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">GC(Garbage collection)</h2>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">垃圾回收是追踪并释放应用程序不再使用的内存过程。垃圾回收器通过算法来实现追踪应用程序不再使用的内存。主要涉及的垃圾回收算法如下：</p>
<ul style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; padding-left: 2em; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">
<li style="box-sizing: border-box">Reference-counting garbage collection（引用计数）</li>
<li style="box-sizing: border-box; margin-top: 0.25em">Mark-and-sweep algorithm（标记清除）</li>
</ul>
<h3 style="box-sizing: border-box; margin-bottom: 16px; margin-top: 24px; font-size: 1.25em; line-height: 1.25; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">Reference-counting garbage collection（引用计数）</h3>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">引用计数算法是一种最基础的垃圾回收算法，当一个对象的引用数为零时，会被自动回收。该算法将一个对象的引用数为0时视为应用程序不再需要的内存。</p>
<div class="highlight highlight-source-js" style="box-sizing: border-box; margin-bottom: 16px; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">
<div class="cnblogs_code">
<pre>!<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> o1 = {a: {b: 2}},<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 两个对象被创建。假如分别用A:{a: {b: 2}}，B:{b: 2}表示，对象B被对象A的属性a引用，对象A被赋值给变量o1。A和B的引用数都为1，因此不能被回收。</span>
o2 = o1; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 将对象A赋给变量o2。此时A引用数为2，B引用数1。</span>
o1 = 1;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 将变量o1对对象A引用切断。此时A引用数为1，B引用数1。</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> oa = o2.a; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 将对象B赋值给变量oa。此时A引用数为1，B引用数2。</span>
o2 = 'foo'; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 将变量o2对对象A引用切断。此时A引用数为0，B引用数1。因为对象A的a属性被变量oa引用，因此对象A不能被释放。</span>
oa = <span style="color: rgba(0, 0, 255, 1)">null</span>; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 将变量oa对对象B引用切断。此时A引用数为0，B引用数0。A与B会被回收。</span>
}()</pre>
</div>
</div>
<h4 style="box-sizing: border-box; margin-bottom: 16px; margin-top: 24px; font-size: 16px; line-height: 1.25; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">引用计数的限制：循环引用</h4>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">循环引用存在一个限制。如下实例，两个对象相互引用，形成一个循环引用。正常情况下，当函数执行完后，对应的内存会被释放掉。而<span style="box-sizing: border-box; font-weight: 600">引用计数算法</span>会将循环引用对象的引用数都视为至少为1，因此不能被回收。</p>
<div class="highlight highlight-source-js" style="box-sizing: border-box; margin-bottom: 16px; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> f() {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> o =<span style="color: rgba(0, 0, 0, 1)"> {};
</span><span style="color: rgba(0, 0, 255, 1)">var</span> o2 =<span style="color: rgba(0, 0, 0, 1)"> {};
o.a </span>= o2; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> o references o2</span>
o2.a = o; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> o2 references o</span>
<span style="color: rgba(0, 0, 255, 1)">return</span> 'azerty'<span style="color: rgba(0, 0, 0, 1)">;
}
f();</span></pre>
</div>
</div>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px"><img src="https://github.com/cucygh/js-leakage-patterns/raw/master/JavaScript%E5%86%85%E5%AD%98%E9%82%A3%E7%82%B9%E4%BA%8B/images/cycle.png"></p>
<h4 style="box-sizing: border-box; margin-bottom: 16px; margin-top: 24px; font-size: 16px; line-height: 1.25; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">常见问题</h4>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">IE6-7的DOM对象是基于计数引用算法进行垃圾回收的。而循环引用通常会导致内存泄露：</p>
<div class="highlight highlight-source-js" style="box-sizing: border-box; margin-bottom: 16px; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)"> div;
window.onload </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
div </span>= document.getElementById('myDivElement'<span style="color: rgba(0, 0, 0, 1)">);
div.circularReference </span>=<span style="color: rgba(0, 0, 0, 1)"> div;
div.lotsOfData </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> Array(10000).join('*'<span style="color: rgba(0, 0, 0, 1)">);
};</span></pre>
</div>
</div>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">如上述实例，DOM元素div通过自身的“circularReference”属性循环引用自己。如果没有显式将该属性删除或设为null，计数引用垃圾回收器会始终持有至少一个引用。即使DOM元素从DOM树种移除，DOM元素的内存会一直存在。如果DOM元素持有一些数据（如实例中“lotsData”属性），该数据对应的内存也无法被释放。了解更多参考--->IE<8循环引用导致的内存泄露</p>
<h3 style="box-sizing: border-box; margin-bottom: 16px; margin-top: 24px; font-size: 1.25em; line-height: 1.25; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">Mark-and-sweep algorithm（标记清除）</h3>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">该算法将“对象不再需要”的定义简化为“对象不可到达”。 这个算法假设有一组被称为roots的对象（在JavaScript中，root就是全局对象）。垃圾回收器会定期地从这些roots开始，查找所有从根开始引用的对象，然后再查找这些对象引用的对象……。从roots开始，垃圾回收器会查找所有可到达对象，并回收不可到达的对象。</p>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">为了确定对象是否需要，该算法要确定对象是否可到达。由如下步骤组成：</p>
<ol style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; padding-left: 2em; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">
<li style="box-sizing: border-box">垃圾回收器会创建一组roots，roots通常是持有引用的全局变量。在JavaScript中，window对象就可作为root的全局变量。</li>
<li style="box-sizing: border-box; margin-top: 0.25em">垃圾回收器会检查所有的roots并标记为活跃状态。然后递归遍历所有的子变量。只要从root不能到达的都被标记为垃圾。</li>
<li style="box-sizing: border-box; margin-top: 0.25em">所有没有被标记为活跃状态的内存块都被视为垃圾。垃圾回收器就可以释放这部分内存并把释放的内存返回给操作系统。</li>
</ol>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px"><img src="https://github.com/cucygh/js-leakage-patterns/raw/master/JavaScript%E5%86%85%E5%AD%98%E9%82%A3%E7%82%B9%E4%BA%8B/images/mark-sweep.gif"></p>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">这个算法比引用计数算法更优，因为对于引用计数算法“零引用的对象”总是不可到达的，但反之则不一定，如循环引用。而<span style="box-sizing: border-box; font-weight: 600">标记清除算法</span>不存在循环引用的问题。</p>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">截至2012年，所有现代浏览器都内置了<span style="box-sizing: border-box; font-weight: 600">标记清除垃圾回收器</span>。在过去几年里所有对JavaScript垃圾回收算法的改进（generational/incremental/concurrent/parallel garbage collection）都是基于<span style="box-sizing: border-box; font-weight: 600">标记清除算法</span>来实现的，但并没有改变<span style="box-sizing: border-box; font-weight: 600">标记清除算法</span>本身和它对“对象不再需要”定义的简化。</p>
<h4 style="box-sizing: border-box; margin-bottom: 16px; margin-top: 24px; font-size: 16px; line-height: 1.25; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">循环引用不再是问题</h4>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">前面循环引用的实例中，在函数执行完后，两个对象不再被全局对象可访问的对象引用。因此这两个对象被垃圾回收器标记为不可到达，接着被回收掉。 <img src="https://github.com/cucygh/js-leakage-patterns/raw/master/JavaScript%E5%86%85%E5%AD%98%E9%82%A3%E7%82%B9%E4%BA%8B/images/no-cycle.png"></p>
<h4 style="box-sizing: border-box; margin-bottom: 16px; margin-top: 24px; font-size: 16px; line-height: 1.25; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">限制：需要明确无法到达的对象</h4>
<p style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">对于这个限制，实践中很少遇见，所以开发者不太会去关心垃圾回收机制。</p>
<h2 style="box-sizing: border-box; margin-bottom: 16px; margin-top: 24px; line-height: 1.25; border-bottom: 1px solid rgba(234, 236, 239, 1); padding-bottom: 0.3em; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">参考文章：</h2>
<ul style="box-sizing: border-box; margin-bottom: 16px; margin-top: 0; padding-left: 2em; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px">
<li style="box-sizing: border-box">Memory Management And Garbage Collection In Javascript</li>
<li style="box-sizing: border-box; margin-top: 0.25em">Memory Management</li>
<li style="box-sizing: border-box; margin-top: 0.25em">How JavaScript works: memory management + how to handle 4 common memory leaks</li>
<li style="box-sizing: border-box; margin-top: 0.25em">Memory Management Reference</li>
</ul>
<p> </p>
<p>原文地址： https://github.com/cucygh/js-leakage-patterns/blob/master/JavaScript%E5%86%85%E5%AD%98%E9%82%A3%E7%82%B9%E4%BA%8B/JavaScript%E5%86%85%E5%AD%98%E9%82%A3%E7%82%B9%E4%BA%8B.md</p><br><br>
来源：https://www.cnblogs.com/yuanyiming/p/11186034.html
頁:
[1]