Js 在性能方面有多要注意的地方:
Js 性能优化最重要的就是注意全局查找,因为作用域的查找是先找局部作用域在没有找到之后在去上一级作用域查找直到全局作用域,所以全局作用域查找的性能消耗肯定要比本函数局部作用域的消耗大。举个例子:
- function setInnerhtml() {
- var divDom = doucument.getElementsByTagName("div");
- for (var i = 0,
- len = divDom.lemgth; 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) {
- divDom.innerHTML = domhtml + I;
- }
- }
原则就是当要多次调用全局对象的时候特别在循环中,最后将全局对象赋值到局部变量中,当然这种在几十次的调用上性能差异不会很明显,但作为一个程序员既然有性能优化的写法还是尽量去做。
现在基本不会用到这个语句了,就不多说。
简单说就是变量存值,调用这个变量的性能消耗是最小的,而对象的属性的取值的性能消耗相对多一些。比如:
- 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 代码字符串时必须重新启动一个解析器来解析代码,这样造成比较大的性能消耗,所以尽量避免比如 eval 函数,function 构造 js 代码字
符串函数,setTimeout 传字符串的情况。
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 解耦可以在调试过程中节省时间,更加容易确定错误的来源,也减轻维护难度。
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";
- }
- }
- }
这里就是把逻辑处理代码和事件处理代码放到一起,这样会让调试不好调试,维护难度变高,而且要是突然修改要新增加一个事件做同样类似的逻辑处理,那就要复制一份逻辑处理代码到另一个事件函数中。较好的方法是将应用逻辑和事件处理程序分离开。例如:
- function validateValue(value){
- value=5*parseInt(value);
- if(value>10){
- document.getElementById("error-msg").style.display="block";
- }
- }
- function handleKeyPress(event){
- event=EventUtil.getEvent(event);
- if(event.keyCode===13){
- var target=EventUtil.getTarget(event);
- validateValue(target.value);
- }
- }
这样事件处理和逻辑处理就分离开了,这样做有几个好处,可以让你更容易更改触发特定过程的事件,其次可以在不附加到事件的情况下测试代码,使其更易创建单元测试或是自动化应用流程。
事件和应用逻辑之间的松散耦合的几条原则:
这样会让脚本执行一致和可维护,最多创建一个全局变量。类似 jQuery 一样,所以方法属性都在 $ 对象当中,避免对全局变量造成过多的污染。
数据和使用它的逻辑进行分离要注意一下几点:
来源: http://www.cnblogs.com/hetaojs/p/6497542.html