I am creating a data visualization, and rendering performance is critical. My question would be appropriate for standard HTML, although I use SVG with JavaScript.
OK, a hypothetical scenario: let's say I have 10,000 DOM nodes with background-colorfrom " red" and 10,000 DOM nodes with background-colorfrom " green". Each node is created by a JavaScript outline. I could:
- Set the attribute
stylefor each node by specifying background-colornode:<element style="background-color:red;"/> Set an attribute classfor each node, and then reference this class in an inline style or in an external stylesheet:
<head><style>.foo {background-color:red;}</style></head>
<body><element class="foo"/></body>
The performance of loading the code here is not important at all - I am only interested in the performance of rendering the browser. I also understand very well that style attributes are usually not so useful or semantic in the daily development of a site, but here I use a specific use case.
I am interested in the logical answers, but it would be really useful to hear from someone who really tested it or read about other tests (I was looking for information, but I didn’t find anything specifically on this).
Thank you for your help!
source
share