Question

所以，我对JavaScript编码相当陌生，尽管一般来说并不是新编码。在编写源代码时，我通常会记住我的代码将运行的环境（例如某种虚拟机） - 并且随之而来的是级别的代码优化，可以预期。（1）

例如，在Java中，我可能会写这样的东西，

Foo foo = FooFactory.getFoo(Bar.someStaticStuff("qux","gak",42);
blub.doSomethingImportantWithAFooObject(foo);

即使foo对象仅在此位置使用（因此引入了不必要的变量声明）。首先，我认为上面的代码比内联版本更容易阅读

blub.doSomethingImportantWithAFooObject(FooFactory.getFoo(Bar.someStaticStuff("qux","gak",42));

其次我知道Java编译器代码优化无论如何都会处理这个问题，即实际的Java VM代码最终会被内联 - 所以性能方面，两者之间没有差异。（2）

现在我的实际问题：
我一般可以在JavaScript中获得什么级别的代码优化？

我认为这取决于JavaScript引擎 - 但是因为我的代码最终将在许多不同的浏览器中运行，所以我们假设最坏的情况并考虑最坏的情况。我可以期待适度的代码优化吗？有什么案例我还要担心吗？

（1）我确实认识到找到好的/最好的算法并编写组织良好的代码比一些代码优化对性能有更大的影响。但这将是一个不同的问题。

（2）现在，我意识到实际的区别是没有优化很小。但这不是重点。有很多功能可以非常有效地优化，我只是懒得写一个。想象一下for循环中的上述片段，称为100'000次。

Answer 1

对优化不要期望太多，不会有

尾递归优化，
循环展开，
内联功能
等

由于客户端上的javascript不是为繁重的CPU工作而设计的，因此优化不会产生太大的影响。

有一些编写高性能JavaScript代码的指南，大多数都是次要和技术，如：

不使用某些功能，例如eval()，arguments.callee等，这会阻止js引擎生成高性能代码。
使用本机功能而不是手写功能，比如不要编写自己的容器，json解析器等。
使用局部变量而不是全局变量。
永远不要为数组使用for-each循环。
使用parseInt()而不是Math.floor。
远离jQuery。

所有这些技术更像是体验事物，可能会有一些合理的解释。因此，您需要花一些时间搜索或尝试jsPerf来帮助您确定哪种方法更好。

当您发布代码时，使用closure compiler来处理死枝和不必要变量的事情，这不会提高您的性能，但会使您的代码变小。

一般来说，最终的表现在很大程度上取决于您的代码的组织程度，算法设计的精确程度，而不是优化程序的执行方式。

以上面的示例为例（假设FooFactory.getFoo()并且Bar.someStaticStuff("qux","gak",42)始终返回相同的结果，而Bar，FooFactory是无状态的，someStaticStuff()和getFoo()不会改变任何内容。）

for (int i = 0; i < 10000000; i++)
  blub.doSomethingImportantWithAFooObject(
      FooFactory.getFoo(Bar.someStaticStuff("qux","gak",42));

即使带有-O3标志的g ++也无法使代码更快，因为编译器无法判断Bar和FooFactory是否为无状态。因此，应该以任何语言避免使用这些代码。

Answer 2

您说得对，优化级别从JS VM到VM不同。但！有办法解决这个问题。有几种工具可以优化/最小化您的代码。其中最受欢迎的是谷歌。它被称为Closure-Compiler。您可以试用web-version并且有一个cmd-line版本的build-script等。除此之外我没有太多尝试优化，因为毕竟Javascript有点足够快。

Answer 3

一般情况下，我会认为除非你的代码非常脏（将所有变量保留在全局范围内，创建大量DOM对象，对非最佳数据源进行昂贵的AJAX调用等），优化性能的真正技巧将是管理您在运行时加载的所有其他内容。

在数十个图像上加载数十个图像，或者为大量背景图像设置动画，并且提取大量脚本和css文件都会对性能产生更大的影响，甚至比写得好的中等复杂的Javascript还要好。

也就是说，一个快速的谷歌搜索引发了几个关于Javascript性能优化的来源： http://www.developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices

http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/

http://mir.aculo.us/2010/08/17/when-does-javascript-trigger-reflows-and-rendering/

正如其中两个链接指出的那样，浏览器中最昂贵的操作是重排（浏览器必须重绘界面，因为DOM操作），所以这就是你想要最谨慎的地方表现条款。其中一些可以通过聪明地了解您正在修改的内容来缓解（例如，应用类比安装内联样式更便宜），因此将您的关注点（样式与数据）分开将非常重要。

只进行拥有的修改，以完成工作，（而不是使用AJAX替换整个页面的“HULK SMASH（DOM）！”方法）调用屏幕抓取远程源，而不是调用JSON数据只更新所需的最少数量的元素）和其他常识方法将使你比for循环的小调整更多的时间（尽管如此，常识会让你相当远，那里也是。）

祝你好运！

JavaScript - 可以期望什么级别的代码优化？

3 个答案: