Производительность визуализации: атрибуты стиля или имена классов и правила таблицы стилей?

Я создаю визуализацию данных, и производительность рендеринга имеет решающее значение. Мой вопрос будет иметь отношение к стандартному HTML, хотя я использую SVG с JavaScript.

Хорошо, гипотетический сценарий: скажем, у меня есть 10 000 узлов DOM с background-color of " красный "и 10 000 узлов DOM с background-color из" зеленый ". Каждый узел создается с помощью цикла JavaScript. Я мог либо:

1. Установите атрибут стиля на каждом узле, указав цвет фона узла:

2. Задайте атрибут class для каждого узла, а затем укажите этот класс во встроенном стиле или внешней таблице стилей: