javascript - 避免使用javascript构造？

Question

我一直在写一个js算法。它在铬中燃烧得很快，而在FF中狗的速度很慢在chrome profiler中，我花在一个方法上的时间<10%，在FF中，相同的方法是执行时间的30%是否有javascript结构需要避免，因为它们在一个浏览器或另一个浏览器中的速度真的很慢？
我注意到的一件事是，如果你做得足够多，像简单变量声明这样的东西可能会很昂贵我加快了算法的速度，因为我没有做

var x = y.x;
dosomthing(x);

只是在做

dosomething(y.x)

例如。

Answer 1

正如您所发现的，不同的东西在不同的实现中都是问题。根据我的经验，除了做一些非常愚蠢的事情外，在目标浏览器上进行测试时遇到特定的性能问题之前/除非遇到特定的性能问题，否则担心JavaScript代码的优化速度会很快是没有意义的像通常的“倒计时到零”优化（for (i = length - 1; i >= 0; --i)而不是for (i = 0; i < length; ++i)）这样简单的事情在实现中甚至都不可靠。因此，我倾向于坚持编写相当清晰的代码（因为我希望对维护代码的人友好，而维护代码的人通常是我），然后担心优化的时间和时间。
也就是说，通过查看tszming在the Google article中链接到的his/her answer提醒我，在最初编写代码时，我往往会记住一些性能方面的事情。下面是一个列表（有些来自那篇文章，有些则不是）：
当您用大量片段构建一个长字符串时，令人惊讶的是，如果您构建一个片段数组，然后使用Array#join方法创建最终字符串，通常会获得更好的性能如果我正在构建一个要添加到页面中的大型HTML片段，我会经常这样做。
Crockford private instance variable pattern虽然很酷而且功能强大，但价格昂贵。我倾向于避免它。
with价格昂贵，容易被误解避开它。
当然，内存泄漏最终还是很昂贵的当您与DOM元素交互时，在浏览器上创建它们相当容易请参阅本文以了解更多详细信息，但基本上，可以使用jQuery、Prototype、Closure等良好的库连接事件处理程序（因为这是一个特别容易出现的区域，而库可以提供帮助），并避免通过expando属性（直接或间接）将DOM元素引用存储在其他DOM元素上。
如果您正在浏览器中构建内容的显著动态显示，innerHTML在大多数情况下比使用dom方法（createElement和appendChild）快得多。这是因为浏览器高效地将HTML解析为其内部结构，并且使用优化的编译代码直接写入其内部数据结构，这样做非常快相反，如果您使用dom方法构建一个重要的树，那么您使用的是一种解释性（通常）语言，它与浏览器所要转换的抽象进行对话，而不是与内部结构相匹配。不久前，我做了a few experiments检查，结果相差约一个数量级（有利于innerHTML）。当然，如果要构建一个大字符串来分配给innerHTML，请参见上面的提示-最好是在数组中构建片段，然后使用join。
缓存已知的慢速操作的结果，但不要做得过火，只在需要的时候保存记住保留参考的成本与再次查找参考的成本。
我曾多次听到人们说，从包含作用域（当然，全局变量是这方面的最终例子，但您可以使用其他作用域中的闭包）访问vars比访问本地作用域慢，当然，这在纯解释的、非优化的实现中是有意义的，因为作用域链是定义。但我从未真正看到它在实践中被证明是一个显著的不同（Link to simple quick-and-dirty test）实际全局变量是特殊的，因为它们是window对象的属性，而$$对象是宿主对象，因此与用于其他级别作用域的匿名对象有点不同。但我希望你已经避免了全球变暖。
这里有一个6的例子几周前，我在一个与原型相关的问题中看到了这一点：

for (i = 0; i < $$('.foo').length; ++i) {
    if ($$('.foo')[i].hasClass("bar")) { // I forget what this actually was
        $$('.foo')[i].setStyle({/* ... */});
    }
}

在prototype中， 做了一件昂贵的事情：它在dom树中搜索匹配的元素（在本例中，是类为“foo”的元素）。上面的代码在每个循环中搜索dom三次：首先检查索引是否在边界内，然后检查元素是否具有类“bar”，然后设置样式。
这太疯狂了，不管它在哪个浏览器上运行都会很疯狂。很明显，您希望快速缓存该查找：

list = $$('.foo');
for (i = 0; i < list.length; ++i) {
    if (list[i].hasClass("bar")) { // I forget what this actually was
        list[i].setStyle({/* ... */});
    }
}

……但进一步（例如向后工作到零）是没有意义的，在一个浏览器上可能更快，在另一个浏览器上可能更慢。