JavaScript 代码优化和部署——“性能和部署”的注意要点

注意作用域

避免全局查找

function updateUI () {
    var images = document.getElementsByTagName("img");
    for (var i = 0, len = images.length; i < len; i++) {
        images[i].title = document.title + " image " + i;
    }
    var msg = document.getElementById("msg");
    msg.innerHTML = "Update complete";
}

以上代码应该修改如下：

function updateUI () {
    var doc = document; //doc
    var images = doc.getElementsByTagName("img");
    for (var i = 0, len = images.length; i < len; i++) {
        images[i].title = doc.title + " image " + i; //doc
    }
    var msg = doc.getElementById("msg"); //doc
    msg.innerHTML = "Update complete";
}

避免with语句

必须使用with语句的情况很少，因为它主要用于消除额外的字符。

使用正确方法

避免不必要的属性查找

算法的复杂度是使用O符号来表示的，最简单快速的算法是常熟值O(1)。

使用变量和数组要比访问对象上的属性更有效率。

var query = window.location.href.substring(window.location.href.indexOf("?"));

上面的代码需要6次属性查找，应该改为：

var url = window.location.href;
var query = url.substring(url.indexOf("?"));

上面的代码则减少为4次属性查找。

优化循环

for (var i = 0; i < Things.length; i++) {
    Things[i]
};
for (var i = Things.length - 1; i >= 0; i--) {
    Things[i]
};

应该才去上面第二种写法。

var id = Things.length - 1;
if (i > -1) {
    do {
        Things[i];
    } while (--i >= 0);
}

或者把循环改成后测试循环。

展开循环

使用Duff装置

其他

避免双重解释
用原生方法C或C++等
用Switch代替if-else
位操作符代替布尔运算和算数运算

最小化语句数

多个变量声明

var count = 5;
var color = "red";
var value = [21, 3, 21, 4];

var count = 5,
    color = "red",
    value = [21, 3, 21, 4];

应该采用下面的方法

使用数组和对象字面量语法

var values = new Array();
values[0] = 123;
values[1] = 456;
var obj = new Object();
obj.name = "Oli";
obj.age = 18;

var values = [123, 456];
var obj = {
    name: "Oli",
    age: 18
};

应该采用下面的方法

优化DOM交互

最小化现场更新

使用fragment方法更新DOM

使用innerHTML

var list = document.getElementById("myList"),
    html = "",
    i;
for (var i = 10; i >= 0; i--) {
    html = html + "<li>listing...</li>";
};
list.innerHTML = html;

类似fragment方法，要避免以下写法：

var list = document.getElementById("myList"),
    i;
for (var i = 10; i >= 0; i--) {
    list.innerHTML = list.innerHTML + "<li>listing...</li>";
};

使用事件代理

任何可以冒泡的事件都可以在祖先节点上处理事件；

注意HTMLCollection

var imgs = document.getElementsByTagName("img");
for (var i = 0, len = imgs.length; i < len; i++) {
    //processing...
};

部署

构建过程

将每个对象或自定义类型分别放在单独的文件中。

将代码分离称多个文件只是为了提高可维护性，并非为了部署。

要进行部署的时候，需要将这些源代码合并为一个或几个归并文件。

Ant构建工具（http://ant.apache.org）

验证

用JSLint（http://www.jslint.com）

压缩

文件压缩

使用YUI压缩器（http://yuilibrary.com/projects/yuicompressor）

HTTP压缩

在Apache Web服务器中可以用下面两个模块进行HTTP压缩：mod_gzip和mod_deflate