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

赞 (0)

相关推荐

  • 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中,这样

  • JavaScript代码性能优化总结(推荐)

    JavaScript代码性能优化总结(推荐)

    下面是我总结的一些小技巧,仅供参考. 以下代码基本上在jQuery的源码里面都可以看到,如有说得不对的地方,请大家指出. 尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢.浏览器已经实现的方法,就不要再去实现一遍了.另外,浏览器已经实现的方法在算法方面已经做了很多优化. 避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些. 尽量减少循环次数 少一层循环,就能提高数倍性能.如果要对一个数组的每个元素

  • pygame实现俄罗斯方块游戏（AI篇1）

    pygame实现俄罗斯方块游戏（AI篇1）

    上次更新到pygame实现俄罗斯方块游戏(基础篇3) 现在继续 一.定义玩家类 定义玩家类是为了便于进行手动和机器模式或各种不同机器人模式的混合使用,增加代码扩展性. 可以先定义一个玩家基类 class Player(object): auto_mode=False # 是否是自动模式,自动模式应当不响应键盘操作 def __init__(self): pass def run(self): # 进行操作 pass 手动类和机器类继承自Player类 class HumanPlayer(Play

  • pygame实现俄罗斯方块游戏（AI篇2）

    pygame实现俄罗斯方块游戏（AI篇2）

    继续pygame实现俄罗斯方块游戏(AI篇1)的代码更新 一.消除后才做评价 上一篇我们是对方块落下的位置和落下后出来的空洞进行了评价,但是这些评价都是没有计算消除的,以至于机器人现在不会考虑去进行那些完全不会留下空洞的消除,比如下面这种消除. 但我们知道这种消除是不会产生空洞的. 所以我们要在计算评价的时候最好计算消除以后的评价. 我们只要在Matrix的函数里加一个do_clear函数来进行消除 def do_clear(self): for i in range(self.rows-1,-

  • javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来

    javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来

    首先来说,让一个游戏赋有可玩性必须要动静结合.(哈哈,大家以为我要讲作文了...但其实我今天要讲的是Javascript)静态的东西谁不会做呢?因为东西一生下来就是静态的(除非你是用的gif动画),所以不需要任何处理就能完成静态.那么我将要在下面告诉大家如何运用Javascript将静态图片变为动态图片. 一.图片准备     fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png首先,我找了一些出自经典游戏<三国志曹操传>

  • C语言实现扫雷游戏及其优化

    C语言实现扫雷游戏及其优化

    本文实例为大家分享了C语言实现扫雷游戏及其优化的具体代码,供大家参考,具体内容如下 关于扫雷优化 1.核心思想:使用两个二维数组进行设计,一个用于显示,一个用于后台雷的布置. 2.使用宏常量,后期可以任意修改游戏难度. 3.关于扫雷拓展模块,目前使用的方法比较low,若周围均没有,则全部显示. 4.剩余位置数使用全局变量count,必须考虑拓展之后count变化. 有待改进之处 1.需设计标记雷的步骤,增加用户体验. 2.拓展方式有待改进. 3.界面布局仍需要进行优化. 扫雷游戏代码 #incl

  • Mysql查询最近一条记录的sql语句(优化篇)

    下策--查询出结果后将时间排序后取第一条 select * from a where create_time<="2017-03-29 19:30:36" order by create_time desc limit 1 这样做虽然可以取出当前时间最近的一条记录,但是一次查询需要将表遍历一遍,对于百万以上数据查询将比较费时:limit是先取出全部结果,然后取第一条,相当于查询中占用了不必要的时间和空间:还有如果需要批量取出最近一条记录,比方说:"一个订单表,有用户,订

  • pygame实现俄罗斯方块游戏（基础篇3）

    pygame实现俄罗斯方块游戏（基础篇3）

    上一章请点击查看:pygame实现俄罗斯方块游戏(基础篇2) 现在继续 一.给每个方块设置不同的颜色 根据代码这里可以判断正在下落的方块在那些Block子类里加一个属性最合适,而已经落下的方块颜色管理最合适的地方应该是修改在Panel类里的rect_arr Block子类里的修改比较简单,以TBlock类为例,在__init__函数加一行 self.color=(255,0,0) 在Panel的paint函数里将代码 # 绘制正在落下的方块 if self.move_block: for rec

  • pygame实现俄罗斯方块游戏（基础篇2）

    pygame实现俄罗斯方块游戏（基础篇2）

    接上章<pygame实现俄罗斯方块游戏(基础篇1)>继续写俄罗斯方块游戏 五.计算方块之间的碰撞 在Panel类里增加函数 def check_overlap(self, diffx, diffy): for x,y in self.moving_block.get_rect_arr(): for rx,ry in self.rect_arr: if x+diffx==rx and y+diffy==ry: return True return False 修改move_block函数的判断,

  • Androd 勇闯高阶性能优化之布局优化篇

    Androd 勇闯高阶性能优化之布局优化篇

    目录

随机推荐