提高JavaScript效率的编程实践

1、避免双重求值

使用evel()和Function()构造器时，使得在JavaScript代码中执行另一段JavaScript代码，因此会导致双重求值的性能消耗。

1) eval()例子比较：

var array=['first','second','third'];

console.time()
var item=eval("array[0]")
console.timeEnd()

console.time()
var item=array[0]
console.timeEnd()

运行时间依次为：

2) Function() 构造器例子比较：

var num1=5,num2=6;
function sum1(x,y){ return x+y }//函数声明
var sum2=new Function('x','y','return x+y')//函数构造器

console.time()
sum1(num1+num2)
console.timeEnd()

console.time()
sum2(num1+num2)//
console.timeEnd()

运行时间依次为：

由此看出，双重求值导致运行时间为原来的近5倍长。

3) setTimeout()和setInterval()的参数

两者应该传递函数作为参数，而不是字符串

var num1=5,num2=6,sum;

console.time()
setTimeout("sum=num1+num2",0)//字符串参数
console.timeEnd()

console.time()
setTimeout(function(){var sum=num1+num2},0)//函数参数
console.timeEnd()

2、优化数据创建方式和数据格式

1) 创建方式

使用数据构造器创建数据的速度很慢，尽量使用直接量创建对象和数组等数据。

console.time()
var array=new Array('first','second','third')//构造器创建数组
console.timeEnd()

console.time()
var array=['first','second','third'];//直接量创建数组
console.timeEnd()

2)数据格式

JSON是一种用对象和数组直接量编写的轻量级且易于解析的数据格式，目前是广泛使用的一种数据格式。然而，以不同的方式创建的JSON数据，在开发过程中的访问性能有明显的不同。

console.time()
//标准方式，可读性好
var json=[
    {'id':1,'username':'user1','passwd':'root1'},
    {'id':2,'username':'user2','passwd':'root2'},
    {'id':3,'username':'user3','passwd':'root3'}
]
console.timeEnd()

console.time()
//简化方式，可读性较差，但是速度有略微提升
var json=[
    {'i':1,'u':'user1','p':'root1'},
    {'i':2,'u':'user2','p':'root2'},
    {'i':3,'u':'user3','p':'root3'}
]
console.timeEnd()

console.time()
//数组方式，无属性名，可读性更差，但是文件尺寸小得多，且性能更快
var json=[
    [1,'user1','root1'],
    [2,'user2','root2'],
    [3,'user3','root3']
]
console.timeEnd()

运行速度比较：

数据格式按照耗时从大到小排序：

标准XML > 标准的HSON-P > 简化的XML > 标准的JSON > 简化的JSON > 简化的JSON-P > 数组JSON > 数组JSON-P > 自定义格式（脚本注入） > 自定义格式（XHR）

自己可以通过以下链接进行测试：http://techfoolery.com/formats/

3、在进行数学计算时，考虑使用二进制形式的位运算

例如，判断整数的奇偶，

var num=1

console.time()
if(num % 2){
    console.log('数学运算符计算结果：奇数')
}else{
    console.log('偶数')
}
console.timeEnd()

console.time()
if(num & 1){
    console.log('二进制位运算计算结果：奇数')
}else{
    console.log('偶数')
}
console.timeEnd()

4、原生方法最快

//jQuery
console.time()
$('.wrap').html('content')
console.timeEnd()

//querySelector()
console.time()
document.querySelector('.wrap').innerHTML='content'
console.timeEnd()

//querySelectorAll()
console.time()
document.querySelectorAll('.wrap')[0].innerHTML='content'
console.timeEnd()

//document.getElementsByClassName()
console.time()
document.getElementsByClassName('wrap')[0].innerHTML='content'
console.timeEnd()