有多少HTML元素可以“现代”浏览器“句柄”立刻？ [英] How many HTML elements can "modern" browsers "handle" at once?
问题描述
现代，因为这个定义可能随着时间的推移而改变（特别是我的意思是桌面浏览器）
handle这可能因机器配置/内存而异，但具体来说我的意思是一般用例。
我想要解决涉及大型数据集的特定问题。
基本上，每当对特定数据集进行更改时，我会收到完整的数据集，我必须在浏览器中呈现此数据。
所以例如，通过websocket我得到一个push事件，告诉我一个数据集有变化，然后我必须通过抓住一个现有的DOM元素，复制它，填充这个数据集，以HTML形式呈现这个数据集元素与此集合的数据使用类名或其他元素标识符，然后将其添加回DOM。
请记住，此数据集中的任何对象（JSON）可能有多达1000个以上的子对象，并且可能有多达10,000个以上的父对象您可以看到可能会有一个实例，返回的数据集向上朝着1,000,000 => 10,000,000个数据点或更多。
当我必须呈现这些东西，现在有趣的部分来了。对于每个数据点，可能有3或4个标签用于渲染和样式数据，并且可能有任何这些标签的事件监听器（可能在父容器上使用委托减轻事情）。
总而言之，可能会有很多传入的信息需要呈现，我正在设法找出处理这种情况的最佳方法。
理想情况下，您只想为具有更改的单个数据点呈现更改，而不是重新渲染整个集，但这可能不是一个选项，因为后端是
我主要关注的是了解浏览器/ DOM的局限性，并通过前端的镜头来看待这个问题。在后端可能有一些变化（数据设计，缓存，分页），但这不是重点。
这不是HTML / DOM的典型用例，因为我知道有限制，但是它们究竟是什么？我们还是以约3000-4000个元素上限？
我有一些< a href =http://www.tomshardware.com/reviews/web-browser-chrome-25-firefox-19,3459.html =nofollow noreferrer>相关 subquestions 为此，我是主动 look up ，但我认为与其余的人分享一些想法是很好的stackoverflow社区，并尝试汇集一些关于这个问题的信息。
什么是合理的现代浏览器在开始变慢/无响应之前可以处理的DOM元素？
如何对DOM的数量进行基准测试浏览器可以处理的元素？
有些策略，用于处理需要呈现的大型数据集（除了分页之外）？
是
你的答案是：1百万。我将在SO上复制/粘贴类似问题的答案。
说实话，如果你真的需要一个绝对的答案对于这个问题，那么你可能想重新考虑你的设计。
这里给出的答案是正确的，因为它取决于许多特定于你的应用程序的因素。例如。重要与小
CSS使用，div的大小，实际图形渲染的数量
需要每个div，目标浏览器/平台，DOM事件的数量
监听器等..
只是因为你不能意味着你应该！ :-)
请参阅：在dom减慢并变得不稳定之前，你可以拥有多少div？
这真的是一个不可回答的问题，太多的因素太多，我会说这个，但是，在一个单一的页面加载，我使用一个javascript setinterval在1ms继续添加新的div到ID增加1的页面。我的Chrome浏览器刚刚通过了20,000，并使用600MB Ram。
"modern" because that definition may change over time (and specifically I mean desktop browsers)
"handle" because that may vary depending on machine configurations/memory, but specifically I mean a general use case.
This question came to mind over a particular problem I'm trying to solve involving large datasets.
Essentially, whenever a change is made to a particular dataset I get the full dataset back and I have to render this data in the browser.
So for example, over a websocket I get a push event that tells me a dataset has changes, and then I have to render this dataset in HTML by grabbing an existing DOM element, duplicating it, populating the elements with data from this set using classnames or other element identifiers, and then add it back to the DOM.
Keep in mind that any object (JSON) in this dataset may have as many as 1000+ child objects, and there may be as many as 10,000+ parent objects, so as you can see there may be an instance where the returned dataset is upwards towards 1,000,000 => 10,000,000 data points or more.
Now the fun part comes when I have to render this stuff. For each data point there may be 3 or 4 tags used to render and style the data, and there may be event listeners for any of these tags (maybe on the parent container to lighten things up using delegation).
To sum it all up, there can be a lot of incoming information that needs to be rendered and I'm trying to figure out the best way to handle this scenario.
Ideally, you'd just want to render the changes for that single data point that has changes rather than re-rendering the whole set, but this may not be an option due to how the backend was designed.
My main concern here is to understand the limitations of the browser/DOM and looking at this problem through the lense of the frontend. There are some changes that should happen on the backend for sure (data design, caching, pagination), but that isnt the focus here.
This isn't a typical use case for HTML/DOM, as I know there are limitations, but what exactly are they? Are we still capped out at about 3000-4000 elements?
I've got a number of related subquestions for this that I'm actively looking up but I thought it'd be nice to share some thoughts with the rest of the stackoverflow community and try to pool some information together about this issue.
What is "reasonable" amount of DOM elements that a modern browser can handle before it starts becoming slow/non-responsive?
How can I benchmark the number of DOM elements a browser can handle?
What are some strategies for handling large datasets that need to be rendered (besides pagination)?
Are templating frameworks like mustache and handlebars more performant for rendering html from data/json (on the frontend) than using jQuery or Regular Expressions?
Your answer is: 1 OR millions. I'm going to copy/paste an answer from a similar question on SO.
To be honest, if you really need an absolute answer to this question, then you might want to reconsider your design.
No answer given here will be right, as it depends upon many factors that are specific to your application. E.g. heavy vs. little CSS use, size of the divs, amount of actual graphics rendering required per div, target browser/platform, number of DOM event listeners etc..
Just because you can doesn't mean that you should! :-)"
See: how many div's can you have before the dom slows and becomes unstable?
This really is an unanswerable question, with too many factors at too many angles. I will say this however, in a single page load, I used a javascript setinterval at 1ms to continually add new divs to a page with the ID incrementing by 1. My Chrome browser just passed 20,000, and is using 600MB Ram.
这篇关于有多少HTML元素可以“现代”浏览器“句柄”立刻？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
