Js在性能方面有多要注意的地方:
避免全局查找
Js性能优化最重要的就是注意全局查找,因为作用域的查找是先找局部作用域在没有找到之后在去上一级作用域查找直到全局作用域,所以全局作用域查找的性能消耗肯定要比本函数局部作用域的消耗大。举个例子:
function setInnerHtml(){ var divDom=doucument.getElementsByTagName(“div”); for(var i=0,len=divDom.lemgth;i<len;i++){ divDom.innerHTML=doucument.getElementByid(“dom”).innerHtml+I; } }
这段代码循环调用了doucument.getElementByid(“dom”),而在循环外只执行了一次doucument所以没必要将doucument赋值局部变量,而是把循环里面的赋值为局部变量,每次循环就不用再去查找全局的doucument对象。
function setInnerHtml(){ var domhtml= doucument.getElementByid(“dom”).innerHtml; var divDom=doucument.getElementsByTagName(“div”); for(var i=0,len=divDom.lemgth;i<len;i++){ divDom.innerHTML= domhtml +I; } }
原则就是当要多次调用全局对象的时候特别在循环中,最后将全局对象赋值到局部变量中,当然这种在几十次的调用上性能差异不会很明显,但作为一个程序员既然有性能优化的写法还是尽量去做。
避免with语句
现在基本不会用到这个语句了,就不多说。
避免不必要的属性查找
简单说就是变量存值,调用这个变量的性能消耗是最小的,而对象的属性的取值的性能消耗相对多一些。比如:
var query=window.location.href.subtring(window.location.href.indexOf(“?”));
这段代码有6次属性查找效率特别不好,最好改为:
var url=window.loaction.href; var query=url.substring(url.indexOf(“?”));
这样优化就效率提高了很多。
优化循环
1) 减值迭代:大多数循环都是从0开始增加循环,在很多情况下从最大值减值循环效率更高。
2) 简化终止条件:由于每次循环都会去判断终止条件,所以简化终止条件也可以提高循环效率。
3) 简化循环体:循环体是执行最多的,所以要保证循环体的优化。
避免解析js代码字符串
在js代码中解析js代码字符串时必须重新启动一个解析器来解析代码,这样造成比较大的性能消耗,所以尽量避免比如eval函数,function构造js代码字
符串函数,setTimeout传字符串的情况。
原生方法较快,尽量用原生方法。
Switch语句较快。
位运算符较快。
2. 代码规范
代码注释:
1) 函数和方法:在每个函数或方法都应该包含注释说明函数的功能,输入输出。
2) 复杂的算法:在复杂的算法中要加入注释,好让人理解算法的逻辑思路。
3) Hack:兼容性代码上也要加入注释说明。
4) 大段代码:用于完成单个任务的多行代码应该在前面放一个描述任务的注释
Html是结构成,js是行为层,他们天生需要交互,我们在写代码的时候应该尽量让html和js的关联度减小,有些方法会让他们的过于紧密的耦合,比如:js在html页面中script标签中声明js代码、在html标签中绑定onclick事件、在js改写html代码都会造成html和js过于紧密的耦合。
Html呈现应该尽可能和js保持分离,当js用于插入数据时,尽量不要直接插入标记,一般可以在页面中直接包含并隐藏标记,然后等到整个页面渲染好之后,就可以用js显示该标记。
将html和js解耦可以在调试过程中节省时间,更加容易确定错误的来源,也减轻维护难度。
解耦css/JavaScript
JavaScript和css也是非常紧密相关的,js经常对页面的样式做动态修改。为了让他们的耦合更松散,可以通过js修改对应的class样式类。
解耦应用逻辑/事件处理程序
在实际开发中我们经常在一个事件函数出来将要处理的所有代码都放在这个事件中,例如:
function handleKeyPress(event){ event=EventUtil.getTarget(event); if(event.keyCode===13){ var target=EventUtil.getTarget(event); var value=5*parseInt(target.value); if(value>10){ document.getElementById(“error-msg”).style.display=”block”; } } }