最佳实践

性能

避免全局查找

1
2
3
4
5
6
7
8
function updateUI() {
var imgs = document.getElementByTagName("img");
for (var i=0, len=imgs.length; i < len; i++) {
imgs[i].title = document.title + " images " + i;
}
var msg = document.getElementById("msg");
msg.innerHTML = "update complete.";
}

上面代码包含了3次对全局document对象的引用, 如果for循环多次就会有多次的document作用域链的查找. 我们可以通过创建一个指向document对象的局部变量, 这边就避免了每次全局作用域的查找, 修改如下

1
2
3
4
5
6
7
8
9
10
function updateUI() {
var doc = document;
var imgs = doc.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++) {
imgs[i].title = doc.title + " images " + i;
}

var msg = doc.getElmentById("msg");
msg.innerHTML = "update complete.";
}

避免with语句

1
2
3
4
5
function updateBody() {
with (document.body) {
innerHTML = "hello world";
}
}

with会创建自己的作用域, 由于额外的作用域查找, 在with里的代码肯定会比外面的代码执行的慢, 建议使用局部变量来完成相同的事情而不引入新的作用域.

1
2
3
4
function updateBody() {
var body = document.body;
body.innerHTML = "hello world"
}