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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
详解redux异步操作实践
Aug 15 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
封装 axios+promise通用请求函数操作
Aug 11 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
php查看session内容的函数
2008/08/27 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php树型类实例
2014/12/05 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
基于php判断客户端类型
2016/10/14 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
Element Input组件分析小结
2018/10/11 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
python tkinter基本属性详解
2019/09/16 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
使用python远程操作linux过程解析
2019/12/04 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
C语言笔试集
2012/07/24 面试题
计算机应用职专应届生求职信
2013/11/12 职场文书
校园创业策划书
2014/01/14 职场文书
护士自我鉴定总结
2014/03/24 职场文书
专业技术职务聘任书
2014/03/29 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
文书工作总结(范文)
2019/07/11 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android