前端开发性能之编程实践

游戏前端开发主程
游戏开发前端后端
游戏前端开发 策划

*避免双重求值:
javascript允许在程序中提取一个包含代码的字符串,然后动态执行它,eval() Function()构造函数 setTimeout() setInterval()。
双重求值过程:当你在javascript代码中执行另一段javascript代码时,都会导致双重求值的性能消耗,此代码首先会以正常的方式求值,然后在执行过程中对包含字符串的代码发起另一个求值,双重求值是一项昂贵的操作,它比直接包含代码执行速度要慢很多。
大多数时候,没有必要使用eval()和Function(),因此最好避免使用它们,至于另外两个函数:setTimeout()和setInterval(),建议传入函数而不是字符串来作为第一个参数。

*使用Object/Array字面量

*不要重复工作:别做无关紧要的工作,别重复做已经完成的工作,第一部分通常是很容易在代码重构的时候发现的,工作中存在各种代码的重复。
举例:浏览器探测
function addHandler(target,eventType,handler){
if(target.addEventListener){
target.addEventListener(eventType,handler,false);
}else{
target.attachEvent(“on”+eventType,handler);
}
}
function removeHandler(target,eventType,handler){
if(target.removeEventListener){
target.removeEventListener(eventType,handler,false);
}else{
target.detachEvent(“on”+eventType,handler);
}
}
隐藏的性能问题就是每次函数调用都做了重复判断指定方法是否存在。

*延迟加载:延迟加载意味着在信息使用前不会做任何的操作。
调用延迟加载函数时,第一次总会消耗较长的时间,因为它必须运行检测在接着再调用另一个函数完成任务,但随后调用相同的函数会更快,因为不需要再执行检测逻辑,当一个函数在页面中不会立刻调用,延迟加载时最好的选择。
function addHandler(target,eventType,handler){
if(target.addEventListener){
addHandler=function(target,eventType,handler){
target.addEventListener(eventType,handler,false);
}
}else{
addHandler=function(target,eventType,handler){
target.attachEvent(“on”+eventType,handler);
}
}
addHandler(target,eventType,handler);
}
function removeHandler(target,eventType,handler){
if(target.removeEventListener){
removeHandler=function(target,eventType,handler){
target.removeEventListener(eventType,handler,false);
};
}else{
removeHandler=function(target,eventType,handler){
target.detachEvent(“on”+eventType,handler);
};
}
}

*条件预加载:它是在脚本加载期间提前,而不会等待函数被调用的时候。
var addHandler=document.body.addEventListener?function(target,eventType,handler){
target.addEvenetListener(eventType,handler,false);
}:function(target,eventType,handler){
target.attachEvent(“on”+eventType,handler);
}
var removeHandle=document.body.removeEventListener?function(target,eventType,handler){
target.removeEventListener(eventType,handler,false)
}:function(target,eventType,handler){
target.detachEvent(“on”+evenTyoe,handler);
}
先检测addEventListener()和removeEventListener()是否存在,然后根据结果指定选择最佳的函数,条件预加载确保所有函数调用消耗的时间相同,其代价是需要在脚本加载就检测,而不是加载后,预加载适用于一个函数马上就要被用到,并且在整个页面的生命周期中频繁出现的场合。

*使用速度快的部分:javascript在某些部分运行快的使人难以置信。
位操作:& | ^ ~
原生方法:javascript引擎提供的原生方法要更快。
Math.abs(num) Math.exp(num)E的指数 Math.log(num) Math.pow(num,power)
Math.sqrt(num)num平方根 Math.cos(x) Math.sin(x) Math.tan(x)

小结:
1:避免使用eval()和Function()构造器来避免双重求值带来的性能消耗。同样的,给setTimeout()和setInterval()传递函数而不是字符串作为参数。
2:尽量使用直接量创建对象和数组。
3:避免做重复的工作,当需要检测浏览器时,可使用延迟加载或条件预加载。
4:在进行数学计算时,考虑使用直接操作数字的二进制形式的位运算。
5:javascript原生的方法总会你写的任何代码要快,尽量使用原生的方法。

杭州 游戏前端开发
web前端游戏开发
前端游戏开发技能要求
» 本文来自:前端开发者 » 《前端开发性能之编程实践》
» 本文链接地址:https://www.rokub.com/7584.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!