JS性能方面--內存管理及ECMAScript5 Object的新屬性方法

Delete一個Object的屬性會讓此對象變慢（多耗費15倍的內存）

var o = { x: 'y' };
delete o.x; //此時o會成一個慢對象
o.x; //
 
var o = { x: 'y' };
o = null;  //應該這樣

 

閉包

在閉包中引入閉包外部的變量時，當閉包結束時此對象沒法被垃圾回收（GC）。

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

 

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能夠被釋放了。

 

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;
}

 

調試內存

Chrome自帶的內存調試工具能夠很方便地查看內存使用狀況和內存泄露：

在 Timeline -> Memory 點擊record便可：

 

Object.create(prototype[,descriptors])

這個方法用於建立一個對象，並把其prototype屬性賦值爲第一個參數，同時能夠設置多個descriptors，關於decriptor下一個方法就會介紹這裏先不說。只須要這樣就能夠建立一個原型鏈乾淨對象了

var o = Object.create({
            "say": function () {
                alert(this.name);
            },
            "name":"Byron"
        });

Object.defineProperty(O,Prop,descriptor) / Object.defineProperties(O,descriptors)

想明白這兩個函數必須明白descriptor是什麼，在以前的JavaScript中對象字段是對象屬性，是一個鍵值對，而在ECMAScript5中引入property，property有幾個特徵

1. value：值，默認是undefined

2. writable：是不是隻讀property，默認是false,有點像C#中的const

3. enumerable：是否能夠被枚舉(for in)，默認false

4. configurable：是否能夠被刪除，默認false

一樣能夠像C#、Java同樣些get/set，不過這兩個不能和value、writable同時使用

5.get:返回property的值得方法，默認是undefined

6.set：爲property設置值的方法，默認是undefined

        Object.defineProperty(o, 'age', {
            value: 24,
            writable: true,
            enumerable: true,
            configurable: true
        });

        Object.defineProperty(o, 'sex', {
            value: 'male',
            writable: false,
            enumerable: false,
            configurable: false
        });

        console.log(o.age); //24
        o.age = 25;

        for (var obj in o) {
            console.log(obj + ' : ' + o[obj]);
            /*
            age : 25  //沒有把sex ： male 遍歷出來
            say : function () {
            alert(this.name);
            } 
            name : Byron 
            */
        }
        delete o.age;
        console.log(o.age); //undefined 

        console.log(o.sex); //male
        //o.sex = 'female'; //Cannot assign to read only property 'sex' of #<Object> 
        delete o.age;
        console.log(o.sex); //male ,並無被刪除

也能夠使用defineProperties方法同時定義多個property，

      Object.defineProperties(o, {
            'age': {
                value: 24,
                writable: true,
                enumerable: true,
                configurable: true
            },
            'sex': {
                value: 'male',
                writable: false,
                enumerable: false,
                configurable: false
            }
        });

 

Object.getOwnPropertyDescriptor(O,property)

 

這個方法用於獲取defineProperty方法設置的property 特性

 

var props = Object.getOwnPropertyDescriptor(o, 'age');
console.log(props); //Object {value: 24, writable: true, enumerable: true, configurable: true}

 

Object.getOwnPropertyNames

獲取全部的屬性名，不包括prototy中的屬性，返回一個數組

console.log(Object.getOwnPropertyNames(o)); //["age", "sex"]