Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript性能陷阱小结(附实例说明)_javascript技巧

WBOY
Freigeben: 2016-05-16 18:13:10
Original
926 Leute haben es durchsucht

1.避免使用eval或者Function构造函数
2.避免使用with
3.不要在性能要求关键的函数中使用try-catch-finally
4.避免使用全局变量
5.避免在性能要求关键的函数中使用for-in
6.使用字符串累加计算风格
7.原操作会比函数调用快
8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串
9.避免在对象中使用不需要的DOM引用
10.最清晰的目标速度,最小化作用域链
11.试着在脚本中少使用注释,避免使用长变量名
12.在当前作用域存储应用的外部变量
13.使用变量缓存值

1.避免使用eval或者Function构造函数
使用eval或者Function构造函数的代价是非常昂贵的,每次都需要脚本引擎转换源代码到可执行代码。
此外,使用eval处理字符串必须在运行时解释。

运行缓慢的代码:

复制代码 代码如下:

function addMethod(object, property, code) {
object[property] = new Function(code);
}
addMethod(myObj, 'methodName', 'this.localVar=foo');

运行更快的代码:
复制代码 代码如下:

function addMethod(object, property, func) {
object[property] = func;
}
addMethod(myObj, 'methodName', function () { 'this.localVar=foo'; });

2.避免使用with
尽管很方便,with需要附加的查找引用时间,因为它在编译的时候并不知道作用域的上下没。

运行缓慢的代码:
复制代码 代码如下:

with (test.object) {
foo = 'Value of foo property of object';
bar = 'Value of bar property of object';
}

运行更快的代码:
复制代码 代码如下:

var myObj = test.object;
myObj.foo = 'Value of foo property of object';
myObj.bar = 'Value of bar property of object';

3.不要在性能要求关键的函数中使用try-catch-finally
try-catch-finally在运行时每次都会在当前作用域创建一个新的变量,用于分配语句执行的异常。
异常处理应该在脚本的高层完成,在异常不是很频繁发生的地方,比如一个循环体的外面。
如果可能,尽量完全避免使用try-catch-finally。

运行缓慢的代码:
复制代码 代码如下:

var object = ['foo', 'bar'], i;
for (i = 0; i try {
// do something that throws an exception
} catch (e) {
// handle exception
}
}

运行更快的代码:
复制代码 代码如下:

var object = ['foo', 'bar'], i;
try {
for (i = 0; i // do something
}
} catch (e) {
// handle exception
}

4.避免使用全局变量
如果你在一个函数或者其它作用域中使用全局变量,脚本引擎需要遍历整个作用域去查找他们。
全局作用域中的变量在脚本的生命周期里都存在,然后局部范围的会在局部范围失去的时候被销毁。

运行缓慢的代码:
复制代码 代码如下:

var i,
str = '';
function globalScope() {
for (i=0; i str += i; // here we reference i and str in global scope which is slow
}
}
globalScope();

运行更快的代码:
复制代码 代码如下:

function localScope() {
var i,
str = '';
for (i=0; i str += i; // i and str in local scope which is faster
}
}
localScope();

5.避免在性能要求关键的函数中使用for-in
for-in循环需要脚本引擎建立一张所有可枚举属性的列表,并检查是否与先前的重复。
如果你的for循环作用域中的代码没有修改数组,可以预先计算好数组的长度用于在for循环中迭代数组。

运行缓慢的代码:
复制代码 代码如下:

var sum = 0;
for (var i in arr) {
sum += arr[i];
}

运行更快的代码:
复制代码 代码如下:

var sum = 0;
for (var i = 0, len = arr.length; i sum += arr[i];
}

6.使用字符串累加计算风格
使用+运算会在内存中创建一个新的字符串并把连接的值赋给它。仅仅是将这个结果赋值给一个变量。
为了避免连接结果的中间变量,可以使用+=来直接赋值结果。

运行缓慢的代码:
复制代码 代码如下:

a += 'x' + 'y';

运行更快的代码:
复制代码 代码如下:

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

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

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

运行更快的代码:
复制代码 代码如下:

var min = a 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 name="somename";
}

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 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 divs[i].innerHTML = text[i];
}
}

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

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

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

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

var d=35;
for (var i=0; iy += Math.sin(d)*10;
}

更好的处理:
复制代码 代码如下:

var d = 55;
var math_sind = Math.sin(d)*10;
for (var i=0; iy += math_sind;
}

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

for (var i = 0; i // do something
}

更好的改进:
更好的方法是保存数组的长度
复制代码 代码如下:

for (var i = 0, len = arr.length; i // do something
}

总的来说,如果已经做了一次,我们就不需要重复的做不必要的工作。例如,作用域或者函数中多次使用到计算的一个表达式的值,保存到变量可以使它多次被使用,否则我们会过头的声明一个变量并赋值然后只适用一次。所以请记住这些。

补充说明:
第2点
顺便说一下JS主要不是编译的是解释的. 虽说不影响表达,但学术还是严谨点好.

第6点这是不是格式搞乱了?
a += ‘x' + ‘y';
运行更快的代码:

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

9.避免在对象中使用不需要的DOM引用
new Object也是DOM引用?
这个应该是说不要轻意使用new Object()还有new Array(), 以及new Function() 一般情况使用 {...}, [...], f = function(..){...} 即:
这和上面那一点应该说的是一回事.

最后补充一个少用 位运算, 因为js的所有数值运算最后(到JS引擎这层)都是全部转得浮点来算的..所以位运算可能反而更慢.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage