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 相关文章推荐
html文本框提示效果的示例代码
Jun 28 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
JSONP跨域请求
Mar 02 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
JavaScript实现的拼图算法分析
Feb 13 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
用javascript实现自定义标签
2007/05/08 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python生成任意频率正弦波方式
2020/02/25 Python
python中rb含义理解
2020/06/18 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
新闻专业个人求职信
2013/12/19 职场文书
财政专业求职信范文
2014/02/19 职场文书
网吧消防安全责任书
2014/07/29 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
零基础学java之循环语句的使用
2022/04/10 Java/Android