Viele wiederholte Inhalte über HTML- oder CSS-„Inhalte“ – was ist leistungsfähiger? ⇐ CSS

[Anonymous]

Ich implementieren eine scrollbare Zeitleistenkomponente, die mehrere Tage und Ereignisse für sie anzeigt. Das Ergebnis sollte so aussehen:


In meiner Implementierung (ich verwende Vue.js, bin mir nicht sicher, ob es wichtig ist) möchte ich viele HTML-Elemente erstellen, um Zeitmarkierungen im Header anzuzeigen (23:00 • 23:30 • 00:00). ...), für jeden Tag es würde 96 Spans erforderns und für 7 Tage wären es 672 Elemente.
Die Zeitleiste wird interaktiv sein, das DOM würde ziemlich oft aktualisiert, deshalb möchte ich das behalten Seitenleistung.
Ich verstehe noch nicht genau, wie der Browser die Seite rendert (d. h. den kritischen Rendering-Pfad und ähnliche Dinge), daher bin ich auf zwei Dinge neugierig:
Erstens habe ich zwei Ansätze Ich denke darüber nach, wie ich Zeitmarkierungen anzeigen kann, und bin gespannt, was leistungsfähiger wäre (d. h. der Browser verbringt weniger Zeit mit dem Rendern):

• Erstellen 96 verschiedene Bereiches für jeden Tag wie folgt:

  Code: Select all

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

• oder erstellen Sie 96 leere Spanss und ändern Sie den Inhalt mithilfe von CSS-Selektoren und Pseudoelementen:

  Code: Select all

  
  
  
  
  ...
  

  Code: Select all

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

Zweitens: Wie kann die Leistung verschiedener Ansätze in solchen Szenarien im Allgemeinen verglichen werden? Welche Tools/Argumentation soll hier verwendet werden?