推动JavaScript性能有哪些限制？

Question

在过去的几个月里，我一直在构建一个原型页面，它使用了大量的SVG并且总体上有很多元素。 在JavaScript和服务器端（大量的AJAX）中也处理了大量数据。 页面上有数千个事件监听器。 它非常重，是重点。

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

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

我们还假设用户需要至少拥有一个中档桌面才能使用该应用程序。

人们在努力推动JavaScript吗？ 在内存和CPU性能方面，它可以预期处理的限制是什么？ 客户端与服务器端应该做多少？

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

我希望每个人都能得到它。 这是服务器端与客户端的比率。 如果我必须运行一个1000000次迭代的循环，并且在服务器上进行JS迭代和Y次迭代之间的选择没有成本， 那么期望JavaScript处理多少是合理的？

Answer 1

1）当然，你可以通过事件冒泡来巩固成千上万的事件监听器。 对于不同的事件目标，使用具有不同子例程的单个主事件处理程序将比许多特定处理程序更具性能。

2）“直到Web Workers受到IE支持，才有一个优雅的解决方案。”

Au contraire，monfrère：冻结浏览器可以通过在较小的块中进行处理来缓解（如果可能的话，我会尝试将每个回调保持在100ms以下）并在超时后执行下一步，这样就可以了浏览器有机会更新其状态并处理用户输入。

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

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

当您推动这样的限制时，算法优化会产生重大影响。

5）DOM访问非常昂贵，因此可以通过巧妙地最小化DOM操作的数量来获得巨大的收益。 确保你没有一次触摸每个元素。 更好地重建整个混乱并在一个DOM操作中替换它们。

Answer 2

您可以面对的障碍，实际上无法做任何事情是用户使用的系统。 对于仍然在512MB RAM上运行Pentium的用户，以及为了伤害IE6而加重侮辱，webapps将会磨砺。 另一个问题是浏览器本身。 DOM很慢。 你应该尽可能避免触摸DOM。

你可以做的是改进你的代码，找到占用内存的点或者做太多处理并将其分解。 例如，单线程可以通过使用超时和回调来解决。 这是我的一个演示处理一个很长的循环。 一个执行同步操作，另一个使用超时来模拟异步操作。

您还可以将数据和处理卸载到服务器，使您的客户端应用程序成为“瘦客户端”。 虽然HTTP请求可能会扼杀您，但您在应用程序中执行其他操作时将服务器视为“第二个线程”。 例如，游戏。 您可以计算服务器上的分数，排名，配对和所有内容。 不要让客户端这样做。 只需使客户端成为服务器中正在进行的所有事情的“显示”即可。

Answer 3

没有任何限制是一成不变的。

在我的计算机和机器上可以做什么我查阅食谱而不是我4岁的上网本会有所不同。 内存，速度等取决于浏览器，CPU，RAM以及机器上运行的其他内容。 我打赌你在其他平台上运行你的代码，它会冻结，你必须做3手指致敬才能杀死这个过程。

• 进行智能事件处理，检测较低级别的点击，而不是每个元素。
• 在服务器上尽可能多地推送以进行密集处理。
• 优化代码，确保在循环的每次迭代中都不更新屏幕。
• 尽可能组合/最小化http请求。