前面有一篇也是关于javascript性能方面的文章,是看了《高性能 javascript》后的笔记,这是一篇自己在项目和学习过程中的积累,部分参考了一些学习博客。对面试和代码的编写都有帮助。

避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些。

字符串的连接

如果要连接多个字符串,应该少使用+=,如

1
2
3
s += a;
s += b;
s += c;

应该写成 s+=a + b + c;
而如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存,使用JavaScript数组来收集,最后使用join方法连接起来。

数字转换成字符串

("" +) > String() > .toString() > new String()
字符串如’1322’转换成数字的时候可以在前面加’+’,如var str = '123';var num = +str,那么typeof numnumber

浮点数转换成整型

很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()

使用 DocumentFragment 优化多次 append

一旦需要更新 DOM,请考虑使用文档碎片来构建 DOM 结构,然后再将其添加到现存的文档中。

1
2
3
4
5
6
7
8
9
10
11
12
13
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
document.body.appendChild(el);
}
//可以替换为:
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);

使用一次 innerHTML 赋值代替构建 dom 元素

对于大的 DOM 更改,使用innerHTML要比使用标准的 DOM 方法创建同样的 DOM 结构快得多。

1
2
3
4
5
6
7
8
9
10
11
12
13
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);
//可以替换为:
var html = [];
for (var i = 0; i < 1000; i++) {
html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');

使用事件代理

任何可以冒泡的事件都不仅仅可以在事件目标上进行处理,目标的任何祖先节点上也能处理,使用这个知识就可以将事件处理程序附加到更高的地方负责多个目标的事件处理,同样,对于内容动态增加并且子节点都需要相同的事件处理函数的情况,可以把事件注册提到父节点上,这样就不需要为每个子节点注册事件监听了。另外,现有的 js 库都采用observe方式来创建事件监听,其实现上隔离了 DOM 对象和事件处理函数之间的循环引用,所以应该尽量采用这种方式来创建事件监听

缩短否定检测

1
2
3
4
5
6
7
8
9
10
11
12
13
if (oTest != '#ff0000') {
//do something
}
if (oTest != null) {
//do something
}
if (oTest != false) {
//do something
}
//虽然这些都正确,但用逻辑非操作符来操作也有同样的效果:
if (!oTest) {
//do something
}

条件分支

将条件分支,按可能性顺序从高到低排列:可以减少解释器对条件的探测次数
在同一条件子的多(>2)条件分支时,使用switch优于ifswitch分支选择的效率高于 if,在 IE 下尤为明显。4 分支的测试,IE 下switch的执行时间约为 if 的一半。
使用三目运算符替代条件分支

1
2
3
4
5
6
7
if (a > b) {
num = a;
} else {
num = b;
}
//可以替换为:
num = a > b ? a : b;

续。。。