关于ie6的DOM JScript内存泄漏介绍

最新推荐文章于 2024-09-22 11:17:00 发布
最新推荐文章于 2024-09-22 11:17:00 发布
阅读量73 收藏
点赞数
文章标签： javascript ViewUI
ie6的js实现是基于JScript和DOM ActiveX各种分离部件实现的，所以回收内存自然有些问题，下面简单介绍下内存泄漏
例一
Js代码
  1. <html>  
  2.     <head><title>Queue Test 2</title>  
  3.     </head>  
  4.     <body>  
  5.         <script>  
  6.             /*global setTimeout */  
  7.             (function (limit, delay) {  
  8.                 var queue = new Array(10);  
  9.                 var n = 0;  
  10.   
  11.                 function makeSpan(n) {  
  12.                     var s = document.createElement('span');  
  13.                     document.body.appendChild(s);  
  14.                     var t = document.createTextNode(' ' + n);  
  15.                     s.appendChild(t);  
  16.                     return s;  
  17.                 }  
  18.   
  19.                 function process(n) {  
  20.                     queue.push(makeSpan(n));  
  21.                     var s = queue.shift();  
  22.                     if (s) {  
  23.                         s.parentNode.removeChild(s);  
  24.                     }  
  25.                 }  
  26.   
  27.                 function loop() {  
  28.                     if (n < limit) {  
  29.                         process(n);  
  30.                         n += 1;  
  31.                         setTimeout(loop, delay);  
  32.                     }  
  33.                 }  
  34.   
  35.                 loop();  
  36.             })(10000, 10);  
  37.         </script>  
  38.     </body>  
  39. </html>  
<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);
                    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>

在ie6上面执行毫无问题，没有泄露，最多10个span,多了就remove,DOM和JScript没有交叉

例二

Js代码
  1. <html>  
  2.     <head><title>Queue Test 2</title>  
  3.     </head>  
  4.     <body>  
  5.   
  6.         <script>  
  7.             /*global setTimeout */  
  8.             (function (limit, delay) {  
  9.                 var queue = new Array(10);  
  10.                 var n = 0;  
  11.   
  12.                 function makeSpan(n) {  
  13.                     var s = document.createElement('span');  
  14.                     document.body.appendChild(s);  
  15.                     var t = document.createTextNode(' ' + n);  
  16.                     s.appendChild(t);  
  17.                     s.onclick = function (e) {  
  18.                         s.style.backgroundColor = 'red';  
  19.                         alert(n);  
  20.                     };  
  21.                     return s;  
  22.                 }  
  23.   
  24.                 function process(n) {  
  25.                     queue.push(makeSpan(n));  
  26.                     var s = queue.shift();  
  27.                     if (s) {  
  28.                         s.parentNode.removeChild(s);  
  29.                     }  
  30.                 }  
  31.   
  32.                 function loop() {  
  33.                     if (n < limit) {  
  34.                         process(n);  
  35.                         n += 1;  
  36.                         setTimeout(loop, delay);  
  37.                     }  
  38.                 }  
  39.   
  40.                 loop();  
  41.             })(10000, 10);  
  42.         </script>  
  43.     </body>  
  44. </html>  
<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>

执行时候，打开任务管理器，大概每秒PF上升1M,原因是DOM元素span握有带closure的匿名函数，导致匿名函数空间不能释放

例三
Js代码
  1. <html>  
  2.     <head><title>Queue Test 2</title>  
  3.     </head>  
  4.     <body>  
  5.         <p>  
  6.             Queue Test 2 adds an event handler to each span. See <a href="http://www.crockford.com/javascript/memory/leak.html">http://www.crockford.com/javascript/memory/leak.html</a>  
  7.         </p>  
  8.         <script>  
  9.             /*global setTimeout */  
  10.             (function (limit, delay) {  
  11.                 var queue = new Array(10);  
  12.                 var n = 0;  
  13.   
  14.                 function makeSpan(n) {  
  15.                     var s = document.createElement('span');  
  16.                     document.body.appendChild(s);  
  17.                     var t = document.createTextNode(' ' + n);  
  18.                     s.appendChild(t);  
  19.                     s.onclick = function (e) {  
  20.                         s.style.backgroundColor = 'red';  
  21.                         alert(n);  
  22.                     };  
  23.                     return s;  
  24.                 }  
  25.   
  26.                 function process(n) {  
  27.                     queue.push(makeSpan(n));  
  28.                     var s = queue.shift();  
  29.                     if (s) {  
  30.                     s.οnclick=null;  
  31.                         s.parentNode.removeChild(s);  
  32.                     }  
  33.                 }  
  34.   
  35.                 function loop() {  
  36.                     if (n < limit) {  
  37.                         process(n);  
  38.                         n += 1;  
  39.                         setTimeout(loop, delay);  
  40.                     }  
  41.                 }  
  42.   
  43.                 loop();  
  44.             })(10000, 10);  
  45.         </script>  
  46.     </body>  
  47. </html>  
<html>
    <head><title>Queue Test 2</title>
    </head>
    <body>
        <p>
            Queue Test 2 adds an event handler to each span. See <a href="http://www.crockford.com/javascript/memory/leak.html">http://www.crockford.com/javascript/memory/leak.html</a>
        </p>
        <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.οnclick=null;
                        s.parentNode.removeChild(s);
                    }
                }

                function loop() {
                    if (n < limit) {
                        process(n);
                        n += 1;
                        setTimeout(loop, delay);
                    }
                }

                loop();
            })(10000, 10);
        </script>
    </body>
</html>

手动将带closure的匿名函数null后，再remove,内存无泄漏，最后有一purge函数，为Douglas Crockford所写
Js代码
  1. function purge(d) {  
  2.     var a = d.attributes, i, l, n;  
  3.     if (a) {        l = a.length;  
  4.         for (i = 0; i < l; i += 1) {  
  5.             n = a[i].name;  
  6.             if (typeof d[n] === 'function') {  
  7.                 d[n] = null;  
  8.             }  
  9.         }  
  10.     }  
  11.     a = d.childNodes;  
  12.     if (a) {  
  13.         l = a.length;  
  14.         for (i = 0; i < l; i += 1) {  
  15.             purge(d.childNodes[i]);  
  16.         }  
  17.     }  
  18. }  
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]);
        }
    }
}

入门介绍帖，很可能在ie6打完hotfix后测试结果不一样
weixin_34326429
关注
总结JavaScript在IE9之前版本中内存泄露问题
10-18
JavaScript在IE9之前的版本中，内存管理机制与现代浏览器有所不同，导致了一些特有的内存泄露问题。在IE9之前，JavaScript引擎JScript使用了两种不同的垃圾回收策略：对于JScript对象使用了"标记-清除"算法，而对于...
IE内存泄露
07-30
描述中的链接指向了一篇博客文章，虽然具体内容没有给出，但可以推测博主可能分享了关于如何识别、分析和解决IE内存泄露的方法。通常，开发者会通过特定工具来定位和修复这些问题，如微软的调试工具如Visual Studio ...
偶遇IE6内存 泄露
蓝天的博客
06-12 182
今天用jwplayer写了个播放器可以实时切换播放器，用的swfobject做的flash适配层。 没有想到在总监那里碰到了特殊情况，切换切换就卡那里不播放了。奇怪中，后来发现IE6在系统里面内存不断增加，我才想起来原来是IE6溢出了啊，跟踪了一下竟然是swfobject实例对象没有释放，想了想还是手动写了个释放，问题解决了。。ie6老版本的bug真头痛。。
ie6内存泄漏问题的解决
weixin_30569001的博客
07-24 81
try finally 妙用,防止内存泄漏 <div id="d1"></div> <script > function createButton(){ var obj = document.createElement("button"); obj.innerHTML="点我!"; ...
JS常见的内存泄漏及可用的解决方法
进击的前端菜鸟的博客
09-11 1887
JavaScript中常见的内存泄漏及解决方法~
关于ie中jscript的内存泄漏
冷月宫主的专栏
12-29 452
关注这个问题有一阵子了。网上找找，Douglas Crockford 的文章《JScript Memory Leaks》有详细说明，鸟食轩也有一系列相关文章。 以下是对《JScript Memory Leaks》一文的节选翻译，大致说明了ie内存泄漏的原因。 “microsoft的ie浏览器有许多内存泄漏问题，最严重的就是使用jscript交互引发。当dom节点包含了一个对javascript
IE内存泄露问题
slw632915651的博客
08-31 620
一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　   IE6~8除了不遵守W3C标准和各种诡异外，我想最让人诟病的应该是内存泄露的问题了。这阵子趁项目技术调研的机会好好的再认识一回，以下内容若有纰漏请大家指正，谢谢！   目录一大坨！     二、内存泄漏到底是哪里漏了？        2.1. JS Engine Object、DOM Element 和
JScript内存泄漏/ie内存泄漏
weixin_33757911的博客
02-24 67
  闭包导致了内存泄漏，至少msdn是这么说的。一直以为这是个ie6时代早已经解决的问题，从没特别留意，无意中运行了段代码才发现在ie8时代，这个问题还是存在的。找了点资料，了解一下。 所谓的“点资料”主要是两篇文章： http://javascript.crockford.com/memory/leak.htmlhttp://www.blogjava.net/tim-wu/archive/...
JScript的内存泄漏
chenping0895的博客
04-16 90
当一个系统没有妥善地管理它的内存分配时，就被称为内存泄漏，内存泄漏是一个bug，这问题会导致性能下降和运行错误。 微软的Internet Explorer有许多的泄漏问题，最严重莫过于与JScript的交互作用了。当一个Dom对象包含一个对JavaScript对象的引用时（比如...
IE6出了内存泄漏的补丁
chenqunan3231的博客
03-09 47
福音啊，我的N级联动Script代码原来就有内存泄漏问题，在FireFox下没有问题，这下好了，不过好象只有针对Windows XP版的： http://support.microsoft.com/kb/929874/ 在基于 Windows XP 的计算机上查看使用 Jscript 脚本...
js 内存泄漏及解决方案
qq_43344133的博客
05-18 2984
Js内存泄漏及解决方案 说明： 如果你对苦燥的文字很讨厌，没有耐心看下去，请先收藏，等你哪个时间段有兴致了再来看这篇文档；不确定一定能解决你所面临的问题，但相信一定会对你有帮助！ 对于Js内存泄漏是让人很无意就疏忽的，在使用 js 编程中，我们不得不注意这个问题，否则运行在终端上会让设备出现异常，严重影响客户体验。 在IE下的JS编程中，以下的编程方式都会造成即使关闭IE也无法释放内存的问题，下面...
测试JavaScript在IE中的内存泄露
09-07
2. **内存泄漏类型**：常见的JavaScript内存泄露包括全局变量、闭包引用、DOM元素引用、事件监听器等。了解这些类型有助于识别潜在问题。 3. **工具使用**：利用如IE Developer Tools（F12工具）、Chrome DevTools...
内存泄漏检测工具
01-08
由于IE浏览器的JavaScript引擎（JScript）与其他现代浏览器（如Chrome的V8引擎）存在差异，它可能存在一些特有的内存泄漏问题。该工具可以帮助开发者识别和定位IE浏览器中的内存泄漏问题，提升网页在IE下的性能。 4...
javascript内存泄露问题的解析
10-24
然而，在IE浏览器中，DOM的内存并不能被Jscript所管理。这套系统不知道循环引用，使得一切变得混乱，导致内存释放工作不能完成，产生了内存泄漏。 我们可以通过演示来了解内存泄露的问题。在Question1中，我们创建...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
最新发布
程序员阿龙的博客
09-22 4177
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 295
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
Babel
小秀的博客
09-20 707
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 333
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值