"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.
这个问题出现在我试图解决的一个涉及大型数据集的特殊问题上.
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.
例如,在一个websocket上,我得到一个push事件,它告诉我一个数据集有变化,然后我必须用HTML呈现这个数据集,方法是抓取一个现有的DOM元素,复制它,使用类名或其他元素标识符用这个集合中的数据填充元素,然后将它添加回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).
总而言之,可能需要呈现大量传入的信息,我正试图找出处理这种情况的最佳方法.
理想情况下,您只希望呈现具有更改的单个数据点的更改,而不是重新呈现整个集合,但这可能不是一个选项,因为后端是如何设计的.
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 100 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?