JavaScript代码优化（一）

尽可能避免使用全局变量和函数.
全局的变量和函数其实等价于 window 对象的属性/方法, 访问速度自然会慢.

var myvar = 0; // 336ms
window.myvar = 0; // 2383ms

var myfunc = function(){} // 3515ms
window.myfunc = function(){} // 10151ms

尽量避免用 new 操作符创建函数.
可能通过 new 创建的函数还需要额外地对函数内容字符串进行解析操作.

function f(){}; // 277ms
var f  = function(){} // 3085ms
var f = new Function("") // 13275ms

尽量避免使用 eval() 执行代码.
原因同 new 创建函数的操作.

 

var myfunc = function(){} // 3408ms
eval("var myfunc = function(){}"); // 9140ms

少使用 new 操作符创建数组.
原因同 new 创建函数的操作. 特别在有大量数据时更为明显

a = [1, 2, 3]; // 4360ms
a = new Array(1, 2, 3); // 5000ms

尽量避免使用 push() 和 pop() 处理数组数据.

a[i] = value; // 1270ms
a.push(value); // 3240ms

使用对象代替数组存储数据对性能略有影响.
也许是因为 Javascript 的数组是个带有扩展方法和属性的对象, 而不像 VBScript 那样是单纯的数据结构.

a[i] = value; // 1270ms
obj[property] = value; // 960ms

使用 ++ 代替 x = x+1 和 +=.
事实上 ++ 并不比 + 和 += 快很多, 但是在大量的操作时就会体现出其优势.
而 + 和 += 几乎没有性能差别. 同理对 -- 和 - 以及 -= 适用.

x++; // 378ms
x = x+1; // 406ms
x += 1; // 406ms

使用局部变量缓存对象属性和函数指针
例如在遍历数组时缓存数组长度, 事实上获取 Javascript 的数组长度等于调用一个方法函数(大部分Javascript 引擎是这样实现的).
如果对 HTML DOM 进行操作, 那么优化的效果会非常明显.

for(var i=0;i<arr.length;i++){ ... } // 162ms

var length = arr.length;
for(var i=0;i<length;i++){ ... } // 156ms

或者使用局部变量缓存一个外部函数(具体效果视代码复杂度而定).
如果代码块中要多次调用一个外部函数或变量, 那么缓存的效果会非常明显.

function test(){ ... }
function run1(){  test(); }
function run2(){  var t = test;  t(); }

run1(); // 98ms
run2(); // 80ms

避免使用 with 操作符