快捷導(dǎo)航

JavaScript游戲之優(yōu)化篇

更新時(shí)間：2010年11月08日 21:29:57 作者：

最近回頭看看自己以前寫的游戲代碼，總結(jié)出幾個(gè)可以優(yōu)化改進(jìn)的地方，當(dāng)然還有很多地方需要優(yōu)化，還希望大家指出來。

1。善用DocumentFragment
之前有個(gè)打飛機(jī)的游戲。我是用如下方法添加子彈

 
for(var i=0;i<5;i++){ 
var bullet = new Bullet(); 
document.body.appendChild(bullet); 
} 

問題就來了，我的目的是希望同時(shí)能出現(xiàn)5顆子彈，所以我循環(huán)將5個(gè)子彈對(duì)象添加到body，這樣會(huì)導(dǎo)致一個(gè)結(jié)果：瀏覽器reflow了5次。
但其實(shí)可以找一個(gè)載體，來先把這5個(gè)子彈類裝起來，然后，再一次性添加到body中，這樣就只會(huì)出現(xiàn)一次flow。節(jié)省不少開銷。

復(fù)制代碼代碼如下:

 
var df = document.createDocumentFragment(); 
for(var i=0;i<5;i++){ 
var bullet = new Bullet(); 
df.appendChild(bullet); 
} 
document.body.appendChild(df); 

DocumentFragment：文檔碎片，它不會(huì)產(chǎn)生任何標(biāo)簽，只是一個(gè)載體。

2。對(duì)引用值置空，Dom自定義的引用值也置空。
發(fā)覺自己寫的代碼，很多引用類型的值，都沒有在變量結(jié)束的時(shí)候置空。
例如：

復(fù)制代碼代碼如下:

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

在結(jié)束的時(shí)候單純只是將dom對(duì)象移除，其實(shí)還需要將this.dom.innerHTML = ''以及this.dom = null。
只是針對(duì)IE系列，因?yàn)閞emoveChild方法只是將dom元素從dom鏈中斷開，沒有釋放對(duì)象。

3。使用getBoundingClientRect方法獲取dom的left,top,width,height等參數(shù)。
當(dāng)需要獲取left,top,width,height等參數(shù)中兩個(gè)或以上的時(shí)候，改用 getBoundingClientRect方法，可以一次性獲取以上四個(gè)參數(shù)的一個(gè)對(duì)象，減少對(duì)
dom元素的屬性訪問。

復(fù)制代碼代碼如下:

 
var rect = document.getElementById('test').getBoundingClientRect(); 
//rect.width,rect.left,rect.top,rect.height 

4。使用cloneNode方式克隆dom元素。
對(duì)于要需要經(jīng)常性使用doucment.createElement方法來新建的dom元素，可以先將一個(gè)dom元素用cloneNode方法克隆保存起來，
下次需要再次使用的時(shí)候，可以直接用克隆的dom元素克隆一份出來，用cloneNode方法比用createElement方法速度要快。例子：

復(fù)制代碼代碼如下:

 
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。循環(huán)判斷中加標(biāo)識(shí)，減少Dom屬性判斷。
根據(jù)游戲的邏輯，例如是男人就下一百層。
當(dāng)小人站立在一個(gè)方塊上面，這個(gè)時(shí)候，其它的方塊，可以不需要再判斷小人是否會(huì)掉落到自己的方塊上，只需要往上升就行了。這樣，一秒可以減少好幾百次
對(duì)dom元素的屬性訪問，減少開銷。當(dāng)小人離開方塊的時(shí)候，判斷再次生效。合理利用。
附上自己寫的:是男人就下100層傳送門>>

暫時(shí)就發(fā)現(xiàn)那么多，以后發(fā)現(xiàn)更多的話，再寫吧。。。
作者： cnblogs Floyd