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

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

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

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

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

复制代码代码如下:

var o = { x: 'y' };
delete o.x; //此时o会成一个慢对象
o.x; //

var o = { x: 'y' };
o = null;  //应该这样

2) 闭包

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

复制代码代码如下:

var a = function() {
  var largeStr = new Array(1000000).join('x');
  return function() {
    return largeStr;
  }
}();

3) DOM泄露

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

复制代码代码如下:

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计(定)时器泄露

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

复制代码代码如下:

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即可:

容易造成JavaScript内存泄露几个方面的更多相关文章

  1. 4类 JavaScript 内存泄露及如何避免

    原文:4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them笔记:涂鸦码龙 译者注:本文并没有逐字逐句的翻译,而是把我认为重要 ...

  2. JavaScript内存泄露,闭包内存泄露如何解决

    本文原链接:https://cloud.tencent.com/developer/article/1340979 JavaScript 内存泄露的4种方式及如何避免 简介 什么是内存泄露? Java ...

  3. [ Javascript ] 内存泄露以及循环引用解析

    内存泄露 在javascript中,我们非常少去关注内存的管理. 我们创建变量,使用变量,浏览器关注这些底层的细节都显得非常正常. 可是当应用程序变得越来越复杂而且ajax化之后,或者用户在一个页面停 ...

  4. 常见的几种JavaScript内存泄露

    总结一下常见的几种JavaScript内存泄露: 1.意外的全局变量 全局变量属于window对象,所以只会随着window销毁才会销毁. 2.console.log() conaole.log()函 ...

  5. Javascript内存泄露

    在过去一些的时候,Web开发人员并没有太多的去关注内存泄露问题.那时的页面间联系大都比较简单,并主要使用不同的连接地址在同一个站点中导航,这样的设计方式是非常有利于浏览器释放资源的.即使Web页面运行 ...

  6. (译)JavaScript内存泄露

    译者前言 原文地址:Memory leaks 最近简单了解了下JavaScript的闭包和垃圾回收机制(GC),这中间也不得不接触内存泄露这个概念.然后不小心找到了这篇文章,看下来后理解了不少东西,于 ...

  7. 【翻译】JavaScript内存泄露

    原文地址:http://javascript.info/tutorial/memory-leaks#tools 我们在进行JavaScript开发时,很少会考虑内存的管理.JavaScript中变量的 ...

  8. [转]常见的JavaScript内存泄露

    什么是内存泄露 内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存.内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制, ...

  9. JavaScript 内存泄露以及如何处理

    一.前言 一直有打算总结一下JS内存泄露的方面的知识的想法,但是总是懒得提笔. 富兰克林曾经说过:懒惰,像生鏽一样,比操劳更能消耗身体,经常用的钥匙总是亮闪闪的.安利一下,先起个头. 二.内存声明周期 ...

  10. 常见的 JavaScript 内存泄露

    什么是内存泄露 指由于疏忽或错误造成程序未能释放已经不再使用的内存.内存泄漏并非指内存在物理上的消失, 而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造 ...

随机推荐

  1. otl下直接用sql查询语句无法查询最新的记录的问题

    最近操作mysql数据库遇到了一个很奇葩的问题,由于我的程序里需要实时读取最新的记录,所以我在程序中采用定时器每20秒读一遍数据库,但是发现除了第一次初始化读取数据库成功以外,后面最新的记录全部都读不 ...

  2. Orchard运用 - 特定主题添加独立代码文件

    今天继续跟大家分享捣鼓Orchard的一些心得.其实有时一些问题或者Bugs还是蛮好解决的,主要看你采取哪种方式方法.比如有时我们为了扩展某些特性或功能,你可以搭建一个全新的模块来完成,如果临时的或简 ...

  3. 标准C++类std::string的内存共享和Copy-On-Write技术

    标准C++类std::string的  内存共享和Copy-On-Write技术 陈皓 1. 概念 Scott Meyers在<More Effective C++>中举了个例子,不知你是 ...

  4. microsoft visual c++与microsoft visual net 版本对应关系

    7.1 -> 2003 8.0 -> 2005 9.0 -> 2008 10.0 -> 2010 11.0 -> 2012 12.0 -> 2013 14.0 -& ...

  5. 从AIDL开始谈Android进程间Binder通信机制

    转自: http://tech.cnnetsec.com/585.html 本文首先概述了Android的进程间通信的Binder机制,然后结合一个AIDL的例子,对Binder机制进行了解析. 概述 ...

  6. 通过源码浅析Java中的资源加载

    前提 最近在做一个基础组件项目刚好需要用到JDK中的资源加载,这里说到的资源包括类文件和其他静态资源,刚好需要重新补充一下类加载器和资源加载的相关知识,整理成一篇文章. 理解类的工作原理 这一节主要分 ...

  7. 使用PyQt4 designer时无法启动uic解决方案

    1.自己调用命令行 pyuic4 -o codeFile.py -x yourUIfile.ui 2.写一个批处理,每次双击就行了,跟你的源文件放在同一文件夹下 import os for root, ...

  8. js Object.defineProperty 使用

    语法 Object.defineProperty(obj, prop, descriptor) 参数说明: obj:必需.目标对象 prop:必需.需定义或修改的属性的名字descriptor:必需. ...

  9. 【转发】jQuery1.9.1至最高版本针对checkbox的调整

    在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下: 判断是否选中 $('#checkbox').prop('checked') 设置选中与不选中状态: $('#che ...

  10. pdf+iphone+wechat

    可能很多人要问,为啥标题取这个名字. 因为今天在这个上面踩了太多坑.. 我们的需求其实很简单.做一个页面,把pdf文档嵌进去,在线显示. 如此需求,放在PC上chrome浏览器,一个embed标签就搞 ...