Много повторяющегося контента через HTML или CSS «контент» — что более эффективно? ⇐ CSS

[Anonymous]

Я реализую прокручиваемый компонент временной шкалы, который будет отображать для них несколько дней и событий. Результат должен выглядеть следующим образом:


В моей реализации (я использую Vue.js, не уверен, имеет ли это значение) я хочу создать множество HTML-элементов для отображения маркеров времени в заголовке (23:00 • 23:30 • 00:00). ...), для каждого в день потребуется 96 интервалов, а в течение 7 дней это будет 672 элемента.
Временная шкала будет интерактивной, DOM будет обновляться довольно часто, поэтому я хочу сохранить производительность страницы.
Я пока не очень хорошо понимаю, как браузер отображает страницу (т. е. критический путь рендеринга и связанные с ним вещи), поэтому меня интересуют две вещи:
Во-первых, я У меня есть два подхода к тому, как показывать маркеры времени, и мне интересно, какой из них будет более производительным (т. е. браузер будет тратить меньше времени на рендеринг):

• Создайте 96 различных интервалов для каждого дня следующим образом:

  Код: Выделить всё

  00:00
  •
  00:30
  •
  01:00
  ...
  

• или создайте 96 пустых интервалов и измените содержимое с помощью селекторов CSS и псевдоэлементов:

  Код: Выделить всё

  
  
  
  
  ...
  

  Код: Выделить всё

  &:nth-child(1)::after { content: '00:00'; }
  &:nth-child(5)::after { content: '01:00'; }
  &:nth-child(9)::after { content: '02:00'; }
  ...
  

Во-вторых, как вообще можно сравнивать производительность разных подходов в таких сценариях? Какие инструменты/рассуждения здесь использовать?


Подробнее здесь: https://stackoverflow.com/questions/793 ... performant