移动web app：内存溢出与优化（附项目分析）

sunset

2013-11-04

关注关注

主要的问题：

heap过大，内存低性能差的机子上引起奔溃，直接退出

关于web app的优化，不仅仅只是js方面，包括HTML布局嵌套，CSS的属性使用，数据的读取，还有浏览器的重排与回流之类的这里就不讨论了，

本章涉及的是脚本代码引发的性能问题，更进一步说就是闭包带来的内存泄露

关于性能：

首先我不得不承认一个事实，移动端的性能跟PC端，那完全不是一回事

比如用innerHTML绘制大段的HTML结构，之后同步获取生成HTML中的ID节点，结果不存在

这种问题在单页面模拟多页面，动态创建DOM的时候，尤为明显

var element   = $('<div id = "aaron">...填充大量结构...</div>');

$(root).html(element)

$('#aaron')  //为空

这个是很简单的一段代码，按照常规的认识，JS主线程与GUI的渲染线程是互斥的，所以在执行JS的时候，GUI应该就是挂起的，同理执行GUI的时候亦然，因为JS可以动态操作节点，所以如果我们在GUI绘制的时候做操作明显就会打乱了，所以互斥的解释也合理
但是实际上这样并不能直接获取到$('#aaron')，PC上基本不会出现，常规的办法都是加setTimeout
实际上由于setTimeout的机制，所以也是不准确的，当然我已经有一个比较完美的方式解决

关于JavaScript内存管理：

原文：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management

JavaScript会给开发者一个错觉：可以不用考虑内存管理

现代浏览器已经够聪明了，从2012年起，所有现代浏览器都使用了标记-清除垃圾回收算法。所有对JavaScript垃圾回收算法的改进都是基于标记-清除算法的改进，并没有改进标记-清除算法本身和它对“对象是否不再需要”的简化定义。

所以引用计数收集与循环引用之类的都不再是问题了,过去导致内存泄漏的许多经典模式在现代浏览器中以不再导致泄漏内存。

但是，如今有一种不同的趋势影响着内存泄漏。许多人正设计用于在没有硬页面刷新的单页中运行的 Web 应用程序。在那样的单页中，从应用程序的一个状态到另一个状态时，很容易保留不再需要或不相关的内存。

典型的就是： 单页面模拟多页面的行为

简单的内存管理测试

视图：

HTML结构:

<button id="start_button">Start</button>
<button id="destroy_button">Destroy</button>

脚本代码：

var Leaker = function() {
    this.name = 'aaron'
};

$("#start_button").click(function(){
 leak = new Leaker();
});

$("#destroy_button").click(function(){
  leak = null;
});

点击Start 产生一个对象leak = new Leaker();

点击Destroy 销毁这个对象观察下内存中变化（工具后面会提到）

点击Start ,产生一个对象

点击Destroy,对象销毁

那么这个图很形象的说明了，#Delata释放了一个实例,就是内存被回收了

如果不做任何处理,那么这个对象leak始终最存在整个生命周期内(全局上下文的情况)

如果leak = null,内存确实是由浏览器GC 自动给回收了

闭包引起的内存泄漏：

代码：内部增加了一个定时器，递归调用

var count = 0;

var Leaker = function(){};

Leaker.prototype = {
    init:function(){
        this._interval = null;
        this.start();
    },

    start: function(){
        var self = this; //递归调用自身
        this._interval = setInterval(function(){
            self.onInterval();
        }, 100);
    },

    destroy: function(){
        if(this._interval !== null){
            clearInterval(this._interval);
        }
    },

    onInterval: function(){
        count++;
        console.log("Interval",count);
    }
};

从样的观察

我在按了销毁，leak = null了

可见代码依然还在走，可见此时内存绝对的溢出了，也就是失控了