Javascript:优化关键/高度处理的Javascript代码的详细信息

时间:2009-07-08 16:20:40

标签: javascript optimization details

我一直在寻找大量的Javascript Optimizing,其中大多数人都在讨论字符串连接以及其他一些重要的here,但我认为必须有更多细节您可以针对速度严重进行优化,并且这些代码的处理非常高

假设您出于某种原因运行此代码:(不太可能,我知道,但请耐心等待)

for( var i = 0; i < 100000000000; i++ ) {
  //Do stuff
}

并且没有办法绕过那么大的循环...你将要确保你在循环中所做的所有事情都被优化到你无法优化它的程度不再......或者你的网站会挂起。

编辑:我不一定在谈论一个循环,一个重复调用的函数如onmousemove怎么样?虽然在大多数情况下我们不需要使用onmousemove,有些情况可以这些问题适用于那些情况。

使用JQuery作为我们的JS库

所以我想要的是优化提示,但只有更常见的提示 - 即。 Speed differences between switch or if-else

如果你想看到更常见的,你可以在这里找到它们:

7 个答案:

答案 0 :(得分:4)

“而且没有办法绕过一个很大的循环......”

在RIA的现实世界中,你必须绕过大循环。与优化一样重要的是学习如何将大型循环分解为小循环,并为浏览器提供时间来处理其UI。否则你会给你的用户一个糟糕的体验,他们不会回来。

所以我认为,在你学习时髦的JS优化之前,你应该知道如何将一个大的循环分成由setTimeout()调用的块并显示一个进度条(或让动画GIF循环)。

感知速度通常比实际速度更重要。客户端的世界与服务器的世界不同。


制作动画时,了解如何查看是否在蹩脚的浏览器(通常是IE)上运行并尝试更糟糕的帧速率(或者只是不进行动画处理)。我可以在一个好的浏览器中获得一些动画来达到90fps,但在IE浏览器中仅需15fps。您可以测试浏览器,但通常最好使用超时和时钟来查看动画的执行情况。


此外,对于真正的加速,请了解如何在Gears和较新的浏览器中使用web workers

答案 1 :(得分:2)

如果它不需要是同步的,请使用setTimeout调用将循环转换为递归实现

for( var i = 0; i < 100000000000; i++ ) {
    //Do stuff
}

可能写成

function doSomething(n)
{
    if (n === 0) return some_value;
    setTimeout(function(){doSomething(n-1);}, 0);
}

好的,这可能不是一个好例子,但你明白了。这样,您可以将长同步操作转换为不会挂起浏览器的异步操作。在某些情况下非常有用,不需要立即完成任务。

答案 2 :(得分:2)

使用split&amp; join代替replace

//str.replace("needle", "hay");
str.split("needle").join("hay");

答案 3 :(得分:2)

你可以加速这个mofo:

for (var i = 100000000; i--;) {
  //Do stuff
}

反转循环并仅检查

i-- 

而不是

i < 10000000 and i < 10000000 = true

大多数浏览器的性能提升为50%

在一个很棒的Google Code talk @ http://www.youtube.com/watch?v=mHtdZgou0qU中看到这个 谈话中还包含其他一些很好的技巧。

祝你好运!

答案 4 :(得分:1)

将长引用链存储在局部变量中:

function doit() {
    //foo.bar.moo.goo();
    //alert(foo.bar.moo.x);

    var moo = foo.bar.moo;

    moo.goo();
    alert(moo.x);
}

答案 5 :(得分:1)

在看到这里的人们给出了一些好的答案后,我做了一些搜索,发现了一些要添加的内容:

这些是关于Javascript优化的提示,当你想要了解非常小的细节时,在大多数情况下无关紧要的事情,但有些事情会产生重大影响:

切换与其他如果

  

一种常用的拧干策略   可能会遗漏任何开销   一大群简单的条件   声明正在取代If-Then-Else   使用Switch语句。

只是想要查看基准测试,您可以找到它here

循环展开

  

要展开循环,您可以执行更多操作   比一个相同的步骤   迭代并递增计数器   因此变量。这有很大帮助   因为你然后减少了数量   有时你正在检查   整个循环的条件。您   这样做时一定要小心   因为你最终可能会超调   界限。

查看详情和基准here

反向循环计数

  

反转循环以使其重要   向下而不是向上。我也见过   在各种文件中   比较数字的优化   为零比比较快得多   它到另一个号码,所以如果你   递减并比较为零   应该更快。

查看更多详情和基准here

Duff的设备
它很简单,但起初很难理解。阅读更多相关信息here 请务必在该页面下方查看改进版本。

此信息的大部分直接来自此处:JavaScript Optimization。这很有意思,因为它是一个如此古老的网站,它从当时的浏览器处理能力的角度来看待优化。尽管他们在IE 5.5和Netscape 4.73中记录的基准测试,但他们的基准测试工具可以为您正在使用的浏览器提供准确的结果。

对于那些认为这些细节无关紧要的人来说,我认为这说明了人们在推进我们所拥有的技术方面的感知方式。仅仅因为我们的浏览器处理速度比他们使用的浏览器快很多倍并不一定意味着我们应该滥用处理能力。

我并不是建议花费数小时优化两行代码0.005ms,但如果你记住这些技术并在适当的时候实施它们将有助于加快网络速度。毕竟,there are still many people using IE 6,所以假设每个人的浏览器都可以处理相同的处理是错误的。

答案 6 :(得分:0)

我们应该针对哪个JavaScript引擎?如果你在谈论这种极端优化,它会产生很大的不同。对于初学者,我将指出用于字符串连接的array.join()技巧仅适用于Microsoft的JScript引擎;它实际上可以在其他JS引擎上提供更差的性能。