`

javascript内存管理

JavaScriptIEOpera浏览器Ajax 
阅读更多

当一个系统不能正确的管理他的内存分配时，这个系统就存在内存泄漏 ，这对系统来说是一个 bug 。内存泄漏 的现象可以有程序调用失败、执行减慢等。

微软的 Internet Explorer 就存在一系列的内存泄漏 ，其中最严重的就算是执行 Jscript 时产生的泄漏。当一个 DOM 对象包涵有一个 JavaScript 对象（例如一个事件处理函数）的引用，同时如果这个 JavaScript 对象又包涵该 DOM 对象，那么这个循环引用就形成了。这种结构本质上没有问题。此时，因为该 DOM 对象和这个事件处理函数并没有别的引用存在，那么垃圾回收器（一种自动的内存资源管理器）本应该把它们都回收点，并内存释放。 JavaScript 的垃圾回收器能够检测到这种循环引用，并不会对他产生困惑。但是不幸的是， IE DOM 的内存并不能被 Jscript 所管理。他有他自己的内存管理系统，然而这套系统并不知道循环引用，使得一切都变得混乱。这就导致了，当循环引用形成的时候，内存释放工作不能完成，也就是产生了内存泄漏 。长时间的内存泄漏就将产生内存的匮乏，使得浏览器因缺乏必要内存而崩溃？ 。

我们可以来演示一下。在第一段程序 -question1 中，我们将动态创建以 10 个为一组共计 10000 个的 DOM 元素（ <span> ），创建 10 个然后删除在创建 10 个，如此循环。你在运行这段程序时打开 Windows 任务管理器，就可以观察到页面运行时 PF( 虚拟内存 ) 使用率一直保持不变。 PF 使用率的变化可以视为内存分配是否无效的指标。

 

Question1 

<html

>


    

<head

>


        

<title

>Queue Test 1</title

>


    

</head

>


    

<body

>


        

<script

>


            

/*global setTimeout */


            

(function (limit, delay) {


                

var queue = new Array(10);


                

var n = 0;


 


                

function makeSpan(n) {


                    

var s = document.createElement('span');


                    

document.body.appendChild(s);


                    

var t = document.createTextNode(' ' + n);


                    

s.appendChild(t);


                    

return s;


                

}


 


                

function process(n) {


                    

queue.push(makeSpan(n));


                    

var s = queue.shift();


                    

if (s) {


                        

s.parentNode.removeChild(s);


                    

}


                

}


 


                

function loop() {


                    

if (n < limit) {


                    

    

process(n);


                        

n += 1;


                        

setTimeout(loop, delay);


                    

}


                

}


 


                

loop();


            

})(10000, 10);


        

</script

>


    

</body

>


</



html



>

 

接下来我们运行第二段程序 queuetest2 。除了做与 queuetest1 相同的事情以外，它还未每个元素添加了一个点击事件响应函数。在 Mozila 和 Opera 上，虚拟 PF 利用率和 queuetest1 是一样的，但是在 IE 上我们可以看见由于内存泄漏 而产生的每秒一兆的虚拟内存的稳定增量，通常这种泄露都不会被注意到。但是由于 Ajax 的日益流行，使得页面在浏览器的停留时间增长，使得问题变得常见了。

Question2

<html>

    <head><title>Queue Test 2</title>

    </head>

    <body>

        <script>

            /*global setTimeout */

            (function (limit, delay) {

                var queue = new Array(10);

                var n = 0;

 

                function makeSpan(n) {

                    var s = document.createElement('span');

                    document.body.appendChild(s);

                    var t = document.createTextNode(' ' + n);

                    s.appendChild(t);

                    s.onclick = function (e) {

                        s.style.backgroundColor = 'red';

                        alert(n);

                    };

                    return s;

                }

 

                function process(n) {

                    queue.push(makeSpan(n));

                    var s = queue.shift();

                     if (s) {

                        s.parentNode.removeChild(s);

                    }

                }

 

                function loop() {

                    if (n < limit) {

                        process(n);

                        n += 1;

                        setTimeout(loop, delay);

                    }

                }

 

                loop();

            })(10000, 10);

        </script>

    </body>

</html>

 

因为 IE 不能对循环引用进行回收，所以这个任务就落在了我们的肩上。如果我们明确的打破这个循环引用，那么 IE 就能够完成垃圾回收工作了。具微软的解释，引起内存泄漏 的原因是闭包，然而这个结论肯定是非常错误的，并且这使得微软给开发者的建议也成了错误的建议。那么通过 DOM 来打破循环引用更简单，因为实际上不可能通过 Jscript 来实现。

当我们处理完一个元素后，我们必须通过把它所有的事件处理函数制空来达到破坏循环引用的目的。我们所需要做的就是把每个事件的处理函数设为空就可以了。我们甚至可以清理函数来完成这一工作。

清理函数将保存一份 DOM 元素的引用。它将循环检测这个元素的所有属性。如果发现了时间处理函数，就把它值为空。这样就破坏了循环引用，使得内存可以被回收释放。它同样也会检测该元素的子元素，打破他们的循环引用。这个清理函数，只在 IE 中有效果，对于 Mozilla 和 Opera 都无效。不管是用 removeChild() 或者是设置 innerHTML 属性的值，都应该在删除元素之前调用清理函数。 

function purge(d) {




    

var a = d.attributes, i, l, n;






    

if (a) {






        

l = a.length;






        

for (i = 0; i < l; i += 1) {






            

n = a[i].name;






            

if (typeof d[n] === 'function') {






                

d[n] = null;






            

}






        

}






    

}






    

a = d.childNodes;






    

if (a) {






        

l = a.length;






        

for (i = 0; i < l; i += 1) {






            

purge(d.childNodes[i]);






      

  

}






    

}






}

那么我们现在来运新第3 个程序，queuetest3 ，在程序3 里，元素在被删除之前都调用了清理函数。

Question3

<html>

    <head><title>Queue Test 3</title>

    </head>

    <body>

        <p>

            Queue Test 3 adds an event handler to each span, and removes it when

finished. See <a href="http://www.crockford.com/javascript /memory/leak.html">http://www.crockford.com/javascript/memory/leak.html</a>

        </p>

        <script>

            /*global onunload, setTimeout */

            (function (limit, delay) {

                var queue = new Array(10);

                var n = 0;

 

                function makeSpan(n) {

                    var s = document.createElement('span');

                    document.body.appendChild(s);

                    var t = document.createTextNode(' ' + n);

                     s.appendChild(t);

                    s.onclick = function (e) {

                        s.style.backgroundColor = 'red';

                        alert(n);

                    };

                    return s;

                }

 

                function purge(d) {

                    var a = d.attributes, i, l, n;

                    if (a) {

                        l = a.length;

                        for (i = 0; i < l; i += 1) {

                            n = a[i].name;

                            if (typeof d[n] === 'function') {

                                d[n] = null;

                            }

                        }

                    }

                    a = d.childNodes;

                    if (a) {

                        l = a.length;

                        for (i = 0; i < l; i += 1) {

                            purge(d.childNodes[i]);

                        }

                    }

                }

 

                function process(n) {

                    queue.push(makeSpan(n));

                    var s = queue.shift();

                    if (s) {

                        purge(s);

                        s.parentNode.removeChild(s);

                    }

                }

 

                function loop() {

                     if (n < limit) {

                        process(n);

                        n += 1;

                        setTimeout(loop, delay);

                    }

                }

                onunload = function (e) {

                    purge(document.body);

                };

 

                loop();

            })(10000, 10);

        </script>

    </body>

</html>

 

更新：微软发布了该问题的补丁： 929874 。如果你有十足的信心确保你所有的用户都可以获得该更新，那么你将不再需要上面的清理函数。但不幸的是，这不可能如你所愿，所以可能清理工作在 IE6 被淘汰之前还是有必要的。

这就是 web 的天性，有清理不完的 bugs 。

分享到：
| array的理解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript内存管理相关.docx

    ### JavaScript内存管理详解 #### 一、概述 在现代编程语言中，JavaScript 是一种非常流行的脚本语言，广泛应用于Web开发。与C语言或C++这类底层语言不同，JavaScript 不需要程序员手动管理内存，而是自动地进行...

    JavaScript内存管理介绍

    JavaScript内存管理是前端开发人员必须掌握的知识之一，它关系到程序的性能和稳定性。内存管理包括内存的分配、使用和释放过程，本文将深入浅出地介绍JavaScript的内存生命周期、内存分配机制、函数调用的内存分配，...

    JavaScript 内存机制分析

    #### JavaScript内存管理概述 JavaScript的内存管理主要包括两个关键部分：内存分配和垃圾回收。 - **内存分配**：在变量或对象创建时分配内存。 - **垃圾回收**：当变量或对象不再被使用时，自动释放其占用的内存...

    javascript内存管理详细解析

    JavaScript内存管理是编程中的关键环节，它涉及到程序的性能和稳定性。JavaScript是一种高级语言，其内存管理由垃圾回收机制自动处理，但理解这一过程对优化代码和避免内存泄漏至关重要。 内存生命周期在所有编程...

    sIEve-0.0.8-javascript内存泄漏检测工具

    附带的ABCJava.Com.url可能是一个链接，指向有关sIEve的更多信息或者JavaScript内存管理的相关教程和资源，这对于深入理解和解决问题非常有帮助。 总的来说，sIEve作为一款JavaScript内存泄漏检测工具，对于提升Web...

    javascript 内存泄漏 检测 解决 检测工具 原因分析

    JavaScript内存泄漏是一个重要的编程问题，尤其对于Web应用来说，它可能导致性能下降，用户界面响应变慢，甚至在...通过实践和学习，你可以提高自己在JavaScript内存管理方面的技能，从而编写出更加健壮和高效的代码。

    javascript错误的认识不用关心内存管理.docx

    ### JavaScript 错误认知：无需关注内存管理 #### 前言 JavaScript 是一种广泛使用的高级编程语言，尤其适用于 Web 开发。随着其应用领域的不断扩展，开发者们对其特性的理解也日益深入。然而，有一种常见的误解是...

    javascript内存浅析

    JavaScript是Web开发中不可或缺的一部分，它负责处理网页的动态交互。深入理解JavaScript的...在阅读“javascript内存浅析”这篇博客后，相信你将对JavaScript内存管理有更深入的理解，并能更好地应对相关的编程挑战。

    javascript的内存管理详解

    JavaScript的内存管理是其语言特性中的重要组成部分，它与低级语言如C的内存管理机制有着显著的区别。在JavaScript中，内存的分配和回收是由垃圾回收机制自动处理的，这使得开发者无需显式地去释放内存，从而降低了...

    内存javascript脚本

    ### JavaScript内存管理机制 #### 自动内存管理 JavaScript采用自动内存管理机制，这意味着开发者无需手动分配或释放内存。这一特性简化了编程过程，但也可能导致一些难以察觉的问题，比如内存泄漏。 #### 垃圾...

    内存泄漏检测工具

    1. **JavaScript内存管理** JavaScript的内存管理主要依赖于垃圾回收机制（Garbage Collection, GC）。当一个对象不再有引用指向它时，GC会自动回收这部分内存。然而，在某些情况下，开发者可能无意间创建了全局...

    理解Javascript内存分配原理

    ### 理解JavaScript内存分配原理 #### 一、引言 在JavaScript编程中，内存管理是一个非常重要的概念。理解JavaScript如何处理内存分配对于优化代码性能、避免内存泄漏等问题至关重要。本文将详细介绍JavaScript中的...

    Javascript内存泄露

    ### JavaScript内存泄露详解 #### 一、什么是...综上所述，理解JavaScript的内存管理机制对于避免内存泄露至关重要。开发者需要熟悉垃圾回收机制、闭包和循环引用的概念，并采取适当措施来预防内存泄露的发生。

    JavaScript基础教程（pdf版）

    闭包是理解JavaScript内存管理的关键，它允许函数访问和修改外部作用域的变量。异步编程则处理JavaScript的非阻塞特性，使得代码在等待I/O操作时不会阻塞主线程。事件和DOM操作则让你能够与用户交互，动态更新网页...

    脚本IE内存泄露检测.rar

    标题中的“脚本IE内存泄露检测.rar”表明这是一个专门针对Internet Explorer浏览器的JavaScript内存泄漏检测工具。...通过理解JavaScript内存管理机制和利用专业工具，开发者能更有效地避免和修复内存泄漏问题。

    高性能JavaScript

    垃圾回收机制是JavaScript内存管理的关键，不合理的内存分配和未释放的引用可能导致内存泄漏。书中会讲解如何编写低内存消耗的代码，以及如何使用Chrome DevTools等工具进行性能分析和内存检测。 另外，DOM操作是...

    JavaScript对内存分配及管理机制详细解析

    你可能听说过JAVA、.NET、PHP这些语言有垃圾回收的内存管理机制，但是很少会听到JavaScript也有自己的内存管理机制，JavaScript同样有着类似的垃圾回收功能。本文主要讲述了JavaScript的垃圾回收原理和具体的过程。 ...

    JavaScript内存统计专题图示例

    JavaScript内存统计专题图是一种在Web应用中用于可视化和分析数据集的方法，特别是在GIS（地理信息系统）领域中，SuperMap iClient JavaScript提供了强大的支持。本文将深入探讨如何利用JavaScript实现内存中的统计...

Magicbox
Global site tag (gtag.js) - Google Analytics