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 SHA-1:Secure Hash Algorithm
Dec 20 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 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闭包(Closure)使用详解
2013/05/02 PHP
php单例模式的简单实现方法
2016/06/10 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
Python模拟登陆实现代码
2017/06/14 Python
对Python 语音识别框架详解
2018/12/24 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
C语言笔试集
2012/07/24 面试题
先进党支部事迹材料
2014/01/13 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
法人授权委托书格式
2014/04/08 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书