45 lines
3.6 KiB
Markdown
45 lines
3.6 KiB
Markdown
|
---
|
|||
|
|
title: CSS Performance
|
|||
|
|
localeTitle: Производительность CSS
|
|||
|
|
---
|
|||
|
|
## Производительность CSS
|
|||
|
|
|
|||
|
|
В большинстве случаев CSS не является причиной того, что ваша веб-страница загружается медленно. В некоторых случаях это может сократить время загрузки ваших сайтов, если ваш файл CSS загроможден сотнями неперфорированных селекторов. Вот некоторые основные рекомендации, как писать быстрый, поддерживаемый CSS.
|
|||
|
|
|
|||
|
|
### Производительность различных селекторов
|
|||
|
|
|
|||
|
|
Посмотрите на этот пример:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
#unique-id { } // fastest
|
|||
|
|
.general-class { } // also fast
|
|||
|
|
li { } // ok
|
|||
|
|
* { } // slow
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Неудивительно, что селекторы ID являются самыми быстрыми, за ними следуют классы. Простые тег-элементы, такие как `div` или `li` , обрабатываются довольно медленно.
|
|||
|
|
|
|||
|
|
### Как выбран элемент
|
|||
|
|
|
|||
|
|
представьте себе следующий CSS:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
nav ul li a {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Это не очень хорошая идея. Есть лучшие способы выбора элемента ссылки в вашей навигации. Но как компьютер фактически выбирает правильный элемент? Сначала он находит каждый элемент на вашей странице. `a` Затем он проверяет, находится `li` внутри элемента `li` , внутри `ul` внутри `div` . Таким образом, браузер просматривает селектора справа налево. Если у вас есть сотни ссылок, это может занять некоторое время для обработки, так что вы должны делать?
|
|||
|
|
|
|||
|
|
### Улучшение производительности CSS
|
|||
|
|
|
|||
|
|
Как правило большого пальца:
|
|||
|
|
|
|||
|
|
* Избегайте селекторов-потомков, таких как `ul li a` и т. Д.
|
|||
|
|
* Не уклоняйтесь от использования множества описательных имен классов `.footer-nav-link`
|
|||
|
|
* Попробуйте вместо этого использовать дочерний селектор, если вы хотите выбрать прямой дочерний элемент элемента `.image-container > img`
|
|||
|
|
* Избегайте использования универсальных селекторов `* { }`
|
|||
|
|
|
|||
|
|
### Это действительно все необходимо?
|
|||
|
|
|
|||
|
|
Возможно, это была проблема 20 лет назад, когда компьютеры были не такими быстрыми, как сегодня. Пожалуйста, не избегайте селекторов-потомков в будущем полностью. Но имейте в виду, что ваша цель состоит в том, чтобы написать поддерживаемый CSS, поэтому может потребоваться небольшое мышление. Иногда `nav ul li a` селектор не является такой хорошей идеей на странице, которая содержит сотни ссылок.
|