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元素的属性访问,减少开销。当小人离开方块的时候,判断再次生效。合理利用。
之前有个打飞机的游戏。我是用如下方法添加子弹
复制代码代码如下:
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元素的属性访问,减少开销。当小人离开方块的时候,判断再次生效。合理利用。