Пользователям нравятся быстрые веб-приложения, и они ожидают, что страницы будут загружаться быстро и работать бесперебойно. Если у вас сломана анимация или тормозит прокрутка, велика вероятность того, что пользователи покинут ваш сайт. Как разработчик, вы можете многое сделать, чтобы улучшить взаимодействие с пользователем. Эта статья будет посвящена 4 приемам CSS, которые вы можете использовать для повышения скорости рендеринга ваших страниц.
1. Content-visibility
Как правило, большинство веб-приложений имеют сложные элементы пользовательского интерфейса, выходящие за рамки того, что пользователь видит в представлении браузера. В этом случае мы можем использовать видимость контента (content-visibility), чтобы пропустить рендеринг содержимого за пределами экрана. Если у вас много содержимого за пределами экрана, это значительно сократит время рендеринга страницы.
Эта функция является одним из последних дополнений и одним из наиболее эффективных для повышения производительности рендеринга. несмотря на то чтоcontent-visibilityпринимает несколько значений, но мы можем использовать для элементовcontent-visibility: auto;чтобы получить прямой прирост производительности.
Рассмотрим следующую страницу, которая содержит множество карточек с различной информацией. В то время как на экране помещается около 12 карт, в списке около 375 карт. Как видите, браузеру потребовалось 1037 мс для отображения этой страницы.
Далее можно добавить ко всем картамcontent-visibility.
В этом примере на странице добавьте
content-visibilityПосле этого время рендеринга сократилось до 150 мс, что более чем в 6 раз увеличивает производительность.
Как вы можете видеть, видимость контента является довольно мощной и может быть очень полезной для улучшения времени рендеринга страницы. Основываясь на том, что мы уже обсуждали, вы, должно быть, думаете об этом как о волшебной палочке для рендеринга страницы.
Ограничения видимости контента
Однако есть несколько областей, где видимость контента плохая. Я хотел бы подчеркнуть два момента для вашей справки.
- Эта функция пока экспериментальная.На данный момент Firefox (версии для ПК и Android), IE (я не думаю, что они планируют добавить эту функцию в IE) и Safari (Mac и iOS) не поддерживают видимость содержимого.
- Проблемы, связанные с поведением полосы прокрутки.Так как элементы имеют начальную отображаемую высоту 0 пикселей, всякий раз, когда вы прокручиваете вниз, элементы появляются на экране. Фактическое содержимое визуализируется, и высота элемента соответственно обновляется. Это заставит полосу прокрутки вести себя неожиданным образом.
Чтобы решить проблему с полосой прокрутки, вы можете использовать другой метод, называемыйcontain-intrinsic-sizeсвойство CSS. Он указывает естественный размер элемента, поэтому элемент будет отображаться с заданной высотой вместо 0 пикселей.
.element{
content-visibility: auto;
contain-intrinsic-size: 200px;
}
Однако, экспериментируя, я заметил, что даже при использованииconta-intrinsic-size, если у нас есть большое количество элементов,content-visibilityУстановить какauto, у вас по-прежнему будут небольшие проблемы с полосой прокрутки.
Поэтому мой совет — спланируйте свой макет, разбейте его на разделы, а затем используйте видимость содержимого в этих разделах для лучшего поведения полосы прокрутки.
2. Изменится свойство
В анимации в браузерах нет ничего нового. Обычно эти анимации периодически рендерятся вместе с другими элементами. Однако теперь браузеры могут использовать GPU для оптимизации некоторых из этих анимационных операций.
С помощью CSS-свойства will-change мы можем указать, что элемент изменит определенные свойства, что позволит браузеру заранее выполнить необходимые оптимизации.
Что происходит ниже, так это то, что браузер создаст отдельный слой для этого элемента. После этого он делегирует рендеринг этого элемента графическому процессору вместе с другими оптимизациями. Это сделает анимацию более плавной, поскольку ускорение графического процессора берет на себя рендеринг анимации.
Рассмотрим следующий класс CSS:
// In stylesheet
.animating-element {
will-change: opacity;
}
// In HTML
<div class="animating-elememt">
Animating Child elements
</div>
Когда приведенный выше фрагмент отображается в браузере, он распознаетwill-changeсвойства и оптимизировать для будущих изменений, связанных с непрозрачностью.
Основываясь на тестах производительности, проведенных Максимилианом Лаумейстером, вы можете видеть, что он достиг более 120 кадров в секунду с этим изменением в одну строку по сравнению с примерно 50 кадрами в секунду изначально.
Когда не использовать волю-изменение
несмотря на то чтоwill-changeЦель состоит в том, чтобы повысить производительность, но если вы злоупотребите ею, это также может снизить производительность веб-приложения.
-
**использовать
will-changeУказывает, что элемент будет изменен в будущем. ** Так что, если вы попытаетесь поставитьwill-changeИспользование в сочетании с анимацией не даст вам оптимизации. Поэтому рекомендуется использовать на родительском элементеwill-change, чтобы использовать анимацию для дочерних элементов..my-class{ will-change: opacity; } .child-class{ transition: opacity 1s ease-in-out; } -
Не используйте неанимированные элементы.когда вы используете элемент
will-change, браузер попытается оптимизировать его, переместив элемент на новый слой и перенеся преобразование на графический процессор. Если вам нечего конвертировать, это пустая трата ресурсов.
И последнее замечание: после завершения всех анимаций рекомендуется, чтобы элементwill-changeудалять.
3. Сократите время блокировки рендеринга
Сегодня многие веб-приложения должны удовлетворять потребности многих форм, включая ПК, планшеты и мобильные телефоны. Чтобы реализовать эту адаптивную функцию, нам пришлось написать новые стили на основе размеров мультимедиа. Когда дело доходит до рендеринга страницы, он не может начать фазу рендеринга, пока объектная модель CSS (CSSOM) не будет готова. В зависимости от вашего веб-приложения у вас может быть большая таблица стилей, подходящая для всех форм-факторов устройств.
Однако, скажем, мы разделили его на несколько таблиц стилей на основе форм-факторов. В этом случае мы можем просто позволить основному файлу CSS заблокировать критический путь и загрузить его с высоким приоритетом, а другим таблицам стилей — с низким приоритетом.
<link rel="stylesheet" href="styles.css">
Разбив его на несколько таблиц стилей:
<!-- style.css contains only the minimal styles needed for the page rendering -->
<link rel="stylesheet" href="styles.css" media="all" />
<!-- Following stylesheets have only the styles necessary for the form factor -->
<link rel="stylesheet" href="sm.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="md.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="lg.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="ex.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />
Как видите, разделение таблиц стилей по фактору стиля сокращает время блокировки рендеринга.
4. Избегайте @import, включающего несколько таблиц стилей
пройти через@import, мы можем включить таблицу стилей в другую таблицу стилей. Когда мы работаем над большим проектом, используйте@importМожно сделать код более лаконичным.
о
@importКлючевым фактом является то, что это блокирующий вызов, потому что он должен сделать сетевой запрос, чтобы получить файл, проанализировать файл и включить его в таблицу стилей. Если мы вложили в таблицу стилей@import, это снизит производительность рендеринга.
# style.css
@import url("windows.css");
# windows.css
@import url("componenets.css");
и использовать@importНапротив, мы можем передать несколькоlinkдля достижения той же функциональности, но с гораздо большей производительностью, потому что это позволяет нам загружать таблицы стилей параллельно.
Суммировать
Помимо 4 областей, которые мы обсуждали в этой статье, у нас есть несколько других способов использования CSS для повышения производительности веб-страниц. Недавняя особенность CSS:content-visibility, выглядит многообещающе на долгие годы, поскольку обеспечивает в несколько раз более высокую производительность рендеринга страниц.
Лучше всего то, что нам не нужно писать ни одного оператора JavaScript, чтобы получить всю производительность.
Я считаю, что вы можете комбинировать некоторые из вышеперечисленных функций для создания более эффективных веб-приложений для конечных пользователей. Надеюсь, эта статья была вам полезна. Если вы знаете, какие приемы CSS могут улучшить производительность вашего веб-приложения, пожалуйста, укажите это в комментариях ниже. Спасибо вам всем.
оригинал:blog.Zhang Bing.site/2020/12/28/…