3

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

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

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

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

人们是否如此努力地推动 JavaScript？就内存和 CPU 性能而言，它可以处理的内容有哪些限制？客户端与服务器端应该做多少？

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

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

4

3 回答 3

4

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

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

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

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

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

当您像这样突破极限时，算法优化会产生重大影响。

5) DOM 访问非常昂贵，因此可以通过巧妙地减少 DOM 操作的数量来获得巨大的收益。确保你没有接触每个元素，一次一个。最好在一次 DOM 操作中重建整个混乱并将其全部替换。

于 2012-04-19T02:53:33.573 回答
0

没有一成不变的限制。

在我的电脑上和我查找食谱的机器上和我 4 岁的上网本上可以做的事情会有所不同。内存、速度等取决于浏览器、cpu、ram 以及机器上运行的其他内容。我敢打赌，你在其他一些平台上运行你的代码，它会冻结，你必须做三指敬礼才能终止进程。

  • 进行智能事件处理，检测较低级别的点击，而不是每个元素。
  • 在服务器上尽可能多地推送以进行密集处理。
  • 优化代码，确保您不会在循环的每次迭代中更新屏幕。
  • 尽可能合并/最小化 http 请求。
于 2012-04-19T02:32:39.323 回答
0

用户使用的系统是您可以面对但实际上无能为力的障碍。对于仍然在 512MB RAM 上运行 Pentium 的用户，以及雪上加霜的 IE6，webapps 会变得很糟糕。另一个问题是浏览器本身。DOM 很慢。您应该尽可能避免接触 DOM。

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

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

于 2012-04-19T01:56:17.813 回答