JavaScript游戏之优化篇


Posted in Javascript onNovember 08, 2010

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

Javascript 相关文章推荐
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
javascript实现获取服务器时间
May 19 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
javascript开发中因空格引发的错误
Nov 08 #Javascript
window.ActiveXObject使用说明
Nov 08 #Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 #Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 #Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 #Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 #Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 #Javascript
You might like
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
Javascript注入技巧
2007/06/22 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
pyside写ui界面入门示例
2014/01/22 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
python3中确保枚举值代码分析
2020/12/02 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
大一自我鉴定范文
2013/12/27 职场文书
美术教学感言
2014/02/22 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
九九重阳节标语
2014/10/07 职场文书
计算机实训报告总结
2014/11/05 职场文书
师德承诺书
2015/01/20 职场文书
拾金不昧感谢信
2015/01/21 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
征求意见函
2015/06/05 职场文书
清明节随笔
2015/08/15 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS