- Оригинальный адрес:Things nobody ever taught me about CSS.
- Оригинальный автор:Charlie Gerard
- Перевод с:Программа перевода самородков
- Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
- Переводчик:Xuyuey
- Корректор:Fengziyin1234, xionglong58
Этот пост ни в коем случае не является критикой кого-либо, с кем я когда-либо работал, просто несколько моментов, которые я недавно узнал о CSS, проводя некоторые личные исследования.
Есть много разработчиков, которые не уделяют CSS особого внимания, я думаю, в этом нет ничего нового. Вы можете наблюдать это явление через различные разговоры в Интернете или в чате с друзьями и коллегами.
Тем не менее, в сообществе многое из того, что мы узнаем, мы получаем от коллег, и иногда я понимаю, что многие базовые знания о CSS никогда не делятся в сообществе, потому что другие люди никогда не хотят тратить время на изучение CSS глубже.
Чтобы решить эту проблему, я решил провести некоторое исследование, и CSS разобрался с частью концепции, я думаю, что эти концепции для лучшего понимания и полезны для написания кода CSS.
Этот список определенно не является исчерпывающим, он содержит только новые знания, которые я узнал за последние несколько дней, и я делюсь им в надежде, что он может помочь всем.
период, термин
Во всех языках программирования для описания концепций используются определенные термины. CSS как язык программирования такой же, знание этих терминов может быть полезно для общения или даже просто для улучшения вашей базы знаний.
селектор потомков
Вы знаете маленькое пространство в середине селектора стиля? На самом деле у него тоже есть имя, его имяселектор потомков.
Слияние слоев компоновки, рисования и рендеринга
Эти термины больше связаны с рендерингом в браузере, но по-прежнему важны, поскольку некоторые свойства CSS влияют на разные этапы процесса рендеринга.
1. Макет
Шаг компоновки отвечает за подсчет того, сколько места элемент занимает на экране. Изменение свойств «макета» в CSS (например, ширина, высота) означает, что браузеру необходимо проверить все остальные элементы и «переформатировать» страницу, то есть перерисовать затронутые области и объединить их вместе.
2. Рисовать
Этот процесс представляет собой процесс заполнения пикселями визуальной части элемента (цвет, граница и т. д.). Рисование элементов обычно выполняется на нескольких слоях.
Изменение свойства «рисование» не влияет на макет страницы, поэтому браузер пропустит шаг макета, но все равно выполнит рисование.
Рисование часто является самой дорогой частью всего процесса рендеринга.
3. Рендеринг в слияние
На этапе слияния слоев рендеринга браузер должен рисовать слои в правильном порядке. Поскольку некоторые элементы перекрываются, этот шаг важен для обеспечения того, чтобы элементы отображались в ожидаемом порядке.
Если вы измените свойство CSS, которое не требует ни макета, ни рисования, тогда браузеру нужно будет выполнить только слияние слоев рендеринга.
Для получения дополнительной информации о запуске различных свойств CSS вы можетеCSS TriggersПосмотреть выше.
Производительность CSS
Селекторы потомков могут быть очень энергоемкими
В зависимости от размера программы может быть очень дорого просто использовать селектор потомков, не имеющий специфики. Браузер проверяет соответствие каждого элемента-потомка, потому что отношение потомков не ограничивается родителем и дочерним элементом.
Например:
Браузер оценивает все ссылки на странице и, наконец, находит#navСсылки внутри элементов.
Более эффективным способом является#navкаждый из элементов<a>добавить конкретный.navigation-linkСелектор.
Браузер читает селекторы справа налево
Я чувствую, что должен знать это, потому что это звучит важно, но я не знаю...
При анализе CSS браузеры анализируют селекторы CSS справа налево.
Давайте посмотрим на следующий пример:
Предпринимаемые шаги следующие:
-
Каждая страница матча
<a>элемент. -
найдено
<li>элемент завернутый<a>элемент. -
Используйте предыдущие совпадения и сузьте до тех
<ul>Результат переноса элемента. -
Наконец, в вышеуказанных вариантах отфильтровать тех, которые называются классом
.containerРезультат переноса элемента.
Как видно из приведенных выше шагов, чем конкретнее селектор справа, тем эффективнее браузер будет фильтровать и анализировать свойства CSS.
Чтобы улучшить производительность приведенного выше примера, мы можем<a>добавить такие теги, как.container-link-styleимя класса для замены.container ul li a.
Избегайте изменения макета, насколько это возможно
Изменение некоторых свойств CSS может потребоваться для обновления всего макета страницы.
Например,width,height,top,left(также известные как «геометрические свойства») и другие свойства, требующие пересчета макета и обновления дерева рендеринга.
Если эти свойства изменены для большого количества элементов, расчет и обновление их положения/размера может занять много времени.
Будьте осторожны с сложностями рисунка
С точки зрения чертежа некоторые свойства CSS (такие как: Blur) принимают более высокую цену, чем другие свойства. Рассмотреть возможность использования другого более эффективного способа достижения того же эффекта.
Дорогие свойства CSS
Некоторые свойства CSS дороже других, а это означает, что их отрисовка занимает больше времени.
Вот некоторые из этих свойств:
-
border-radius -
box-shadow -
filter -
:nth-child -
position: fixed
Это не означает, что вы вообще не должны их использовать, но вы должны понимать, что если элемент использует некоторые из этих свойств и будет рендериться сотни раз, это может повлиять на производительность рендеринга.
заказ
Порядок имеет значение в файлах CSS
Давайте посмотрим на следующий код CSS:
Тогда взгляните на этот HTML-код:
Мы обнаружим, что не порядок, в котором селекторы появляются в коде HTML, влияет на эффект рендеринга, а порядок, в котором селекторы появляются в файле CSS.
Хороший способ оценить производительность CSS — использовать инструменты разработчика вашего браузера.
Если вы используете Chrome или Firefox, вы можете открыть инструменты разработчика, перейти на вкладку «Производительность» и записать, что происходит, когда вы загружаете страницу или взаимодействуете со ней.
ресурс
При выполнении исследований для этого поста я наткнулся на некоторые очень интересные инструменты, следующим образом:
CSS Triggers- На этом сайте перечислены некоторые свойства CSS и влияние их использования и изменения на производительность в приложении.
Uncss- Инструмент, который может удалять неиспользуемые стили из файлов CSS.
Css-explain— Небольшой инструмент, который интерпретирует селекторы CSS.
Fastdom- Инструмент для пакетной обработки операций чтения/записи DOM для повышения производительности макета.
Вот об этом! Надеюсь, это имеет смысл!
Спасибо за прочтение! 🙏
Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.
Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.