JavaScript性能陷阱小结(附实例说明)(2)


a += 'x'; a += 'y';


7.原操作会比函数调用快
可以考虑在性能要求关键的循环和函数中使用可以替代的原操作。
运行缓慢的代码:

复制代码 代码如下:


var min = Math.min(a, b);
arr.push(val);


运行更快的代码:

复制代码 代码如下:


var min = a < b ? a : b;
arr[arr.length] = val;


8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串
如果你传递一个字符串到setTimeout() 或者 setInterval()中,字符串将会被eval计算而导致缓慢。
使用一个匿名函数包装来代替,这样在编译的时候就可以被解释和优化。

运行缓慢的代码:
setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000);

运行更快的代码:

复制代码 代码如下:


setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);


9.避免在对象中使用不需要的DOM引用

不要这么做:

复制代码 代码如下:


var car = new Object();
car.color = "red";
car.type = "sedan"


更好的一种形式:

复制代码 代码如下:


var car = {
color : "red";
type : "sedan"
}


10.最清晰的目标速度,最小化作用域链

低效率方法:

复制代码 代码如下:


var url = location.href;


一种高效形式:

复制代码 代码如下:


var url = window.location.href;


11.试着在脚本中少使用注释,避免使用长变量名
尽可能的保证注释少或者避免使用注释,特别是在函数,循环以及数组中。
注释不必要的减缓脚本执行并且增加了文件大小。比如:

不建议的形式:

复制代码 代码如下:


function someFunction()
{
var person_full_name="somename"; /* stores the full name*/
}


更好的写法:

复制代码 代码如下:


function someFunction()
{
var;
}


12.在当前作用域存储应用的外部变量
当一个函数被执行的运行上下问被穿件,一个活动的对象会包含所有局部变量会被推到上下文链的前面。
在作用域链中,最慢的是清楚的识别标识符,意味着局部变量是最快的。存储频繁使用的外部变量读和写都会明显的加快。这对于全局变量和其他深层次的标识符查找特别明显。
同样,在当前作用域中的变量(var myVar)比对象像属性的访问速度快(this.myVar)。

运行缓慢的代码:

复制代码 代码如下:


function doSomething(text) {
var divs = document.getElementsByTagName('div'),
text = ['foo', /* ... n ... */, 'bar'];
for (var i = 0, l = divs.length; i < l; i++) {
divs[i].innerHTML = text[i];
}
}


运行更快的代码:

复制代码 代码如下:


function doSomethingFaster(text) {
var doc = document,
divs = doc.getElementsByTagName('div'),
text = ['foo', /* ... n ... */, 'bar'];
for (var i = 0, l = divs.length; i < l; i++) {
divs[i].innerHTML = text[i];
}
}


如果你需要访问一个元素(如 head)在一个大的循环中,使用一个本地的DOM访问(如例子中的get)会更快。
运行更快的代码:

复制代码 代码如下:


function doSomethingElseFaster() {
var get = document.getElementsByTagName;
for (var i = 0, i < 100000; i++) {
get('head');
}
}


13.使用变量缓存值
在做重复工作的地方使用局部变量缓存值。
下面的一组例子表明了存储值到局部变量的广泛意义。

例子1.计算执行前在循环体内使用变量存储数学函数
错误的方法:

复制代码 代码如下:


var d=35;
for (var i=0; i<1000; i++) {
y += Math.sin(d)*10;
}


更好的处理:

复制代码 代码如下:


var d = 55;
var math_sind = Math.sin(d)*10;
for (var i=0; i<1000; i++) {
y += math_sind;
}


例子2.保存数组的长度在循环中使用
糟糕的处理:
数组的长度每次都会被重复计算

复制代码 代码如下:


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


更好的改进:
更好的方法是保存数组的长度

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfxxw.html