JavaScript遊戲之最佳化篇

1。善用DocumentFragment
之前有個打飛機的遊戲。我是用如下方法添加子彈 複製代碼 代碼如下:for(var i=0;i<5;i++){
var bullet = new Bullet();
document.body.appendChild(bullet);
}

問題就來了，我的目的是希望同時能出現5顆子彈，所以我迴圈將5個子彈對象添加到body，這樣會導致一個結果：瀏覽器reflow了5次。
但其實可以找一個載體，來先把這5個子彈類裝起來，然後，再一次性添加到body中，這樣就只會出現一次flow。節省不少開銷。 複製代碼 代碼如下:var df = document.createDocumentFragment();
for(var i=0;i<5;i++){
var bullet = new Bullet();
df.appendChild(bullet);
}
document.body.appendChild(df);

DocumentFragment：文檔片段，它不會產生任何標籤，只是一個載體。

2。對引用值置空，Dom自訂的引用值也置空。
發覺自己寫的代碼，很多參考型別的值，都沒有在變數結束的時候置空。
例如： 複製代碼 代碼如下:var Bullet = function(){
2 this.dom = null;
3 this.init();
4 }
5 Bullet.prototype = {
6 this.init : function(){
7 this.dom = document.createElement('div');
8 document.body.appendChild(this.dom);
9 }
this.end : function(){
document.body.removeChild(this.dom);
}
}

在結束的時候單純只是將dom對象移除，其實還需要將this.dom.innerHTML = ''以及this.dom = null。
只是針對IE系列，因為removeChild方法只是將dom元素從dom鏈中斷開，沒有釋放對象。

3。使用getBoundingClientRect方法擷取dom的left,top,width,height等參數。
當需要擷取left,top,width,height等參數中兩個或以上的時候，改用 getBoundingClientRect方法，可以一次性擷取以上四個參數的一個對象，減少對
dom元素的屬性訪問。 複製代碼 代碼如下:var rect = document.getElementById('test').getBoundingClientRect();
//rect.width,rect.left,rect.top,rect.height

4。使用cloneNode方式複製dom元素。
對於要需要經常性使用doucment.createElement方法來建立的dom元素，可以先將一個dom元素用cloneNode方法複製儲存起來，
下次需要再次使用的時候，可以直接用複製的dom元素複製一份出來，用cloneNode方法比用createElement方法速度要快。例子： 複製代碼 代碼如下:var temp;
for(var i=0;i < 100;i++){

var dom = temp?temp.cloneNode():document.createElement('div');
if(!temp)temp = dom.cloneNode();
//do something
}

5。迴圈判斷中加標識，減少Dom屬性判斷。
根據遊戲的邏輯，例如是男人就下一百層。
當小人站立在一個方塊上面，這個時候，其它的方塊，可以不需要再判斷小人是否會掉落到自己的方塊上，只需要往上升就行了。這樣，一秒可以減少好幾百次
對dom元素的屬性訪問，減少開銷。當小人離開方塊的時候，判斷再次生效。合理利用。
附上自己寫的:是男人就下100層傳送門>>

暫時就發現那麼多，以後發現更多的話，再寫吧。。。
作者： cnblogs Floyd