Safe maximum amount of nodes in the DOM? [closed]

Question

For a web application, given the available memory in a target mobile device¹ running a target mobile browser², how can one estimate the maximum number of DOM nodes, including text nodes, that can be generated via HTML or DHTML?

How can one calculate the estimate before

• Failure
• Crash
• Significant degradation in response

Also, is there a hard limit on any browser not to cross per tab open?

Regarding Prior Closure

This is not like the other questions in the comments below. It is also asking a very specific question seeking a method for estimation. There is nothing duplicated, broad, or opinion based about it, especially now that it is rewritten for clarity without changing its author's expressed interests.

---

Footnotes

[1] For instance, Android or IOS mobile devices sold from 2013 - 2018 with some specific RAM capacity

[2] Firefox, Chrome, IE 11, Edge, Opera, Safari

Answer 1

This is a question for which only a statistical answer could be accurate and comprehensive.

Why

The appropriate equation is this, where N is the number of nodes, bytes_N is the total bytes required to represent them in the DOM, and the node index n ∈ [0, N).

bytes_N = ∑^N (bytesContent_n + bytesOverhead_n)

The value requested in the question is the maximum value of N in the worst case handheld device, operating system, browser, and operating conditions. Solving for N for each permutation is not trivial. The equation above reveals three dependencies, each of which could drastically alter the answer.

1. The average size of a node is dependent on the average number of bytes used in each to hold the content, such as UTF-8 text, attribute names and values, or cached information.
2. The average overhead of a DOM object is dependent on the HTTP user agent that manages the DOM representation of each document. W3C's Document Object Model FAQ states, "While all DOM implementations should be interoperable, they may vary considerably in code size, memory demand, and performance of individual operations."
3. The memory available to use for DOM representations is dependent upon the browser used by default (which can vary depending on what browser handheld device vendors or users prefer), user override of the default browser, the operating system version, the memory capacity of the handheld device, common background tasks, and other memory consumption.

Rigorous Solution

One could run tests to determine (1) and (2) for each of the common http user agents used on handheld devices. The distribution of user agents for any given site can be obtained by configuring the logging mechanism of the web server to place the HTTP_USER_AGENT if it isn't there by default and then stripping all but that field in the log and counting the instances of each value.

The number of bytes per character would need to be tested for both attributes values and UTF-8 inner text (or whatever the encoding) to get a clear pair of factors for calculating (1).

The memory available would need to be tested too under a variety of common conditions, which would be a major research project by itself.

The particular value of N chosen would have to be ZERO to handle the actual worst case, so one would chose a certain percentage of typical cases of content, node structures, and run time conditions. For instance, one may take a sample of cases using some form of randomized in situ (within normal environmental conditions) study and find N that satisfies 95% of those cases.

Perhaps a set of cases could be tested in the above ways and the results placed in a table. Such would represent a direct answer to your question.

I'm guessing it would take an excellent mobile software engineer with a good math background and a statistics expert working together full time with a substantial budget for about four weeks to get reasonable results.

A More Practical Estimation

One could guess the worst case scenario. With a few full days of research and a few proof-of-concept apps, this proposal could be refined. Absent of the time to do that, here's a good first guess.

Consider a cell phone that permits 1 Gbyte for DOM because normal operating conditions use 3 Gbytes out of the 4 GBytes for the above mentioned purposes. One might assume the average consumption of memory for a node to be as follows, to get a ballpark figure.

• 2 bytes per character for 40 characters of inner text per node
• 2 bytes per character for 4 attribute values of 10 characters each
• 1 byte per character for 4 attribute names of 4 characters each
• 160 bytes for the C/C++ node overhead

In this case N_{worst_case}, the worst case max nodes,

= 1,024 X 1,024 X 1,024
  / (2 X 40  +  2 X 4 X 10  +  1 X 4 X 4  +  160)

= 3,195,660 . 190,476.

I would not, however, build a document in a browser with three million DOM nodes if it could be at all avoided. Consider employing the more common practice below.

Common Practice

The best solution is to stay far below what N might be and simply reduce the total number of nodes to the degree possible using standard HTTP design techniques.

• Reduce the size and complexity of that which is displayed on any given page, which also improves visual and conceptual clarity.
• Request minimal amounts of data from the server, deferring content that is not yet visible using windowing techniques or balancing response time with memory consumption in well-planned ways.
• Use asynchronous calls to assist with the above minimalism.