推动 JavaScript 性能的限制是什么? [英] What are the limits to pushing JavaScript performance?

问题描述

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

I have been building a prototype page over the past few months that uses a lot of SVG and has a lot of elements in general. There is also a ton of data being processed both in JavaScript and server-side (lots of AJAX). There are thousands of event listeners on the page. It's pretty heavy, is the point.

在 JS 中执行此类操作的最大障碍之一是单线程性，当我必须执行(例如)10 秒的计算时，它会锁定页面.有一些策略可以解决这个问题，但是在 IE 支持 Web Workers 之前，没有太多优雅的解决方案.此外，该页面可以使用多达 500MB 的内存，Chrome 似乎有时会遇到这种情况.

One of the biggest hurdles to doing something like this in JS is the single-threadedness, which locks the page when I have to perform, say, 10 seconds of calculations. There are some strategies for remedying that, but until Web Workers are supported by IE there isn't much of an elegant solution. Also, the page can use upwards of 500MB of memory, which Chrome seems to struggle with at times.

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

What I'm wondering about is the feasibility of building something like this in JavaScript. My code is far from optimized, but let's just assume that the load this page handles now is what it requires - or let's say it requires more.

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

Let's also assume the user will be required to have at least a mid-range desktop to use the application.

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

Are people pushing JavaScript this hard? What are the limits to what it can be expected to handle, in terms of memory and CPU performance? How much should be done client-side versus server-side?

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

I guess it was inevitable that everyone would misinterpret the question. I'm not asking for advice on how to optimize JS code. I'm asking how much processing and data is it reasonable to handle on the client. YES this is dependent on hardware, which I tried to answer by saying mid-range desktops with newest browsers, but really that's not the point. I want to know conceptually how powerful is JavaScript for doing heavy processing. Is it viable at all to do heavy processing in JavaScript?

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

I hope everyone gets it now. It's a ratio of server-side versus client-side. If I have to run a loop with 1000000 iterations, and ASSUMING there is no cost in the choice between doing X iterations in JS and Y iterations on the server, how much is reasonable to expect JavaScript to handle?

推荐答案

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

1) Surely your thousands of event listeners could be consolidated through event bubbling. Using a single, master event handler with different subroutines for different event targets would be more performant than numerous specific handlers.

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

2) "until Web Workers are supported by IE there isn't much of an elegant solution."

相反，我很抱歉:通过以较小的块进行处理(如果可能，我会尽量将每个回调的处理时间保持在 100 毫秒以下)并执行，可以减轻冻结浏览器的情况超时后的下一步，这让浏览器有机会更新其状态并处理用户输入.

Au contraire, mon frère: freezing the browser can be mitigated by doing the processing in smaller chunks (I'd try to keep it under 100ms for each callback, if at all possible) and executing the next step after a timeout, which gives the browser a chance to update its state and process user input.

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

3) If you have a huge number of elements, it sounds like the HTML5 Canvas element is a more appropriate solution than SVG.

4) 我的代码远未优化"

4) "My code is far from optimized"

当您像这样突破极限时，算法优化会发挥重要作用.

Algorithmic optimizations make all the difference when you're pushing the limits like this.

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

5) DOM access is very expensive, so huge gains can be made by cleverly minimizing the number of DOM operations. Be sure you're not touching each element, one at a time. Better to reconstruct the whole mess and replace it all in one DOM manipulation.

这篇关于推动 JavaScript 性能的限制是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！