App之性能优化

一般来说，浏览器的内存泄漏对于 web 应用程序来说并不是什么问题。用户在页面之间切换，每个页面切换都会引起浏览器刷新。即使页面上有内存泄漏，在页面切换后泄漏就解除了。由于泄漏的范围比较小，因此常常被忽视。

但在移动端，内存泄漏就成了一个比较严重的问题。在单面应用中，用户不能刷新页面的，整个应用程序构建在一个页面上。在这种情况下泄漏会被累积，导致内存不被回收。

Javascript中的垃圾回收机制类似于Java/C#这类语言中的回收机制：

一个对象不再被引用，即将被自动回收

具体回收时刻是我们无法控制的，我们只需适当地解除对象的引用，剩下的事，让运行时去做吧。

在我们开发过程中，往往稍不留神，内存泄露了我们可能都不会察觉：

例1：

function doFn(){
   bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
}

不论是你不小心少写了个var，还是觉得这样写很cool，执行doFn()，即退出函数作用域后，bigString会被回收掉么？

不会被回收，bigString现在成为了全局对象window的一个属性，在应用的整个生命周期，window都是一直存在的，所以其属性是不会被销毁的。

例2：

var doFn=(function(){ 
var bigString=new Array(1000).join(new Array(2000).join("XXXXX")); 
   return  function(){
      console.dir(bigString);
   } ; 
})();

上面代码运行后，bigString会被回收么？

不会被回收，闭包里的数据是不会被释放的。

例3：

<intput type=”button” value=”submit”  id=”submit” />

(function(){
  var Zombie=function(){};
3   var zombie=new Zombie;
  var print=function(){
     console.dir(zombie);
  };
  var node=document.getElementById(‘submit’);
  node.addEventListener('click',print,false);
})()

运行代码后，事件处理函数执行正常，会打印zombie到控制台，而且这里会发生内存泄露，zombie一直不能被回收。

也许有人会说，离开这个页面，zombie就会被释放。在单页应用中，离开当前页面，实质是，移除页面上body内的所有DOM元素，然后再把新的HTML追加至body的DOM树上。

所以，我们来移除button这个节点：

node.parentNode.removeChild(node);

执行之后，我们发现页面上按钮被移除了。现在，zombie对象应该被回收了吧？

我们用chrome浏览器的Heap Profiler来追踪下内存，下面是内存快照：

发现即使移除DOM节点，内存泄露一样存在。当我们在移除元素的同时移除其上的事件时，发现这次zombie被回收了:

node.parentNode.removeChild(node);
node.removeEventListener(‘click’,print,false);

再次追踪内存，已经没有在Zombie类型的对象遗留在内存中了。

所以，我们得出一个结论：移除一个DOM元素的同时，也要移除元素上面的事件,不然很可能会发生内存泄露，伤你于无形。

说到这里，我就想起了zepto里的移除元素的remove方法：

remove: function(){
  return this.each(function(){
     if(this.parentNode != null)
       this.parentNode.removeChild(this)
  })
}

说好的要移除元素上面的事件呢？

另外我们对比下zepto和jQuery里的empty方法：

zepto的empty方法：

empty: function(){
     return this.each(function(){ this.innerHTML = '' })
}

jQuery的empty方法：

empty: function() {
    var elem,i = 0;
    for ( ; (elem = this[i]) != null; i++ ) {
           if ( elem.nodeType === 1 ) {
           // Prevent memory leaks
           jQuery.cleanData( getAll( elem, false ) );
           // Remove any remaining nodes
           elem.textContent = "";
        }
    }
    return this;
}

其API文档里还有这么一句话：

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

可见，对于移除DOM元素时，jQuery处理要更为严谨和合理。

在模块化编程时，当我们会用RequireJS来组织代码时，有一种情况是需要注意的：

define([],function(){
   var obj={
       bigString:new Array(1000).join(new Array(2000).join("XXXXX"));
       //…
   };
   return obj;
});

当这个模块作为一个数据源时，在某个地方被加载一次后，即时当前视图已不再需要它，它还会一直保留在内存中。也就是说，返回值为一个对象时，它是不会被释放的。

至于为何这样，你可以想想，我们define一个类后，能通过require来调用它，那么它肯定是在什么地方被保存了起来。所以，我们这个obj在RequireJs内部也会被引用，无法释放。

也许你会问，那你干嘛要返回一个对象呢？我想，有时候，你应该也是这么做的。

另外，不知道大家的Controller层是如何写的，我是让它继承Backbone.Router的：

 jass.Controller = Backbone.Router.extend({
        module: "",
        name: "",
        _bindRoutes: function () {
            if (!this.routes) return;
            this.routes = _.result(this, 'routes');
            var route, routes = _.keys(this.routes);
            var prefix = this.module + "/" + this.name + "/";
            while ((route = routes.pop()) != null) {
                this.route(prefix + route, this.routes[route]);
            }
        },
        close: function () {
            // destory
            // remove actions from history.Handlers ???
            this.stopListening();
            this.off();
            this.trigger('destroy');
        }
});

这样写也会内存泄露，我们跟踪下router方法：

this.route(prefix + route, this.routes[route]);  // this -->controller

controller被引用了，它是无法释放的。如果在Controller层上面再引用了Model层表示的数据，泄露将会更加严重。

另外，我这里企图作一些清理工作的close方法根本就没有时机去触发。

我们简化Controller逻辑，它只负责向View层传递Model层的数据时，在多数情况下是会降低泄露的发生。

但是，我们经常会面临这样的问题：

1 多个View之间共享数据；

2 多个Controller之间共享数据；

这时数据应该保存在哪，该何时被清理掉？

为了解决上面的问题，我希望从AngularJS中能得到一些启发，发现它的概念还是挺多的。然后找到AngularJS中依赖注入的模拟代码：

var angular = function(){};
 
Object.defineProperty(angular,"module",{
    value:function(modulename,args){
        var module = function(){
            this.args = args;
            this.factoryObject = {};
            this.controllerObject = {};
        }
        module.prototype.factory = function(name,service){
            //if service is not a function ... 
            //if service() the result is not a object ... and so on
            this.factoryObject[name] = service();
        }
        module.prototype.controller = function(name,args){
            var _self  = this;
            //init
            var content = {
                $scope:{},
                scope:function(){
                    return content.$scope;
                }
            //  $someOther:{...}
            }
 
            var ctrl = args.pop();
            console.log(typeof ctrl);
            var factorys = [];
            while(service = args.shift()){
                if(service in content){
                    factorys.push(content[service])
                }else{
                    factorys.push(_self.factoryObject[service])
                }
                 
            }
            ctrl.apply(null,factorys);
 
            _self.controllerObject[name] = function(){
                return content;
            };
        }
        var m = new module();
        window[modulename] = m;
        return m;
    }
})

测试：

var hello = angular.module('Test');
 
hello.factory("actionService",function(){
    var say = function(){
        console.log("hello")
    }
    return {
        "say":say
    }
})
 
hello.controller("doCtrl",['$scope',"actionService",function($scope,actionService){
    $scope.do = function(){
        actionService.say();
    }
}]);
 
hello.controllerObject.doCtrl().scope().do()

可见，AngularJS中构造的模块，控制器也是不会被释放的。

在单页应用开发中，更要警惕内存泄露问题，不然它会是性能优化的一个巨大绊脚石。

性能优化，是一个永久的话题，以后有所感悟，再来补充，持续更新！

最近在研究Sencha Touch，期待有趣的发现！

更多有关性能优化的讨论，推荐阅读：

Memory leaks

Memory leak patterns in JavaScript

Writing Fast,Memory-Efficient JavaScript

Backbone.js And JavaScript Garbage Collection

雅虎网站页面性能优化的34条黄金守则