JS操作性能优化

1. 适当使用变量

Maybe

 document.getElementById("myField").style.backgroundColor = "#CCC";
 document.getElementById("myField").style.color = "#FF0000";
 document.getElementById("myField").style.fontWeight = "bold";

Better

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

 myField.style.backgroundColor = "#CCC";
 myField.style.color = "#FF0000";
 myField.style.fontWeight = "bold";

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

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

Maybe

 var myField = document.getElementById("myField");
 myField.style.backgroundColor = "#CCC";
 myField.style.color = "#FF0000";
 myField.style.fontWeight = "bold";

Better

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

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

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

3. for循环遍历数组

Maybe

 var myArray = [1, 2, 3];

 for(var i=0; i < myArray.length; i++) {
     //do something
 }

Better

 var i = 0,
     myArray = [1, 2, 3],
     len = myArray.lenght;

 for(; i<len; i++){
     //do something
 }

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

4. 数组包含的元素太多

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

 function handle(arr, callback){
     setTimeout(function(){
         callback(arr.shift());
         if(arr.length){
             setTimeout(arguments.callee, 0);
         }
     }, 0);
 }

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

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

 function handle(){
     setTimeout(doSomething1, 0);
     setTimeout(doSomething2, 0);
     setTimeout(doSomething3, 0);
     setTimeout(doSomething4, 0);
 }

6. 优化递归函数

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

 var i = 0;

 function fibonacci(n){
     i++;
     return n<2 ? n: fibonacci(n-1) + fibonacci(n-2);
 }

 console.log(fibonacci(40));  //102334155
 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增大，重复计算的次数增长的非常快。那我们不要重复计算值来看看：

 var i = 0;
 fibonacci = function (n) {
     var memo = {
         0: 0,
         1: 1
     };
     var fib = function (n) {
         i++;
         if ('undefined' === typeof memo[n]) {
             memo[n] = fib(n - 1) + fib(n - 2);
         }
         return memo[n];
     };
     return fib(n);
 }

 console.log(fibonacci(40)); //102334155
 console.log("counter: " + i); //counter: 79

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

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