javascript - 提升 JavaScript 性能的限制是什么？

Question

在过去的几个月里，我一直在构建一个原型(prototype)页面，它使用了大量的 SVG 并且通常包含很多元素。还有大量数据在 JavaScript 和服务器端(大量 AJAX)中处理。页面上有数以千计的事件监听器。它很重，这很重要。

在 JS 中做这样的事情的最大障碍之一是单线程，当我必须执行，比如说，10 秒的计算时，它会锁定页面。有一些策略可以解决这个问题，但在 IE 支持 Web Workers 之前，还没有多少优雅的解决方案。此外，该页面可以使用超过 500MB 的内存，Chrome 有时似乎难以应对。

我想知道的是在 JavaScript 中构建这样的东西的可行性。我的代码远未优化，但我们假设此页面现在处理的负载是它所需要的——或者假设它需要更多。

我们还假设用户至少需要有一台中档台式机才能使用该应用程序。

人们是否如此努力地插入 JavaScript？在内存和 CPU 性能方面，它可以处理的预期限制是什么？客户端和服务器端应该完成多少工作？

编辑:我想每个人都不可避免地会误解这个问题。我不是在征求关于如何优化 JS 代码的建议。我在问在客户端处理多少处理和数据是合理的。是的，这取决于硬件，我试图通过说带有最新浏览器的中档台式机来回答这个问题，但实际上这不是重点。我想从概念上了解 JavaScript 在进行繁重处理方面有多强大。在 JavaScript 中进行繁重的处理是否可行？

我希望现在每个人都明白了。它是服务器端与客户端的比率。如果我必须运行一个具有 1000000 次迭代的循环，并且假设在 JS 中进行 X 次迭代和在服务器上进行 Y 次迭代之间的选择没有成本，期望 JavaScript 处理多少是合理的？

Answer 1

1) 当然，您可以通过事件冒泡 整合您数以千计的事件监听器。对于不同的事件目标，使用具有不同子例程的单个主事件处理程序将比许多特定处理程序的性能更高。

2) “在 IE 支持 Web Workers 之前，没有太多优雅的解决方案。”

Au contraire, mon frère: 卡住浏览器可以通过以较小的 block 进行处理来缓解(如果可能的话，我会尽量将每次回调的时间保持在 100 毫秒以下)并执行超时后的下一步，这使浏览器有机会更新其状态并处理用户输入。

3) 如果您有大量元素，听起来 HTML5 Canvas 元素是比 SVG 更合适的解决方案。

4) “我的代码远未优化”

当您像这样挑战极限时，算法优化会发挥重要作用。

5) DOM 访问非常昂贵，因此可以通过巧妙地最小化 DOM 操作数 来获得巨大 yield 。确保你没有接触到每一个元素，一次一个。最好重建整个困惑并在一次 DOM 操作中将其全部替换。