[Внешний словарь] Несколько полезных советов по CSS

внешний интерфейс CSS

предисловие

Поленитесь сегодня, не вдавайтесь в длинные истории и поделитесь небольшими знаниями CSS, которых вы, возможно, не знаете.

порядок стилей

CSS-код:

.red {
    color: red;
}
.blue {
    color: blue;
}

HTML-код:

<div class="red blue">这是什么颜色</div>
<div class="blue red">这是什么颜色</div>

Я помню, что раньше это был относительно популярный тестовый вопрос CSS, и казалось, что многие люди ответили неправильно (более 30%).

Ответ, который вы должны знать.

Может улучшить производительность CSS, как это

селектор потомков

Что такое пространство в середине селектора стиля? Его имя --селектор потомков.

div p {
    color: #3388ff;
    font-size: 14px;
}

Селекторы потомков могут быть дорогими

Энергопотребление зависит от размера элемента, но не рекомендуется использовать бессмысленный селектор потомков. Например:

.div p {
    // ...
}

Почему это потребляет больше производительности?

Поскольку браузер сначала находит всеpтег, а затем посмотрите вверх, чтобы найтиclassдляdivЭтикетка. Таким образом, если в коде многоpЭтикетки, несомненно, будут выполнять много повторяющейся работы.

Таким образом, вы можете сократить использование тегов HTML для определения CSS и использовать определенныеclass.

Браузеры анализируют селекторы CSS справа налево

.content_box div p a {
    // ...
}

Браузер обработает приведенный выше пример следующим образом:

  1. Сначала найдите все страницы<a>элемент
  2. Затем поднимитесь, чтобы найти<p>элемент завернутый<a>элемент
  3. смотреть вверх, пока.content_boxЭлементы

Из приведенных выше шагов мы видим, что чем правильнее селектор, тем более он уникален и тем эффективнее браузер будет анализировать свойства CSS.

Поэтому обязательно используйте специальныеclassНапишите CSS-код.

Избегайте рисков перекомпоновки

Мы знаем, что изменение определенных свойств CSS вызовет перерисовку/перекомпоновку всего макета страницы.

перерисовка выполняется намного быстрее, чем перекомпоновка, поэтому более важно избегать перекомпоновки.

Что вызывает перерисовку и оплавление

  1. Добавление, модификация, удаление элемента DOM (перерисовка, перекомпоновка)
  2. Просто измените цвет шрифта элемента DOM (перекрасьте, не нужно настраивать макет)
  3. Применение новых стилей или изменение любых свойств, влияющих на внешний вид элемента (перерисовка, перекомпоновка)
  4. изменение размера, прокрутка страницы (перерисовка, перекомпоновка)
  5. Чтение некоторых свойств элемента (offsetTop/Left/Width/Height, getComputedStyle, scrollTop/Left/Width/Height, clientTop/Left/Width/Height и т. д.) (перерисовка, перекомпоновка)

Если эти свойства изменены для большого количества элементов, расчет и обновление их положения/размера может занять много времени.

Более требовательные к производительности свойства CSS

Некоторые свойства CSS потребляют больше производительности, чем другие, т. е. браузеру требуется больше времени для анализа этих свойств.

Такие как:border-radius,box-shadow,filter,:nth-childЖдать

Конечно, эти свойства часто используются, и некоторых нельзя избежать. Сделайте соответствующие компромиссы.

Я надеюсь, что эти небольшие знания CSS могут быть вам полезны, а затем поставьте лайк и вперед.

наконец

Если вы хотите присоединиться к [большой группе по обмену интерфейсом], подпишитесь на официальный аккаунт и нажмите «общение и группа», чтобы добавить робота, который будет автоматически втягивать вас в группу. Следуйте за мной, чтобы получать последние галантерейные товары в первый раз.

Категории