有多少div标签太多了？

Question

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

This question is a follow-up on a previous question; Drawing lines with clickable points using JavaScript

Here I settled on doing this using HTML and CSS.

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

On top of that, there will be five or six of these graphs/timelines stacked on top of each other. The number of div tags is then up in 500-1200.

Again, bearing that there is little content in each, how would this affect the performance?

_L

Answer 1

Test and find out. This will vary too much by rendering engine to answer generally.

Answer 2

The actual displayed size of the div has no noticeable affect on performance. Most of your performance is going to be lost in the transfer of the data to the browser and the rendering of all the elements. It should be a relatively linear decrease in performance luckily, and not something that cascades quickly.

The actual limit doesn't really exist in concrete terms, its more of an issue of the power of the person's computer and browser and connection. Needless to say, you can get pretty big without causing major problems.

Answer 3

While tag count surely has an impact when rendering html you will have to benchmark to see whether or not the time is acceptable or not.

Where I would be concerned is javascript functions that you may have that try to traverse the DOM. Looking through all those elements could be a costly operation on the client. Though once again, proper benchmarking can not be substituted.

Answer 4

The answer depends on a lot of things. Every single div tag has some tiny impact on performance. The tipping point for where performance starts to rapidly degrade will depend on the browser and computer viewing the page.

It also matters what CSS rules you have affecting those styles. Relatively speaking, some CSS selectors are fast to execute and some are slow to execute. If you have some slow CSS selectors defined, your tipping point will come much earlier that if you use no CSS or use only fast CSS selectors. Google's PageSpeed addon can give you insight as to whether you're using slow CSS selectors.

Also, if you're doing things like animating them as a particle system, your tipping point will come even faster.

Answer 5

If its anything like <font> tags, the answer is seemingly millions! Check out: http://www.fujinonbinos.com/ (do a View Source - seriously!)

Seriously, though, keeping things to a minimum is always good practice both for readability (code maintenance) and speed. However, this is unlikely to make a serious impact unless its ridiculous. Even the above example isn't that slow!