提高JavaScript效率的编程实践

偏执的太偏执、 2022-05-30 12:42 229阅读 0赞

# 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()

运行时间依次为：

![20180312195520261][]

## 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()

运行时间依次为：

![20180312195904790][]

由此看出，双重求值导致运行时间为原来的近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()

![20180312200310804][]

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

## 1) 创建方式 ##

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

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

![20180312200921748][]

## 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()

运行速度比较：

![20180312202050461][]

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

标准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()

![20180312204449528][]

# 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()

![20180312205400145][]

[20180312195520261]: /images/20220530/91c44edf32cd481e946ec4c67c413e57.png
[20180312195904790]: /images/20220530/d6be5c339d02486790f24467d635e117.png
[20180312200310804]: /images/20220530/9ad2affcba9f49d784bcabd9b9085f2d.png
[20180312200921748]: /images/20220530/668b560cfa5b4882b7c2dc07b1ddd2fc.png
[20180312202050461]: /images/20220530/1039713844ce40958a9bebe60692e955.png
[20180312204449528]: /images/20220530/b64e144899034af894310e5d5574f3d0.png
[20180312205400145]: /images/20220530/52733b51b71544bbbaacee754dcb58a6.png