JS操作性能优化

1. 适当使用变量

 Maybe

1 document.getElementById("myField").style.backgroundColor = "#CCC";

2 document.getElementById("myField").style.color = "#FF0000";

3 document.getElementById("myField").style.fontWeight = "bold";

Better

1 var myField = document.getElementById("myField");

2 

3 myField.style.backgroundColor = "#CCC";

4 myField.style.color = "#FF0000";

5 myField.style.fontWeight = "bold";

每次调用document.getElementById("myField")，浏览器都要在 DOM 中搜索 ID 为 myField 的元素，效率低。

2. 元素尽量一次性应用全部样式

Maybe

1 var myField = document.getElementById("myField");

2 myField.style.backgroundColor = "#CCC";

3 myField.style.color = "#FF0000";

4 myField.style.fontWeight = "bold";

Better

1 var myField = document.getElementById("myField");

2 

3 myField.style.cssText = "background-color: #CCC; color: #FF0000; font-weight: bold";

对 ID 为 myField 的元素，分别使用 style 应用三个不同的样式属性。将导致三次回流（reflow）和重绘（repaint），效率低，可以一次性应用全部样式，只导致一次回流和重绘。

3. for循环遍历数组

Maybe

1 var myArray = [1, 2, 3];

2 

3 for(var i=0; i < myArray.length; i++) {

4     //do something

5 }

Better

1 var i = 0,

2     myArray = [1, 2, 3],

3     len = myArray.lenght;

4 

5 for(; i<len; i++){

6     //do something        

7 }

每次循环迭代时，i<myArray.length 都要重新计算 myArray.length 数组的长度， 效率低。

4. 数组包含的元素太多

数组包含的元素太多，势必会导致循环的次数非常的多，如果操作也非常多，循环时间过长会直接导致锁死浏览器。倘若后面的循环不依赖前面的处理结果，则可以对循环进行拆解，这样不会长时间占用处理器，使浏览器有一个流畅的状态。

1 function handle(arr, callback){

2     setTimeout(function(){

3         callback(arr.shift());

4         if(arr.length){

5             setTimeout(arguments.callee, 0);

6         }

7     }, 0);

8 }

5. 函数内不相干的操作太多

函数内有很多不相干的操作，也可以进行拆解。

1 function handle(){

2     setTimeout(doSomething1, 0);

3     setTimeout(doSomething2, 0);

4     setTimeout(doSomething3, 0);

5     setTimeout(doSomething4, 0);

6 }

6. 优化递归函数

斐波那契（Fibonacci）数列是一个非常简单的递归数列，除第一个和第二个数外，任意一个数都可由前两个数相加得到。

1 var i = 0;

2 

3 function fibonacci(n){

4     i++;

5     return n<2 ? n: fibonacci(n-1) + fibonacci(n-2);

6 }

7 

8 console.log(fibonacci(40));  //102334155 

9 console.log("counter: " + i);  //counter: 331160281 

哇，一个函数执行那么多次，其实在递归过程中，重复计算的次数非常多，比如：要得到fibonacic(40)的值，要计算fibonacic(39)、fibonacic(38)、fibonacic(37)、fibonacic(36)、fibonacic(35)、fibonacic(34).....fibonacic(1)，要得到fibonacic(39)的值，又要重复计算fibonacic(38)、fibonacic(37)、fibonacic(36)、fibonacic(35)、fibonacic(34).....fibonacic(1)，随着n增大，重复计算的次数增长的非常快。那我们不要重复计算值来看看：

 1 var i = 0;

 2 fibonacci = function (n) {

 3     var memo = {

 4         0: 0,

 5         1: 1

 6     };

 7     var fib = function (n) {

 8         i++;

 9         if ('undefined' === typeof memo[n]) {

10             memo[n] = fib(n - 1) + fib(n - 2);

11         }

12         return memo[n];

13     };

14     return fib(n);

15 }

16 

17 console.log(fibonacci(40)); //102334155 

18 console.log("counter: " + i); //counter: 79

这次函数只执行了79次，节省了不少性能开销吧！！！

 

优化的目的就是让浏览器表现的更流畅，快速的响应用户操作，但请记住不要滥用这些优化的方法！