发表于谷歌WebPerf(伦敦WebPerf集团),​​2014年8月26日。

  高效的JavaScript Web应用必须流畅,快速。与用户交互的任何应用程序,都需要考虑如何确保内存有效使用,因为如果消耗过多,页面就会崩溃,迫使用户重新加载。而你只能躲在角落哭泣。

  自动垃圾收集是不能代替有效的内存管理的,特别是在大型,长时间运行的Web应用程序中。在这次讲座中,我们将演示如何通过Chrome的DevTools对内存进行有效的管理。

  并了解如何解决性能问题,如内存泄漏,频繁的垃圾收集暂停,和整体内存膨胀,那些真正让你耗费精力的东西。

  Addy Osmani在他的PPT中展示了很多会在Chrome V8中产生内存泄漏的示例:

  1) Delete一个Object的属性会让此对象变慢(多耗费15倍的内存)

1
2
3
4
5
6
var o = { x: 'y' };
delete o.x; //此时o会成一个慢对象
o.x; //
 
var o = { x: 'y' };
o = null//应该这样

  2) 闭包

  在闭包中引入闭包外部的变量时,当闭包结束时此对象无法被垃圾回收(GC)。

1
2
3
4
5
6
var a = function() {
  var largeStr = new Array(1000000).join('x');
  return function() {
    return largeStr;
  }
}();

  3) DOM泄露

  当原有的COM被移除时,子结点引用没有被移除则无法回收。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var select = document.querySelector;
var treeRef = select('#tree');
 
//在COM树中leafRef是treeFre的一个子结点
var leafRef = select('#leaf'); 
var body = select('body');
 
body.removeChild(treeRef);
 
//#tree不能被回收入,因为treeRef还在
//解决方法:
treeRef = null;
 
//tree还不能被回收,因为叶子结果leafRef还在
leafRef = null;
 
//现在#tree可以被释放了。

  4) Timers计(定)时器泄露

  定时器也是常见产生内存泄露的地方:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
for (var i = 0; i < 90000; i++) {
  var buggyObject = {
    callAgain: function() {
      var ref = this;
      var val = setTimeout(function() {
        ref.callAgain();
      }, 90000);
    }
  }
 
  buggyObject.callAgain();
  //虽然你想回收但是timer还在
  buggyObject = null;
}

  5) 调试内存

  Chrome自带的内存调试工具可以很方便地查看内存使用情况和内存泄露:

  在 Timeline -> Memory 点击record即可:

  更多内容请查看原PPT。

  原文地址: 点此

如何避免JavaScript的内存泄露及内存管理技巧的更多相关文章

  1. net 内存泄露和内存溢出

    一直以来都对内存泄露和内存溢出理解的不是很深刻.在网上看到了几篇文章,于是整理了一下自己对内存泄露和内存溢出的理解. 一.概念 内存溢出:指程序在运行的过程中,程序对内存的需求超过了超过了计算机分配给 ...

  2. java内存泄露与内存溢出

    内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory: 内存泄露 memory leak,是指程序在申请内存后,无法释放已申请的内存空 ...

  3. C++内存机制中内存溢出、内存泄露、内存越界和栈溢出的区别和联系

    当我们在用C++做底层驱动的时候,经常会遇到内存不足的警告,究其原因,往往是因为内存出现溢出,泄露或者越界等原因.那么他们之间有什么联系吗? 内存溢出(out of memory) 是指程序在申请内存 ...

  4. Android为TV端助力 转载:内存泄露与内存溢出的区别

    内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存下的数,那就是内存溢出. ...

  5. Android 的内存泄露和内存限制

    转载自 https://blog.csdn.net/goodlixueyong/article/details/40716779 https://blog.csdn.net/vshuang/artic ...

  6. Android之内存泄露、内存溢出、内存抖动分析

      内存   JAVA是在JVM所虚拟出的内存环境中运行的,内存分为三个区:堆.栈和方法区.栈(stack):是简单的数据结构,程序运行时系统自动分配,使用完毕后自动释放.优点:速度快.堆(heap) ...

  7. java中内存泄露和内存溢出

    内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存下的数,那就是内存溢出. ...

  8. Java:内存泄露和内存溢出

    1. 内存溢出 (Memory Overflow) 是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存下的数,那就 ...

  9. C++ 内存泄露和内存越界

    内存泄露:分配了内存而没有释放,逐渐耗尽内存资源,导致系统崩溃内存越界: 打个比方 就是你有一个500ml的水瓶,然后你倒在瓶里的水大于500ml 那个多余的就会流出来... 1. 原理分析经常有些新 ...

随机推荐

  1. 分布式内存对象缓存系统Memcached-概述

    全面掌握Memcached 1.       概述 Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,是为了加快网站http://www. ...

  2. CentOS环境下Java开发环境的搭建

    ------------------------------------------------------- 安装Jdk 1.查询系统默认JDK CentOS系统默认会安装JDK,一般建议卸载后安装 ...

  3. 2、@RequestMapping注解的用法

    @RequestMapping有如下属性值:

  4. checkbox 全选、全不选、反选 插件

    jquery.checkbox.js: ;(function($,window,document,undefined){ $.fn.check=function(mode){ mode= mode | ...

  5. TCP protocol

    he characteristics of TCP protocol TCP (which means Transmission Control Protocol) is one of the mai ...

  6. JSP中嵌入java代码方式以及指令

    JSP中嵌入java代码的三种方式: (1)声明变量或方法 :  <%! 声明; %> :慎重使用,因为此方法定义的是全局变量 (2)java片段(scriptlet):  <% j ...

  7. JAVA中,不同工程间的方法调用

    可以调用, 用配置构建路径的方法:点选工程1, 点击右键, 选择 Build Path(构建路径) - > Configure Build Path...(配置构建路径...)然后在弹出的窗口中 ...

  8. Lists of network protocols

    https://en.wikipedia.org/wiki/Lists_of_network_protocols Protocol stack: List of network protocol st ...

  9. Java 比较两张图片的相似度

    import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO; /** * 比较两张图片 ...

  10. uvaIrrelevant Elements

    唯一分解定理. 可以看出在最后每个a的系数是杨辉三角的第n行. 但是不能递推,否则会tle. 就从C(n-1,0)开始乘n-k再除以k.记录下每个的系数,如果该项系数小于m就代表和答案有关. 代码里的 ...