严重影响性能的常见Javascript错误？[关闭]

在我参加的最近一次UI / UX MeetUp上，我在一个使用Javascript（jQuery）进行交互和UI的网站上提供了一些反馈-这是相当简单的动画和操作，但是在一台像样的计算机上的性能令人震惊。

它实际上使我想起了我遇到过的很多站点/程序，其中的某些操作绝对会破坏性能。它通常在Java几乎可以替代Flash的情况下（至少在这种情况下更为明显）。这与我使用的具有更多Javascript和功能但运行非常平稳的某些Web应用程序形成了鲜明的对比（IBM的COGNOS是我想不到的一个）。

我很想知道开发JS会导致网站性能下降的一些常见问题。

一个常见的性能杀手是.length在for循环内调用HTMLCollection ：

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

该反模式使每次通过循环时都要计算集合的大小。更好的方法是计算循环外的长度：

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

不，问题不是来自用作闪存替换的JS。如果您对此不满意，请记录有关actionscript的yourelf：它与JS非常接近。

作为性能杀手，您可以发现一些不良做法：

• 在连续事件上附加事件处理程序，例如滚动，移动鼠标或类似的东西。这有2个缺点：如果未充分触发事件，则您的应用程序将无法响应。如果触发太多，那么您将拥有巨大的CPU负载而一无所获。
• 进行同步AJAX调用。Javascript不是多线程的，因此，当JS的一部分正在等待某些东西时，您的应用程序将被冻结。您最好使用异步AJAX调用，并且以相同的方式使用setTimeout / setInterval拆分较长的计算阶段，并使应用程序保持响应状态。
• 像其他任何语言一样，算法复杂度很高。

我在一个使用Javascript（jQuery）进行交互和UI的网站上提供了一些反馈-这是相当简单的动画和操作，但是在一台像样的计算机上的性能令人震惊。

性能的最大问题是使用高级抽象（如jQuery），而又不了解底层的DOM模型和CSS3动画模型（或canvas或svg）。

如果您不知道如何在没有抽象的情况下做到这一点，那么您对哪些技术是快速的还是缓慢的绝对了解为零。

学习JavaScript，学习DOM。一旦了解了这两个，并且知道了您的抽象功能，您就可以有效地使用它们。当然，大多数时候，您会意识到抽象是要放慢速度，而无需库就可以手动进行。

Javascript的优点和缺点是它非常灵活。话虽如此，它实际上允许您执行很多情况下可能不应该执行的操作。

从我参与过的代码审查中，主要关注点通常与CSS渲染有关。对于较新的JS开发人员，我们倾向于看到在全局范围内使用了太多的变量。

同样，不正确的关闭通常会导致内存泄漏。但是，只要您的代码遵循该框架，大多数现代Javascript框架都可以防止此类问题。

这是我大约一年前找到的有关编写更好的jquery代码的快速链接：http : //net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance /

我刚刚在同事代码中发现的一件事是降低性能，那就是缓存不需要缓存的数据。

例：

var table = $("#data").dataTable(.....);

DataTables是一个jQuery插件，用于制作漂亮的网格。无论如何，该表中有近5k行，应用了DataTables插件，然后将其保存在table变量中，实际上使FireFox和IE都警告脚本花费了太长时间。故事的寓意，仅在需要时才缓存数据。

据我所知，for循环在计算上比jQuery快$.each()。