JS魔法堂：再识IE的内存泄露

<div id="test"></div>

<script type="text/javascript">

  var $el = {tag: 'div', dom: null} // 创建JS Engine Object

  $el.dom = document.getElementById('test') // JS Engine Object references to DOM Element

  $el.dom.expandoProp = $el // DOM Element references to JS Engine Object

  // 造成circular references

  // GC不会清理$el，而页面刷新时也不会清理$el.dom

  setTimeout('location.reload()', ) // 刷新页面

</script>

Non-Leak Memory

<body onunload="clearMemory()">

    <div id="test"></div>

    <script type="text/javascript">

      function clearMemory(){

        $el.dom.expandoProp = null; // 解除DOM Element references to JS Engine Object，那么页面刷新时就会清除$el.dom，而$el也会被GC清除

      }

      var $el = {tag: 'div', dom: null} // 创建JS Engine Object

      $el.dom = document.getElementById('test') // JS Engine Object references to DOM Element

      $el.dom.expandoProp = $el // DOM Element references to JS Engine Object

      // 造成circular references

      // GC不会清理$el，而页面刷新时也不会清理$el.dom

      setTimeout('location.reload()', ) // 刷新页面

    </script>

</body>

3.2. Closures(导致跨页面内存泄漏)

闭包具有Lexical scope特性，延长了方法参数和局部变量的生命周期，但同时又容易在无意当中引入循环引用的问题。

Leak Memory

<div id="test"></div>

<script type="text/javascript">

  ;(function (){

    var $el = {tag: 'div', dom: null}

    $el.dom = document.getElementById('test') // JS Engine Object references to DOM Element

    $el.dom.attachEvent('click', onclick) // DOM Element references to JS Engine Object

    // 此时还没形成circular references

    function onclick(){} // onclick的方法体内隐式引用$el及$el内的dom属性，因此形成了circular refereneces

    // function onclick(){ return eval('$el && true || false') } 返回true

  }())

</script>

Non-Leak Memory

<div id="test"></div>

<script type="text/javascript">

  ;(function (){

    var $el = {tag: 'div', dom: null}

    $el.dom = document.getElementById('test') // JS Engine Object references to DOM Element

    $el.dom.attachEvent('click', onclick) // DOM Element references to JS Engine Object

    // 此时还没形成circular references

  }())

  function onclick(){}  // onclick方法体内没有引用$el

</script>

3.3. Cross-page Leaks（当前页面内存泄漏）

由于节点建立联系时会寻找scope，若没有则创建temporary scope，若有则抛弃原有的temporary scope采用已有的scope。

Leak Memory

<html>

     <head>

         <script language="JScript">

         function  LeakMemory()

        {

             var  hostElement  =  document.getElementById("hostElement"); //  Do it a lot, look at Task Manager for memory response

             for (i  =    ; i  <  ; i ++ )

            {

                 var  parentDiv  =

                    document.createElement("<div onClick='foo()'>");

                 var  childDiv  =

                    document.createElement("<div onClick='foo()'>"); //  This will leak a temporary object

                parentDiv.appendChild(childDiv);

                hostElement.appendChild(parentDiv);

                hostElement.removeChild(parentDiv);

                parentDiv.removeChild(childDiv);

                parentDiv  =   null ;

                childDiv  =   null ;

            }

            hostElement  =   null ;

        }

     </script>

     </head>

     <body>

         <button onclick ="LeakMemory()"> Memory Leaking Insert </button>

         <div id ="hostElement"></div>

     </body>

</html>

当childDiv与parentDiv建立连接时，为让childDiv能获取parentDiv的信息，IE会创建temporary scope。而当将parentDiv添加到DOM tree中时，则childDiv和parentDiv均继承document的scope，而temporary scope却不会被GC释放，而要等待浏览器刷新页面才能清理。

Non-Leak Memory

<html>

     <head>

         <script language="JScript">

       function  CleanMemory()

        {

             var  hostElement  =  document.getElementById("hostElement"); //  Do it a lot, look at Task Manager for memory response

             for (i  =    ; i  <  ; i ++ )

            {

                 var  parentDiv  =   document.createElement("<div onClick='foo()'>");

                 var  childDiv  =   document.createElement("<div onClick='foo()'>"); //  Changing the order is important, this won’t leak

                hostElement.appendChild(parentDiv);

                parentDiv.appendChild(childDiv);

                hostElement.removeChild(parentDiv);

                parentDiv.removeChild(childDiv);

                parentDiv  =   null ;

                childDiv  =   null ;

            }

            hostElement  =   null ;

        }

     </script>

     </head>

     <body>

         <button onclick ="CleanMemory()"> Clean Insert </button>

         <div id ="hostElement"></div>

     </body>

</html>

一直使用document scope，不会创建temporary scope

3.4. Pseduo-Leaks

连续创建多个JS Engine Object，而GC未能及时释放内存，其实根本就不是内存泄漏

var tmpStr

for(var i = ; i < ; ++i)

  tmpStr = "test"

四、当前页面泄漏的示例　　　　　　　　　　　　　　　　　　　　　　

4.1. DOM Hyperspace引起的DOM Element引用孤岛

DOM Hyperspace由PPK发现，在IE下通过removeChild或removeNode从父节点（无论是否已加入DOM Tree）中移除节点后，会创建一个新的#documentFragment，并且被移除的节点的parentNode为该#documentFragment，而该#documentFragment.firstChild为被移除的节点，因此存在DOM Element间的circular reference导致无法释放，只有刷新页面后才会释放资源。

Leak Memory

var div = document.createElement('div')

document.body.appendChild(div)

div.parentNode.removeChild(div)

alert(div.parentNode) // IE8下为[Object object]，Chrome等浏览器为null

Non-Leak Memory

function rm(el){

  if (!+'\v1'){

    var d = document.createElement('div')

    d.appendChild(el)

    d.innerHTML = ''

  }

  else{

    el.parentNode.removeChild(el)

  }

}

var div = document.createElement('div')

document.body.appendChild(div)

rm(div)

alert(div.parentNode) // IE8下为null

4.2. 释放Iframe没那么简单

iframe所占的资源有两部分：iframe元素所占的内存空间和 iframe内页面所占的内存空间。

内存空间释放步骤：

　　　　1. 释放 iframe内页面所占的内存空间

　　　　　　通过设置src=''或src='about:blank'来释放内部页面的资源

　　　　2. 释放 iframe元素所占的内存空间

　　　　　　通过removeChild、removeNode等方法释放iframe元素的内存空间

　　 ligerTab1.2.1的清除方式

var iframe = ...

iframe.src = 'about:blank'

iframe.contentWindow.document.write('')

CollectGarbage && CollectGarbage()

iframe.parentNode.removeChild(iframe)

五、IE8下连续修改IMG的src居然耗尽内存？　　　　　　　　　　　　

由于IE8会对非原始尺寸的图片进行抗锯齿平滑处理，从而消耗更多的CPU和内存资源。当图片大小和尺寸到一定时，则会出现挂死的情况。（IE6、7没有抗锯齿平滑处理，而IE9则移除该功能）

而这种情况当然就不属于Memory Leak啦！

题外话：

众所周知IMG是replaced element，其width和height属性缺省值又外部资源决定，而我们通过CSS设置的width和height属性均是对缺省值的二次加工。

假设图片原始尺寸为width:200px/height:400px，现在通过CSS设置width:100px，那么图片将按等比例缩放为width:100px/height:200px；但通过CSS设置width:100px/height:100px时，那么图片则不是按等比例缩放了。

六、监控工具　　　　　　　　　　　　　　　　　　　　　　　　　　　

监控方式多种多样，这里大概分为两类：

1. 当前页面泄漏：Windows的任务管理器、Chrome->dev tools->Profiles->Take Heap Snapshot/Record Heap Allocations等等

2. 跨页面泄漏：sIEve

操作步骤：

1. 在Address输入框输入网址，点击Go （浏览网页）

2. 执行测试用例

3. 点击about:blank按钮（跳转到空白页）

4. 查看#leaks列下是否有增长，有则表示出现跨页面的内存泄漏

七、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　

稍微小结一下：

1. 单纯的JS Engine Object的Circular References、Closures是不会引起内存泄漏；

2. 单纯的DOM Element的Circular References只会引起当前页面的内存泄漏；

3. JS Engine Object 和 DOM Element的Circular References、Closures会引起跨页面的内存泄漏；

4. 将DOM Element直接追加到DOM Tree中，可减少temporary scope的创建和丢弃；

5. CollectGarbage()不是万金油。

上述内容以概念为主，最终还是要实战来验证和完善、补充。

尊重原创，转载请注明来自：^_^肥子John http://www.cnblogs.com/fsjohnhuang/p/4455822.html

八、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　

What are closures?

Understanding and Solving Internet Explorer Leak Patterns

JavaScript and memory leaks

JS魔法堂：再识IE的内存泄露的更多相关文章

JS魔法堂:不完全国际化&本地化手册之实战篇
前言最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
JS魔法堂：jsDeferred源码剖析
一.前言最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...
JS魔法堂：属性、特性，傻傻分不清楚
一.前言或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...
JS魔法堂：那些困扰你的DOM集合类型
一.前言大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...
JS魔法堂：doctype我们应该了解的基础知识
一.前言什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...
JS魔法堂：精确判断IE的文档模式by特征嗅探
一.前言苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器 ...
JS魔法堂：追忆那些原始的选择器
一.前言 ...
JS魔法堂:不完全国际化&本地化手册之理論篇
前言最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
JS魔法堂：判断节点位置关系
一.前言在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...

随机推荐

Redhat Linux /etc/profile 与 /etc/bashrc 的区别
最近学习RHCE,在umask这里,书里说要修改/etc/profile和/etc/bashrc两个文件,却没有说明这两个区别.于是在上网查看之后倒是明白了各是怎么用的./etc/profile是对应 ...
项目八：团队项目——Alpha阶段项目总结
1.项目的预期目标 a.完成游戏的基本功能 b.游戏难度的玩家手动调节 c.游戏能够良好的运行完成与前期的需求分析对比: 第一点不同是游戏的难度调节,原来是想通过选择难度来调节的,但由于难度的分层上 ...
ubuntu git 使用
apt-get install git//ubuntu安装git mkdir -p /var/www/gitProj //创建文件夹 cd /var/www/gitProj //进入文件夹 git i ...
Java的默认编码
摘要: 1.Java的默认编码内容: 1.Java的默认编码 java的src.zip包中的java.nio.charset.Charset类中defaultCharset()方法说明java的编码类 ...
[Reomting Debug] 巧用VS 的remote debug 功能远程调试程序经验分享.
前言: 有时候我们Dev(开发人员)需要debug tester(测试人员)或者customer(客户)的环境,可tester的机器上没有Code,是不是有点着急? 而且是多版本应用且tester 发 ...
Atitit java的异常exception 结构Throwable类
Atitit java的异常exception 结构Throwable类 1.1. Throwable类 2.StackTrace栈轨迹1 1.2. 3.cause因由1 1.3. 4.Suppres ...
paip.lucene 4.3 中文语义搜索最佳实践
paip.lucene 4.3 中文语义搜索最佳实践首先一个问题是要不要使用lucene 自带的分词器...我觉得最好不使用哪自带的分词器.效果还凑火,就是不好控制... 先使用ik,ict,mms ...
sql语句中获取datetime的日期部分或时间部分
sql语句中获取datetime的日期部分 sql语句中经常操作操作datetime类型数据.今天在写一个存储过程的时候需要将一个datetime的值的日期部分提取出来.网上有许多这方面的介绍. ...
CMD复制文件夹
CMD复制文件夹 xcopy /E/I/Y "D:\GitHub\WIP\app" "D:\GitHub\WIP_server\html\webshell"
跨域API
跨域API 简单跨域请求只需要简单的设置允许跨域就可以了 def set_default_headers(self): self.set_header('Access-Control-Allow-O ...

JS魔法堂：再识IE的内存泄露

JS魔法堂：再识IE的内存泄露的更多相关文章

随机推荐

热门专题