JavaScript性能优化的小知识

字符串连接

如果要连接多个字符串，应该少使用+=，如

s+=a
s+=b
s+=c

应该写成

s+=a+b+c

数字转换成字符串

最好用"" + 来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说。

("" +) > String() > .toString() > new String() 

浮点数转换成整型

虽然可以用parseInt()，但parseInt() 是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用 Math.floor() 或者Math.round()。

优化循环

由于每次循环过程都会计算终止条件，所以必须保证它尽可能快，也就是说避免属性查找或者其它的操作，最好是将循环控制量保存到局部变量中，也就是说对数组或列表对象的遍历时，提前将 length 保存到局部变量中，避免在循环的每一步重复取值。

 let list = document.getElementsByTagName('p'); 
 for (var i = 0; i < list.length; i++) { 
  //…… 
 } 

可写为

 let list = document.getElementsByTagName('p'); 
 for (var i = 0, l = list.length; i < l; i++) { 
  //…… 
}

在 JavaScript 中，我们可以使用for(;;;),while(),for(in)三种循环，事实上，这三种循环中 for(in)的效率极差，因为他需要查询散列键，只要可以，就应该尽量少用。for(;;;) 和while 循环，while循环的效率要优于for(;;;)，可能是因为 for(;;;) 结构的问题，需要经常跳转回去。

let arr = [1, 2, 3, 4, 5, 6, 7];  
let sum = 0;  
for (var i = 0, l = arr.length; i < l; i++) {  
 sum += arr[i];  
} 
// 可写为
let arr = [1, 2, 3, 4, 5, 6, 7];  
let sum = 0, l = arr.length;  
while (l--) { 
  sum += arr[l];  
} 

最常用的 for 循环和 while 循环都是前测试循环，而如 do-while 这种后测试循环，可以避免最初终止条件的计算，因此运行更快。

条件分支

将条件分支，按可能性顺序从高到低排列：可以减少解释器对条件的探测次数
在同一条件子的多（>2）条件分支时，使用 switch 优于 if：switch 分支选择的效率高于 if，在 IE 下尤为明显。4 分支的测试，IE 下 switch 的执行时间约为 if 的一半。
使用三目运算符替代条件分支。

if (a > b) {  
 num = a;  
} else {  
 num = b;  
}
// 可写为
num = a > b ? a : b; 

避免与 null 进行比较

由于 JavaScript 是弱类型的，所以它不会做任何的自动类型检查，所以如果看到与 null 进行比较的代码，尝试使用以下技术

• 如果值应为一个引用类型，使用instanceof操作符检查其构造函数
• 如果值应为一个基本类型，作用typeof检查其类型
• 如果是希望对象包含某个特定的方法名，则使用 typeof 操作符确保指定名字的方法存在于对象上

尽量减少DOM访问

使用JavaScript访问DOM元素很容易，代码更容易阅读，但是速度很慢。下面介绍几个要点：限制使用JavaScript来修饰网页布局，把针对访问元素的引用缓存起来。

避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些。

function search() {      
 //如果使用当前页面地址和主机域名      
 console(window.location.href + window.location.host)    
}      
//最好的方式是如下这样 先用一个简单变量保存起来      
function search() {      
 let location = window.location
 console(location.href + location.host);
} 

重复使用的调用结果，事先保存到局部变量

//避免多次取值的调用开销  
let h1 = element1.clientHeight + num1;  
let h4 = element1.clientHeight + num2; 
可写为
let eleHeight = element1.clientHeight;  
let h1 = eleHeight + num1; 
let h4 = eleHeight + num2;