CSS-in-JS

'CSS-in-JS' ist ein Fluss, der von gestalteten Komponenten ausgeht und das Styling in Javascript definiert.

styled-component, Emotion, Mantine usw.

Verdienst

1. Der angewendete Bereich ist klein.
   1. Wenn Sie das CSS-Modul verwenden, können Sie auch den Umfang von CSS reduzieren
2. Wird an derselben Stelle wie die Komponente definiert. (Colocation)
3. Javascript-Variable kann verwendet werden.

Nachteil

1. Laufzeitaufwand
2. Sie müssen die CSS-in-JS-Bibliotheksdatei herunterladen.
   1. Emotion ist 7,9 KB.
   2. Mantine ist 134 KB groß!

großer Nachteil

1. Das häufige Einfügen von CSS-Regeln verursacht viel Rechenarbeit.
   1. Vergleich von Emotion und CSS
   2. Bei der Verwendung von CSS kam es zu einer Leistungssteigerung von ca. 50 %.
2. Bei der Verwendung von SSR treten verschiedene Probleme auf.
   1. Wenn Sie sich das Emotion-Repo ansehen, gibt es viele Probleme.

Leistungsvergleich unter realen Bedingungen

Wir haben die Leistung gemessen, indem wir CSS-in-JS und Tailwind mit Code verglichen haben, der tatsächlich in der Produktion verwendet wurde.

Aufstellen

CSS-in-JS verwendet Mantine (basierend auf Emotion).
Leistungsmessung verwendet das React-Entwicklungstool.
Das Leistungsmessziel ist eine 30 * 5-Tabelle (Komponentenname: SheetTable).

Bildschirm

Fortschritt des Experiments

Wenn Sie die Schaltfläche

drücken, wird der obige Bildschirm gerendert.
• Aktivieren Sie die Aufzeichnung im React Profiler und drücken Sie die Taste, um die Bildschirmwiedergabe aufzuzeichnen.
Misst die Renderzeit von SheetTable.
Führen Sie insgesamt 5 Mal durch, um den Durchschnitt zu erhalten.
• CSS-in-JS (Mantine)

Rückenwind

Ergebnis

Die Renderzeit wurde um etwa 36 % reduziert.

Selbst durch die Änderung nur eines Zellcodes verbesserte sich die Leistung erheblich. (Natürlich sind die meisten davon Zellen)
Auf einem 60-Hz-Monitor entspricht 1 Frame 16 ms, aber 3 Frames -> 2 Frames

Abschluss

Die Verwendung von statisch generiertem CSS ist hinsichtlich der Leistung erheblich besser.

Es sei denn, Sie müssen JS-Variablen verwenden, verwenden Sie Tailwind.
(Zusätzlich) Um SSR einzuführen, ist es praktisch, auf CSS-in-JS zu verzichten.
Ref
[1] https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b