Я наткнулся на ReactJS Boilerplate, у которого были хорошие представители и он был ориентирован на сообщество. В разделе "Стилирование" особое внимание уделено стилевому компоненту CSS, но он никогда не останавливался от перехода на обычные методологии стилевого оформления CSS. Хотя это привлекло мое внимание к тому, что отличает CSS-элемент Styled-Component и почему его нужно принять.
Мое понимание стилизованного компонента CSS:
- Компонентно-управляемая идеология. Ваш CSS также теперь является компонентом. - Это очень круто!
- Загрузите то, что вам нужно и когда вам нужно, немного ленивый CSS
- Поставщик тем, скины, модульность и динамика - этого могут добиться и другие библиотеки
- Построение на стороне сервера вашего компонента DOM и его стиль.
Мои вопросы:
Браузеры развиты для анализа CSS отдельно от Javascript разбор, почему мы пытаемся отойти от этого и вписать все в Javascript?
CSS-компонент Styled доставляет свою библиотеку JavaScript к клиентской части, который фактически анализирует стили во время выполнения и помещает их внутрь тега
<style />
, когда каждый компонент загружается по требованию. Это означает дополнительную нагрузку и логика, в конечном итоге способствующая циклам выполнения в браузере. Зачем это нужно?(Под вышеприведенным вопросом я подразумеваю, что для каждого загруженного компонента соответствующий CSS вычисляется, создается и вставляется в голову с помощью тега
style
/нескольких стилей - повторное изобретение интерпретаторов CSS)Выполняется ли непрерывное вычисление стиля текста через
<style />
в тег head вызывает перерисовку/перерисовку в браузере?Какие преимущества в производительности я получаю от этого?
С дополнительными библиотеками/опциями, такими как Post-CSS & Хэширование имени класса SCSS для динамических имен класса, которое в значительной степени решает проблему, о которой все говорят. Почему СЦ еще?
Сообщество, пожалуйста, очистите воздух для меня или поправьте меня, если я ошибаюсь.
Некоторые хорошие статьи, в которых говорится о перерисовке или повторном DOM, рассказывают о том, как дорого обходится браузеру при изменении стилей CSS.
- https://developers.google.com/speed/articles/reflow
- http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
- https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/
- https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
- https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information