JavaScript游戏之优化篇-CSDN博客

最近回头看看自己以前写的游戏代码，总结出几个可以优化改进的地方，当然还有很多地方需要优化，还希望大家指出来。

1。善用DocumentFragment

之前有个打飞机的游戏。我是用如下方法添加子弹

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

问题就来了，我的目的是希望同时能出现5颗子弹，所以我循环将5个子弹对象添加到body，这样会导致一个结果：浏览器reflow了5次。

但其实可以找一个载体，来先把这5个子弹类装起来，然后，再一次性添加到body中，这样就只会出现一次flow。节省不少开销。

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

DocumentFragment：文档碎片，它不会产生任何标签，只是一个载体。

2。对引用值置空，Dom自定义的引用值也置空。

发觉自己写的代码，很多引用类型的值，都没有在变量结束的时候置空。

例如：

1 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    }
10     this .end : function (){
11        document.body.removeChild( this .dom);
12    }
13 }

在结束的时候单纯只是将dom对象移除，其实还需要将this.dom.innerHTML = ''以及this.dom = null。

只是针对IE系列，因为removeChild方法只是将dom元素从dom链中断开，没有释放对象。

3。使用getBoundingClientRect方法获取dom的left,top,width,height等参数。

当需要获取left,top,width,height等参数中两个或以上的时候，改用 getBoundingClientRect方法，可以一次性获取以上四个参数的一个对象，减少对

dom元素的属性访问。

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

4。使用cloneNode方式克隆dom元素。

对于要需要经常性使用doucment.createElement方法来新建的dom元素，可以先将一个dom元素用cloneNode方法克隆保存起来，

下次需要再次使用的时候，可以直接用克隆的dom元素克隆一份出来，用cloneNode方法比用createElement方法速度要快。例子：

1 var temp;
3 for ( var i = 0 ;i < 100 ;i ++ ){
4
5      var dom = temp ? temp.cloneNode():document.createElement( ' div ' );
6      if ( ! temp)temp = dom.cloneNode();
7      // do something
8 }

5。循环判断中加标识，减少Dom属性判断。

根据游戏的逻辑，例如是男人就下一百层。

当小人站立在一个方块上面，这个时候，其它的方块，可以不需要再判断小人是否会掉落到自己的方块上，只需要往上升就行了。这样，一秒可以减少好几百次

对dom元素的属性访问，减少开销。当小人离开方块的时候，判断再次生效。合理利用。

附上自己写的:是男人就下100层传送门>>

暂时就发现那么多，以后发现更多的话，再写吧。。。

转载于:https://www.cnblogs.com/floyd/archive/2010/11/05/1869943.html