Maison  >  Article  >  interface Web  >  Rompre avec CSS-in-JS

Rompre avec CSS-in-JS

WBOY
WBOYoriginal
2024-08-08 21:02:50648parcourir

CSS-en-JS

'CSS-in-JS' est un flux qui part de composants stylisés et définit le style dans Javascript.

composant stylisé, émotion, mantine, etc.

mérite

  1. Le champ d'application appliqué est petit.
    1. La portée CSS peut être réduite en utilisant le module CSS
  2. Il est défini au même endroit que le composant
  3. . (colocation)
  4. Une variable Javascript peut être utilisée.

inconvénient

  1. Il y a une surcharge d'exécution
  2. Vous devez télécharger le fichier de la bibliothèque Css dans JS.
    1. L'émotion fait 7,9 Ko.
    2. Mantine fait 134 Ko !

énorme inconvénient

  1. L'insertion de règles CSS entraîne souvent beaucoup de travail de calcul.
    1. Comparaison de l'émotion et du CSS
    2. Il y a eu une augmentation des performances d'environ 50 % lors de l'utilisation de CSS.
  2. Lors de l'utilisation de SSR, divers problèmes surviennent.
    1. Si vous regardez le dépôt Emotion, il y a de nombreux problèmes.

Comparaison des performances dans le monde réel

Nous avons mesuré les performances en comparant CSS-in-JS et Tailwind en utilisant le code réellement utilisé en production

.

Installation

  • CSS-in-JS utilise Mantine (basé sur Emotion).
  • La mesure des performances utilise l'outil de développement React.
  • L'objectif de mesure des performances est un tableau 30*5 (nom du composant : SheetTable).

écran

CSS-in-JS 와 헤어지기

Progression de l'expérience

    Lorsque vous appuyez sur le bouton
  • , l'écran ci-dessus est rendu
  • .
  • Activez l'enregistrement dans React Profiler et appuyez sur le bouton pour enregistrer le rendu de l'écran.
  • Mesure le temps de rendu de SheetTable.
  • Effectuez un total de 5 fois et calculez la moyenne.

CSS-en-JS (Mantine)

CSS-in-JS 와 헤어지기

Vent arrière

CSS-in-JS 와 헤어지기

résultat

  • Le temps de rendu a été réduit d'environ 36%.
  • Même la simple modification d'un code de cellule a entraîné une amélioration significative des performances. (Bien sûr, la plupart sont des cellules)
  • Sur un moniteur 60 Hz, 1 image équivaut à 16 ms, mais 3 images -> C'est devenu 2 images

CSS-in-JS 와 헤어지기

conclusion

  • L'utilisation de CSS générés statiquement est considérablement meilleure en termes de performances.
  • Utilisez Tailwind sauf si vous devez utiliser des variables JS.
  • (Supplémentaire) Pour introduire SSR, il est pratique d'abandonner CSS-in-JS.
Réf

[1] https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn