JavaScript代码规范和性能整理

1. 性能

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/JavaScript

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”;

}

}

}

这里就是把逻辑处理代码和事件处理代码放到一起，这样会让调试不好调试，维护难度变高，而且要是突然修改要新增加一个事件做同样类似的逻辑处理，那就要复制一份逻辑处理代码到另一个事件函数中。较好的方法是将应用逻辑和事件处理程序分离开。例如：

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);

}

}

这样事件处理和逻辑处理就分离开了，这样做有几个好处，可以让你更容易更改触发特定过程的事件，其次可以在不附加到事件的情况下测试代码，使其更易创建单元测试或是自动化应用流程。

事件和应用逻辑之间的松散耦合的几条原则：

1. 勿将event对象传给其他方法；只传来着event对象中所需要的数据；
2. 任何可以在应用层面的动作都应该可以在不执行任何时间处理程序的情况下能正常运行。
3. 任何时间处理程序都应该处理事件，然后将处理转交给应用逻辑。

• 避免全局变量

这样会让脚本执行一致和可维护，最多创建一个全局变量。类似jQuery一样，所以方法属性都在$对象当中，避免对全局变量造成过多的污染。

• 尽量使用常量

数据和使用它的逻辑进行分离要注意一下几点：

1.  重复值
2. 用户界面字符串
3.  url
4. 任意可能会更改的值

• 其他优化

1. 多变量声明时用一条语句逗号隔开声明
2. 对dom的操作的优化
3. 对dom进行html代码插入尽量在最后一次添加到dom对象中。
4. innerHTML的效率要比appendChild的效率高，以为innerHTML会创建一个HTML解析器，然后使用内部的DOM调用来创建DOM结构，而非基于JavaScript的DOM调用，由于内部方法是编译好的而非解释执行，所以执行快的多。
5. 使用事件委托减少绑定的事件数量。
6. 尽量少用到返回HTMLCollection语句。