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


Posted in Javascript onDecember 28, 2010

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 < object.length; i++) { 
try { 
// do something that throws an exception 
} catch (e) { 
// handle exception 
} 
}

运行更快的代码:
var object = ['foo', 'bar'], i; 
try { 
for (i = 0; i < object.length; i++) { 
// do something 
} 
} catch (e) { 
// handle exception 
}

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

运行缓慢的代码:

var i, 
str = ''; 
function globalScope() { 
for (i=0; i < 100; 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 < 100; 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 < len; 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 < 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 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 < 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 
}

更好的改进:
更好的方法是保存数组的长度
for (var i = 0, len = arr.length; i < len; 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引擎这层)都是全部转得浮点来算的..所以位运算可能反而更慢.

Javascript 相关文章推荐
javaScript复制功能调用实现方案
Dec 13 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
微信小程序合法域名配置方法
May 06 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
javascript写的日历类(基于pj)
Dec 28 #Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 #Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 #Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 #Javascript
基于Jquery的标签智能验证实现代码
Dec 27 #Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 #Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 #Javascript
You might like
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php的memcached客户端memcached
2011/06/14 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP基本语法实例总结
2016/09/09 PHP
php和nginx交互实例讲解
2019/09/24 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
轻松实现python搭建微信公众平台
2016/02/16 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
python如何提升爬虫效率
2020/09/27 Python
python实现图片转字符画的完整代码
2021/02/21 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
爱心捐助倡议书
2014/05/19 职场文书
医学求职自荐信
2014/06/21 职场文书
2014年环保工作总结
2014/11/26 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS