CSS-в-JS

CSS-in-JS — это поток, который начинается со стилевых компонентов и определяет стиль в Javascript.

styled-компонент, Emotion, Mantine и т. д.

заслуга

1. Область применения невелика.
   1. Если вы используете модуль CSS, вы также можете уменьшить область применения CSS
2. Определяется там же, где и компонент. (колокейшн)
3. Можно использовать переменную Javascript.

недостаток

1. Издержки времени выполнения
2. Вам необходимо загрузить файл библиотеки Css in JS.
   1. Emotion — 7,9 КБ.
   2. Мантин — 134 КБ!

огромный недостаток

1. Частая вставка правил CSS требует большого объема вычислительной работы.
   1. Сравнение Emotion и CSS
   2. При использовании CSS производительность увеличилась примерно на 50%.
2. При использовании SSR возникает множество проблем.
   1. Если вы посмотрите на репозиторий Emotion, там много проблем.

Сравнение производительности в реальном мире

Мы измеряли производительность, сравнивая CSS-in-JS и Tailwind с использованием кода, фактически используемого в производстве.

Настраивать

• CSS-in-JS использует Mantine (на основе Emotion).
• Для измерения производительности используется инструмент разработки React.
• Целью измерения производительности является таблица размером 30 * 5 (имя компонента: SheetTable).

экран

Ход эксперимента

Когда вы нажимаете кнопку
• , отображается приведенный выше экран
.
• Включите запись в React Profiler и нажмите кнопку, чтобы записать рендеринг экрана
• Измеряет время рендеринга SheetTable.
• Выполните всего 5 раз, чтобы получить среднее значение.

CSS-в-JS (Мантин)

Попутный ветер

результат

• Время рендеринга сократилось примерно на 36%.
• Даже изменив всего лишь один код ячейки, производительность значительно улучшилась. (Конечно, большинство из них — клетки)
• На мониторе с частотой 60 Гц 1 кадр составляет 16 мс, но 3 кадра -> 2 кадра

заключение

• Использование статически сгенерированного CSS значительно повышает производительность.
• Если вам не нужно использовать переменные JS, используйте Tailwind.
• (Дополнительно) Чтобы внедрить SSR, удобно отказаться от CSS-in-JS

Ссылка

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