源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-02-22 09:51 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript性能陷阱小结(附实例说明)
1.避免使用eval或者Function构造函数 2.避免使用with 3.不要在性能要求关键的函数中使用try-catch-finally 4.避免使用全局变量 5.避免在性能要求关键的函数中使用for-in 6.使用字符串累加计算风格 7.原操作会比函数调用快 8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串 9.避免在对象中使用不需要的DOM引用 10.最清晰的目标速度,最小化作用域链 11.试着在脚本中少使用注释,避免使用长变量名 12.在当前作用域存储应用的外部变量 13.使用变量缓存值 [b]1.避免使用eval或者Function构造函数[/b] 使用eval或者Function构造函数的代价是非常昂贵的,每次都需要脚本引擎转换源代码到可执行代码。 此外,使用eval处理字符串必须在运行时解释。 运行缓慢的代码:
[u]复制代码[/u] 代码如下:
function addMethod(object, property, code) { object[property] = new Function(code); } addMethod(myObj, 'methodName', 'this.localVar=foo');
运行更快的代码:
[u]复制代码[/u] 代码如下:
function addMethod(object, property, func) { object[property] = func; } addMethod(myObj, 'methodName', function () { 'this.localVar=foo'; });
[b]2.避免使用with [/b]尽管很方便,with需要附加的查找引用时间,因为它在编译的时候并不知道作用域的上下没。 运行缓慢的代码:
[u]复制代码[/u] 代码如下:
with (test.object) { foo = 'Value of foo property of object'; bar = 'Value of bar property of object'; }
运行更快的代码:
[u]复制代码[/u] 代码如下:
var myObj = test.object; myObj.foo = 'Value of foo property of object'; myObj.bar = 'Value of bar property of object';
[b]3.不要在性能要求关键的函数中使用try-catch-finally [/b]try-catch-finally在运行时每次都会在当前作用域创建一个新的变量,用于分配语句执行的异常。 异常处理应该在脚本的高层完成,在异常不是很频繁发生的地方,比如一个循环体的外面。 如果可能,尽量完全避免使用try-catch-finally。 运行缓慢的代码:
[u]复制代码[/u] 代码如下:
var object = ['foo', 'bar'], i; for (i = 0; i < object.length; i++) { try { // do something that throws an exception } catch (e) { // handle exception } }
运行更快的代码:
[u]复制代码[/u] 代码如下:
var object = ['foo', 'bar'], i; try { for (i = 0; i < object.length; i++) { // do something } } catch (e) { // handle exception }
[b]4.避免使用全局变量 [/b]如果你在一个函数或者其它作用域中使用全局变量,脚本引擎需要遍历整个作用域去查找他们。 全局作用域中的变量在脚本的生命周期里都存在,然后局部范围的会在局部范围失去的时候被销毁。 运行缓慢的代码:
[u]复制代码[/u] 代码如下:
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();
运行更快的代码:
[u]复制代码[/u] 代码如下:
function localScope() { var i, str = ''; for (i=0; i < 100; i++) { str += i; // i and str in local scope which is faster } } localScope();
[b]5.避免在性能要求关键的函数中使用for-in [/b]for-in循环需要脚本引擎建立一张所有可枚举属性的列表,并检查是否与先前的重复。 如果你的for循环作用域中的代码没有修改数组,可以预先计算好数组的长度用于在for循环中迭代数组。 运行缓慢的代码:
[u]复制代码[/u] 代码如下:
var sum = 0; for (var i in arr) { sum += arr[i]; }
运行更快的代码:
[u]复制代码[/u] 代码如下:
var sum = 0; for (var i = 0, len = arr.length; i < len; i++) { sum += arr[i]; }
[b]6.使用字符串累加计算风格 [/b]使用+运算会在内存中创建一个新的字符串并把连接的值赋给它。仅仅是将这个结果赋值给一个变量。 为了避免连接结果的中间变量,可以使用+=来直接赋值结果。 运行缓慢的代码:
[u]复制代码[/u] 代码如下:
a += 'x' + 'y';
运行更快的代码:
[u]复制代码[/u] 代码如下:
a += 'x'; a += 'y';
[b]7.原操作会比函数调用快 [/b]可以考虑在性能要求关键的循环和函数中使用可以替代的原操作。 运行缓慢的代码:
[u]复制代码[/u] 代码如下:
var min = Math.min(a, b); arr.push(val);
运行更快的代码:
[u]复制代码[/u] 代码如下:
var min = a < b ? a : b; arr[arr.length] = val;
[b]8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串[/b] 如果你传递一个字符串到setTimeout() 或者 setInterval()中,字符串将会被eval计算而导致缓慢。 使用一个匿名函数包装来代替,这样在编译的时候就可以被解释和优化。 运行缓慢的代码: setInterval('doSomethingPeriodically()', 1000); setTimeOut('doSomethingAfterFiveSeconds()', 5000); 运行更快的代码:
[u]复制代码[/u] 代码如下:
setInterval(doSomethingPeriodically, 1000); setTimeOut(doSomethingAfterFiveSeconds, 5000);
[b]9.避免在对象中使用不需要的DOM引用 [/b]不要这么做:
[u]复制代码[/u] 代码如下:
var car = new Object(); car.color = "red"; car.type = "sedan"
更好的一种形式:
[u]复制代码[/u] 代码如下:
var car = { color : "red"; type : "sedan" }
[b]10.最清晰的目标速度,最小化作用域链[/b] 低效率方法:
[u]复制代码[/u] 代码如下:
var url = location.href;
一种高效形式:
[u]复制代码[/u] 代码如下:
var url = window.location.href;
[b]11.试着在脚本中少使用注释,避免使用长变量名 [/b]尽可能的保证注释少或者避免使用注释,特别是在函数,循环以及数组中。 注释不必要的减缓脚本执行并且增加了文件大小。比如: 不建议的形式:
[u]复制代码[/u] 代码如下:
function someFunction() { var person_full_name="somename"; /* stores the full name*/ }
更好的写法:
[u]复制代码[/u] 代码如下:
function someFunction() { var name="somename"; }
[b]12.在当前作用域存储应用的外部变量 [/b]当一个函数被执行的运行上下问被穿件,一个活动的对象会包含所有局部变量会被推到上下文链的前面。 在作用域链中,最慢的是清楚的识别标识符,意味着局部变量是最快的。存储频繁使用的外部变量读和写都会明显的加快。这对于全局变量和其他深层次的标识符查找特别明显。 同样,在当前作用域中的变量(var myVar)比对象像属性的访问速度快(this.myVar)。 运行缓慢的代码:
[u]复制代码[/u] 代码如下:
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]; } }
运行更快的代码:
[u]复制代码[/u] 代码如下:
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)会更快。 运行更快的代码:
[u]复制代码[/u] 代码如下:
function doSomethingElseFaster() { var get = document.getElementsByTagName; for (var i = 0, i < 100000; i++) { get('head'); } }
[b]13.使用变量缓存值 [/b]在做重复工作的地方使用局部变量缓存值。 下面的一组例子表明了存储值到局部变量的广泛意义。 例子1.计算执行前在循环体内使用变量存储数学函数 错误的方法:
[u]复制代码[/u] 代码如下:
var d=35; for (var i=0; i<1000; i++) { y += Math.sin(d)*10; }
更好的处理:
[u]复制代码[/u] 代码如下:
var d = 55; var math_sind = Math.sin(d)*10; for (var i=0; i<1000; i++) { y += math_sind; }
例子2.保存数组的长度在循环中使用 糟糕的处理: 数组的长度每次都会被重复计算
[u]复制代码[/u] 代码如下:
for (var i = 0; i < arr.length; i++) { // do something }
更好的改进: 更好的方法是保存数组的长度
[u]复制代码[/u] 代码如下:
for (var i = 0, len = arr.length; i < len; i++) { // do something }
总的来说,如果已经做了一次,我们就不需要重复的做不必要的工作。例如,作用域或者函数中多次使用到计算的一个表达式的值,保存到变量可以使它多次被使用,否则我们会过头的声明一个变量并赋值然后只适用一次。所以请记住这些。 [b]补充说明: [/b]第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引擎这层)都是全部转得浮点来算的..所以位运算可能反而更慢.
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部