推动JavaScript性能有哪些限制?

时间:2012-04-19 01:41:53

标签: javascript performance

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

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

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

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

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

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

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

3 个答案:

答案 0 :(得分:4)

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

2)“直到Web Workers得到IE支持,才有一个优雅的解决方案。”

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

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

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

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

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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

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

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