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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
shiro授权的实现原理
Sep 21 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
python二叉树的实现实例
2013/11/21 Python
python判断windows隐藏文件的方法
2014/03/21 Python
python常见数制转换实例分析
2015/05/09 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
护理专业毕业生自荐信范文
2014/01/05 职场文书
迟到检讨书300字
2014/02/14 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
科技活动周标语
2014/10/08 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS