How many div tags are too many?

Question

How many div tags in one HTML document will it take before it affects performance? In this case, the tags are not nested, and the content in each of them is minimal (background color / image).

This question is a continuation of the previous question; Drawing lines using click dots using JavaScript

Here I decided to do this using HTML and CSS.

Tags <div>will have a width of at least 4 pixels and a total width of 400-800 pixels, i.e. tags 100-200 div.

In addition, there will be five or six of these graphs / timelines stacked on top of each other. The number of div tags is then increased by 500-1200.

Again, given that each of them has little content, how will this affect performance?

_L

Answer 1

While the number of tags certainly affects html rendering, you will need to check if the time is right or not.

In cases where I would be interested, there are javascript functions that can arise to try to traverse the DOM. Considering all of these elements can be an expensive client operation. Although again, proper benchmarking cannot be replaced.

Answer 2

Test and find out. This will greatly depend on how the rendering engine responds at all.

Answer 3

div . . , , .

, , . , , .

Answer 4

. . , , , .

, CSS . , CSS , . CSS, , CSS CSS. Google PageSpeed ​​ , CSS.

, , , .

Answer 5

If it's something like tags <font>, the answer seems to be millions! Check out: http://www.fujinonbinos.com/ (do Source View - seriously!)

Seriously, however, keeping things to a minimum is always a good practice for both readability (maintaining the code) and speed. However, this is unlikely to seriously affect if it is not funny. Even the above example is not so slow!