Увеличьте скорость рендеринга страницы, используя только CSS

Добавить Автора

Когда пользователи посещают веб-сайт (страницу) или приложение, они всегда ожидают, что они будут загружаться быстро и работать бесперебойно. Если он слишком медленный, пользователи, скорее всего, потеряют терпение и покинут ваш веб-сайт или приложение. Для разработчика обеспечение более быстрого доступа к вашим приложениям и обеспечение удобного взаимодействия с пользователем являются важными базовыми навыками, и веб-разработчики также могут многое сделать в процессе разработки для улучшения взаимодействия с пользователем. Итак, давайте поговорим с вами сегодня о том, какие навыки в CSS могут помочь нам улучшить скорость рендеринга веб-страниц.

контент-видимость

Вообще говоря, большинство веб-приложений имеют сложные элементы пользовательского интерфейса, и некоторый контент будет находиться за пределами видимой области устройства (контент выходит за пределы видимой области браузера пользователя), например, красная область в рисунок ниже находится на экране мобильного устройства.Вне видимой области:

В этом случае мы можем использовать CSScontent-visibilityчтобы пропустить рендеринг закадрового контента. Тем не менее, если у вас много содержимого за пределами экрана, это значительно сократит время рендеринга страницы.

Эта функция является новой возможностью CSS и принадлежитW3CCSS Containment Module Level 2модуль. Это также одна из функций, которая оказывает наибольшее влияние на повышение производительности рендеринга.content-visibilityприемлемоvisible,autoа такжеhiddenтри значения атрибута, но мы можем использовать на одном элементеcontent-visibility:autoЧтобы напрямую улучшить производительность рендеринга страницы.

Предположим, у нас есть страница, похожая на страницу, есть список карточек, примерно есть375Чжан, который может отображаться примерно в видимой области экрана12карта. Как показано на изображении ниже, браузер занимает примерно1037ms:

Вы можете добавить ко всем картамcontent-visibility:

.card {
    content-visibility: auto;
}

Все карты добавленыcontent-visibilityПосле стилизации время рендеринга страницы сокращается до150ms, почти шестикратное улучшение производительности рендеринга:

как вы видели,content-visibilityОчень мощный и полезный для улучшения рендеринга страниц. Другими словами, с помощью CSScontent-visibilityсвойства, становится легче влиять на процесс рендеринга в браузере. По существу, это свойствоИзмените видимость элемента и управляйте состоянием его рендеринга..

content-visibilityНесколько похож на CSSdisplayа такжеvisibilityсвойства, однакоcontent-visibilityработает иначе, чем эти свойства.

content-visibilityКлючевые возможности,Это позволяет нам отложить рендеринг HTML-элементов по нашему выбору..默认情况之下，浏览器会渲染DOM树内所有可以被用户查看的元素。用户可以看到视窗可视区域中所有元素，并通过滚动查看页面内其他元素。一次渲染所有的元素（包括视窗可视区域之外不可见的HTML元素）可以让浏览器正确计算页面的尺寸，同时保持整个页面的布局和滚动条的一致性。

如果浏览器不渲染页面内的一些元素，滚动将是一场噩梦，因为无法正确计算页面高度。 Это потому что,content-visibilityприсвоит ему высоту элемента (height) так как0, браузер изменит высоту этого элемента на0, таким образом загромождая нашу страницу по высоте и прокручивая. Но это поведение переопределяется, если для элемента или его дочерних элементов явно задана высота. Если вы явно не устанавливаете высоту в своем элементе, и потому что вы явно устанавливаете высотуheightМожет вызвать определенные побочные эффекты без настройки, тогда мы можем использоватьcontain-intrinsic-sizeдля обеспечения правильного рендеринга элементов, сохраняя при этом преимущества отложенного рендеринга.

.card {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

Это также означает, что он будет выложен как один элемент дочернего ребенка с «внутренним размером», убедитесь, что вы не устанавливаете размерdiv(в примере.card) по-прежнему занимает место.contain-intrinsic-sizeДействует как размер-заполнитель для замены отображаемого содержимого.

несмотря на то чтоcontain-intrinsic-sizeПозволяет элементам иметь местозаполнитель, но если установлено большое количество элементовcontent-visibility: auto, полосы прокрутки по-прежнему будут иметь незначительные проблемы.

content-visibilityДва других значения предоставленыvisibleа такжеhiddenпозволяет нам реализовывать явные и скрытые элементы, такие какdisplayизnoneи неnoneПереключение значений:

при этих обстоятельствах,content-visibilityМожет улучшить производительность рендеринга для элементов, которые часто отображаются или скрыты, например отображение и скрытие модальных окон.content-visibilityможет обеспечить этот прирост производительности благодаря своему скрытому значению (hidden) работает иначе, чем другие значения:

• display: none: скрывает элемент и уничтожает его состояние рендеринга. Это означает, что отображение элемента так же дорого, как отображение нового элемента с тем же содержимым.
• visibility: hidden: скрывает элемент и сохраняет его состояние рендеринга. На самом деле это не удаляет элемент из документа, поскольку он (и его поддеревья) по-прежнему занимает геометрическое пространство на странице и по нему можно щелкнуть. Он также может обновлять состояние рендеринга, когда это необходимо, даже если он скрыт.
• content-visibility: hidden: скрывает элемент и сохраняет его состояние визуализации. Это означает, что элемент ведет себя, когда он скрыт иdisplay: noneто же самое, но опять же показать это стоит намного меньше

content-visibilityРасширенное чтение свойств:

• content-visibility: the new CSS property that boosts your rendering performance
• More on content-visibility

Добросовестное использование

CSS-рендерерПеред рендерингом стилей CSS требуется процесс подготовки, поскольку некоторые свойства CSS требуют серьезной подготовки от модуля рендеринга CSS перед рендерингом. Это может легко привести к зависанию страницы и отрицательно сказаться на пользовательском опыте.

Например, анимация в Интернете, как правило, веб-анимация (движущиеся элементы) регулярно визуализируется вместе с другими элементами.В прошлом при разработке анимации использовались 3D-преобразования CSS (transformсерединаtranslate3d()илиtranslateZ()), чтобы включить ускорение графического процессора, чтобы сделать анимацию более плавной, но это своего рода черная магия, которая переносит элемент и его контекст на другой «слой» и обрабатывается независимо от других элементов. Но такое извлечение элементов в новый слой относительно дорого, что может сделатьtransformАнимация задерживается на несколько сотен миллисекунд.

Однако теперь я не могу использоватьtransformТакой Hack означает, что для включения ускорения GPU вы можете напрямую использовать CSSwill-changeатрибут, который может указывать на то, что элемент изменит определенный атрибут, позволяя браузеру заранее выполнить необходимые оптимизации. То есть,will-changeявляется подсказкой UA, она не оказывает никакого стилистического воздействия на элемент, на котором вы ее используете. Но стоит отметить, что это может иметь косметический эффект, если создается новый контекст стека.

Например, пример анимации, подобный следующему:

<!-- HTML -->
<div class="animate"></div>

/* CSS */
.animate {
    will-change: opacity
}

Когда браузер отобразит приведенный выше код, он создаст отдельный слой для этого элемента. После этого он делегирует отрисовку этого элемента графическому процессору вместе с другими оптимизациями, т. е. браузер распознаетwill-changeсвойств и оптимизировать для будущих изменений, связанных с непрозрачностью. Это сделает анимацию более плавной, поскольку ускорение графического процессора берет на себя рендеринг анимации.

согласно с@Maximillian LaumeisterСделав тесты производительности, вы можете видеть, что он достиг более120FPSскорость рендеринга и начальная скорость рендеринга (примерно50FPS) по сравнению с увеличением70FPSо.

will-changeИспользование не сложно, оно принимает следующие значения:

• auto: Браузер по умолчанию будет основан на конкретных обстоятельствах, чтобы оптимизировать свои
• scroll-position: указывает, что разработчик изменит положение прокрутки элемента, например, браузеры обычно отображают содержимое только в «окне прокрутки» прокручиваемого элемента. А некоторый контент выходит за пределы окна (за пределы видимой области браузера). еслиwill-changeЯвная установка этого значения расширит рендеринг содержимого вокруг «окна прокрутки», сглаживая более длинную и быструю прокрутку (чтобы элементы прокручивались более плавно).
• content: указывает, что разработчик изменит содержимое элемента.Например, браузеры часто кэшируют большинство элементов, которые не меняются часто. Но если содержимое элемента постоянно меняется, то создание и поддержка этого кеша — пустая трата времени. еслиwill-changeЯвная установка этого значения может уменьшить кеширование элементов браузером или вообще избежать кеширования. Изменения в повторной отрисовке элемента от начала до конца. При использовании этого значения старайтесь использовать его в конце дерева документов, потому что это значение будет применяться к дочерним узлам элемента, который он объявляет.Если оно используется на узле выше в дереве документов, это может привести к большее влияние на производительность страницы. влияние
• <custom-ident>: указывает атрибут элемента, который изменит разработчик. Если заданное значение сокращено, по умолчанию оно расширяется, например,will-changeУстановленное значениеpaddingзатем завершает всеpaddingсвойства, такие какwill-change: padding-top, padding-right, padding-bottom, padding-left;

Для подробного использования, пожалуйста, обратитесь к:

• CSS Will Change Module Level 1
• Everything You Need to Know About the CSS will-change Property
• Справочник по CSS:will-change

хотяwill-changeМожет повысить производительность, но это свойство следует рассматривать в крайнем случае, оно не предназначено для преждевременной оптимизации. Вы должны использовать его только в том случае, если вам приходится иметь дело с проблемами производительности, которые исчезают. Если вы злоупотребите этим, это ухудшит производительность сети. Например:

использоватьwill-changeУказывает, что элемент изменится в будущем.

Поэтому, если вы попытаетесьwill-changeИспользование в сочетании с анимацией не даст вам оптимизации. Поэтому рекомендуется использовать на родительском элементеwill-change, чтобы использовать анимацию для дочерних элементов.

.animate-element-parent {
    will-change: opacity;
}

.animate-element {
    transition: opacity .2s linear
}

Не используйте неанимированные элементы.

когда вы используете элементwill-change, браузер попытается оптимизировать его, переместив элемент на новый слой и взаимодействуя с графическим процессором для преобразования. Если вам нечего конвертировать, это пустая трата ресурсов.

Кроме того, используйтеwill-changeЭто тоже непросто,MDN сделал соответствующее описание по этому поводу.:

• Не делайтеwill-changeприменяется к слишком большому количеству элементов: Браузеры изо всех сил старались оптимизировать все, что можно было оптимизировать. Есть еще несколько мощных оптимизаций, если сwill-changeВ совокупности это может потреблять много ресурсов компьютера. При чрезмерном использовании это может привести к медленному отклику страницы или потреблению большого количества ресурсов. Например*{will-change: transform, opacity;}
• использовать экономно: обычно, когда элемент восстанавливается до исходного состояния, браузер отбрасывает работу по оптимизации, которую он выполнял ранее. Но если вы явно объявите это прямо в таблице стилейwill-changeатрибут, это означает, что целевой элемент может часто меняться, и браузер будет сохранять работу по оптимизации дольше, чем раньше. Поэтому лучше всего переключаться между изменениями до и после изменения элемента с помощью скрипта.will-changeзначение
• Не применять преждевременноwill-changeоптимизация: не добавлять, если у вашей страницы нет проблем с производительностьюwill-changeатрибуты, чтобы выжать немного скорости.will-changeПервоначально он был разработан как последнее средство для решения существующих проблем с производительностью. Его не следует использовать для предотвращения проблем с производительностью. чрезмерное использованиеwill-changeЭто приведет к большому объему памяти и усложнит процесс рендеринга, поскольку браузер пытается подготовиться к возможным изменениям. Это может привести к более серьезным проблемам с производительностью.
• дать ему достаточно рабочего времени: это свойство используется разработчиком страницы, чтобы сообщить браузеру, какие свойства могут измениться. Затем браузер может заранее выполнить некоторую работу по оптимизации, прежде чем произойдет изменение. Поэтому важно дать браузеру некоторое время, чтобы выполнить эти оптимизации. При его использовании нужно постараться найти какие-то способы заранее узнать о возможных изменениях элемента, а затем добавить егоwill-changeАтрибуты.

И последнее замечание: после завершения всех анимаций рекомендуется, чтобы элементwill-changeудалять. В следующем примере показано, как использовать сценарий для правильного примененияwill-changeПримеры свойств, в большинстве сценариев вы должны это сделать.

var el = document.getElementById('element');

// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
    // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
    this.style.willChange = 'transform, opacity';
}

function removeHint() {
    this.style.willChange = 'auto';
}

в фактическом использованииwill-changeможно записать в виде следующих правил, а именноПять сделать, три не делать:

• Используйте экономно в таблицах стилейwill-change
• Датьwill-changeдостаточно времени, чтобы сделать свою работу
• использовать<custom-ident>нацелены на гиперспецифические изменения (например,left, opacityЖдать)
• При необходимости его можно использовать в JavaScript (добавлять и удалять)
• После модификации удалитьwill-change
• Не объявляйте слишком много свойств одновременно
• Не применяйте слишком много элементов
• Не тратьте ресурсы на элементы, которые перестали меняться

Сделать элемент и его содержимое как можно более независимыми от остальной части дерева документа (содержать)

Модуль содержания CSS W3C Уровень 2 Уровень 2В дополнение к предоставлениюcontent-visibilityВ дополнение к атрибуту есть еще один атрибутcontain. Это свойство позволяет нам указать конкретный элемент DOM и его дочерние элементы, чтобы они могли быть независимыми от всей древовидной структуры DOM. Цель состоит в том, чтобы дать браузеру возможность перерисовывать и перекомпоновывать только некоторые элементы, вместо того, чтобы каждый раз ориентироваться на всю страницу. То есть разрешить браузеру пересчитывать макет, стиль, рисование, размер или любую их комбинацию для ограниченной области DOM, а не для всей страницы.

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

• layout: это значение указывает, что на внутреннюю компоновку элемента не влияет никакое внешнее воздействие, а сам элемент и его содержимое не будут влиять на верхний уровень.
• paint: это значение означает, что дочерние элементы элемента не могут отображаться за пределами области элемента, элемент не будет переполняться каким-либо содержимым (или даже если он переполняется, он не будет отображаться)
• size: Это значение указывает, что размер поля элемента не зависит от его содержимого, что означает, что его дочерние элементы игнорируются при вычислении размера поля элемента.
• content: Значениеcontain: layout paintсокращение для
• strict: Значениеcontain: layout paint sizeсокращение для

Среди вышеперечисленных значенийsize,layoutа такжеpaintмогут использоваться отдельно или в сочетании друг с другом; кромеcontentа такжеstrictявляется комбинированным значением, т.е.contentдаlayout paintКомбинация,strictдаlayout paint sizeКомбинация.

containизsize,layoutа такжеpaintПредоставляет различные способы воздействия на расчеты рендеринга браузера:

• size: сообщает браузеру, что контейнер не должен вызывать перемещение позиции на странице при изменении его содержимого.
• layout: сообщает браузеру, что потомки контейнера не должны вызывать изменение макета элементов вне его контейнера, и наоборот
• paint: сообщает браузеру, что содержимое контейнера никогда не будет отрисовываться за пределы размеров контейнера, если контейнер размыт, то содержимое вообще не будет отрисовываться

@Manuel Rego Casasnovas привел пример, всемразработан и продемонстрированcontainКак улучшить производительность рендеринга веб-страницы. В этом примере есть10000такой элемент DOM:

<div class="item">
    <div>Lorem ipsum...</div>
</div>

используя javascripttextContentэтот API для динамического измененияdiv.item > divСодержание:

const NUM_ITEMS = 10000;
const NUM_REPETITIONS = 10;

function log(text) {
    let log = document.getElementById("log");
    log.textContent += text;
}

function changeTargetContent() {
    log("Change \"targetInner\" content...");

    // Force layout.
    document.body.offsetLeft;

    let start = window.performance.now();

    let targetInner = document.getElementById("targetInner");
    targetInner.textContent = targetInner.textContent == "Hello World!" ? "BYE" : "Hello World!";

    // Force layout.
    document.body.offsetLeft;

    let end = window.performance.now();
    let time = window.performance.now() - start;
    log(" Time (ms): " + time + "\n");
    return time;
}

function setup() {
    for (let i = 0; i < NUM_ITEMS; i++) {
        let item = document.createElement("div");
        item.classList.add("item");

        let inner = document.createElement("div");
        inner.style.backgroundColor = "#" + Math.random().toString(16).slice(-6);
        inner.textContent = "Lorem ipsum...";
        item.appendChild(inner);

        wrapper.appendChild(item);
    }
}

если не использоватьcontain, даже если изменение касается одного элемента, рендеринг браузера в макете может занять значительное время, так как он проходит через все дерево DOM (в этом случае дерево DOM большое, потому что оно имеет10000DOM-элементы):

В этом примереdivРазмер фиксированный, мы внутреннеdivИзменения в нем не переполнят его. Следовательно, мы можем положитьcontain: strictПрименяется к элементу, чтобы при изменении внутри элемента браузеру не нужно было посещать другие узлы, он мог прекратить проверку содержимого этого элемента и не выходить наружу.

Хотя в этом примере все просто, с помощьюcontainВеб-исполнение значительно изменилось с~4msвплоть до~0.04ms, а это огромная разница. Представьте, если бы DOM-дерево имело очень сложную структуру и содержимое, но была изменена лишь небольшая часть страницы, что произошло бы, если бы его можно было изолировать от остальной части страницы?

оcontainЕще:

• Давайте углубимся в свойство CSS Contain
• Helping Browsers Optimize With The CSS Contain Property
• CSS contain Property

Используйте font-display для устранения смещений макета (FOUT) из-за шрифтов

В процессе веб-разработки неизбежно использование@font-faceТехнология относится к некоторым специальным шрифтам (шрифтам, которых нет в системе), а также может использовать более персонализированные шрифты с переменными характеристиками шрифта.

использовать@font-faceСтратегия загрузки шрифта примерно такая, как показано на следующем рисунке:

Картинка выше оттуда@zachleatиз"A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES" статья.

Использование несистемных шрифтов в Интернете (@font-facerules), браузер может не вовремя получить веб-шрифт, он отрендерит его с резервным системным шрифтом, а затем оптимизирует наш шрифт. В это время легко заставить нестилизованный (Unstyled) текст вызвать мерцание, и весь наборный макет также будет казаться смещенным (FOUT).

К счастью, согласно@font-faceправило,font-displayСвойство определяет, как браузер загружает и отображает файл шрифта, позволяя тексту отображать заднюю панель при загрузке или сбое загрузки шрифта. Текст можно улучшить, полагаясь на свернутый текст без стиля, высветившийся для повышения производительности.

CSSfont-displayСвойство имеет пять различных значений:

• auto: По умолчанию. Типичное поведение загрузки шрифта браузера происходит, когда текст, использующий пользовательский шрифт, будет скрыт и не будет отображаться до завершения загрузки шрифта. То есть стратегия отображения шрифта такая же, как у браузера.В настоящее время стратегия большинства браузеров по умолчанию аналогичнаblock
• block: Дайте шрифту короткое время блокировки (рекомендуется в большинстве случаев).3s) и бесконечное время подкачки. Другими словами, если шрифт не загружен, браузер сначала отрисует «невидимый» текст, а как только шрифт будет загружен, шрифт будет переключен. Для этого браузер создаст анонимный шрифт аналогичного выбранному шрифту, но без «чернил» для всех глифов. Страница не может быть использована до тех пор, пока текст не будет отображаться с использованием определенного шрифта, и ее следует использовать только в этом случае.block.
• swap:использоватьswap, то время фазы блокировки равно0, время фазы обмена бесконечно. То есть, если шрифт еще не закончил загрузку, браузер немедленно отрисует текст, и после успешной загрузки шрифт будет немедленно переключен. Подобно блочному, его следует использовать только в том случае, если отображение текста с использованием определенного шрифта важно для страницы, а отображение с использованием других шрифтов по-прежнему будет отображать правильную информацию.swap.
• fallback: можно сказать, что этоautoа такжеswapкомпромисс. Текст, который необходимо отобразить с помощью пользовательского шрифта, будет невидимым в течение короткого периода времени. Если пользовательский шрифт не был загружен, сначала загрузите текст без стиля. После загрузки пользовательского шрифта текст имеет правильный стиль. использоватьfallback, время фазы блокировки будет очень небольшим (в большинстве случаев рекомендуется меньше100ms), фаза обмена также относительно короткая (в большинстве случаев рекомендуется использовать3s). Другими словами, если шрифт не загружен, резервный шрифт отображается первым. После загрузки шрифт будет переключен. Но если вы будете ждать слишком долго, на странице всегда будет использоваться резервный шрифт. Если вы хотите, чтобы пользователи начали читать как можно скорее, не нарушая работу пользователя, изменяя стиль текста из-за загрузки новых шрифтов,fallbackхороший выбор.
• optional: эффект иfallbackПочти тоже самое, текст невидим очень короткий промежуток времени, а потом подгружается нестилизованный текст. ноoptionalПараметры позволяют браузеру свободно решать, использовать ли пользовательские шрифты, и это решение во многом зависит от скорости соединения браузера. Если он медленный, возможно, ваш пользовательский шрифт не используется. использоватьoptional, время фазы блокировки будет очень небольшим (в большинстве случаев рекомендуется100ms), время фазы обмена0.

Ниже приведено использованиеswapПример значения:

@font-face {
    font-family: "Open Sans Regular";
    font-weight: 400;
    font-style: normal;
    src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");
    font-display: swap;
}

В этом примере мы делаем это, просто используяWOFF2файл для сокращения шрифта. Дополнительно мы использовалиswapтак какfont-displayЗначение страницы будет загружено, как показано на следующем рисунке:

Уведомление,font-displayобычно помещается@font-faceиспользуется в правилах.

про загрузку шрифтов иfont-displayДля более подробного ознакомления вы можете прочитать:

• A deep dive into webfonts
• How to avoid layout shifts caused by web fonts
• The Best Font Loading Strategies and How to Execute Them
• A font-display setting for slow connections
• How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy
• The importance of @font-face source order when used with preload
• The Fastest Google Fonts
• A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES

scroll-behavior делает прокрутку более плавной

Ранее я представил несколько характеристик прокрутки, которые можно использовать для изменения взаимодействия с пользователем в характеристиках прокрутки, а также новые характеристики прокрутки, изменяющие взаимодействие с пользователем, такие как захват прокрутки,overscroll-behaviorа такжеscroll-behavior.

scroll-behaviorэто новая функция, предоставляемая модулем просмотра CSSOM., что может легко помочь нам добиться эффекта шелковистой прокрутки. Это свойство может указывать режим прокрутки для полосы прокрутки. На любую другую прокрутку, например вызванную действиями пользователя, это свойство не влияет.

scroll-behaviorПринимает два значения:

• auto: Поле прокрутки прокручивается немедленно.
• smooth: Поле прокрутки использует определенную функцию времени для обеспечения плавной прокрутки в течение периода времени, определенного пользовательским агентом, платформа пользовательского агента должна следовать соглашению, если таковое имеется.

Кроме того, он имеет три глобальных значения:inherit,initialа такжеunset.

Он очень прост в использовании, просто используйте этот элементscroll-behavior:smooth. Поэтому во многих случаях, чтобы сделать прокрутку страницы более плавной, рекомендуетсяhtmlУстановите стиль прямо так:

html {
    scroll-behavior:smooth;
}

Сарафанное радио бесполезно, посмотрите на сравнение эффектов, вам станет лучше:

оscroll-behaviorДля получения дополнительной информации о свойствах найдите время, чтобы прочитать следующие статьи:

• CSSOM View Module:scroll-behavior
• CSS-Tricks: scroll-behavior
• Native Smooth Scroll behavior
• PAGE SCROLLING IN VANILLA JAVASCRIPT
• smooth scroll behavior polyfill

Включите анимацию рендеринга GPU

Браузеры оптимизированы для работы с анимацией CSS и свойствами анимации, которые плохо вызывают перекомпоновку (и, следовательно, отрисовку). Для повышения производительности анимируемые узлы можно переместить из основного потока в GPU. Свойства, которые приведут к композиции, включают 3D-преобразования (transform: translateZ(), rotate3d(),Ждать),animating,transformа такжеopacity, position: fixed,will-change,а такжеfilter. некоторые элементы, такие как<video>, <canvas>а также<iframe>, а также на соответствующих слоях. При перемещении элементов в слои (также известном как композитинг) анимация свойств преобразования выполняется в графическом процессоре, что повышает производительность, особенно на мобильных устройствах.

Сокращение времени блокировки рендеринга

Сегодня многие веб-приложения должны удовлетворять потребности многих форм, включая ПК, планшеты и мобильные телефоны. Чтобы реализовать эту адаптивную функцию, нам пришлось написать новые стили на основе размеров мультимедиа. Когда дело доходит до рендеринга страницы, он не может начать фазу рендеринга, пока объектная модель 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" />

По умолчанию браузер предполагает, что каждая указанная таблица стилей блокирует рендеринг. добавлениемmediaАтрибуты присоединяют медиа-запросы, которые сообщают браузеру, когда следует применять таблицу стилей. Когда браузер увидит таблицу стилей, которая, как он знает, будет использоваться только для определенной сцены, он все равно загрузит стили, но не заблокирует рендеринг. Разделив CSS на несколько файлов, основной файл, блокирующий рендеринг (в данном случае,styles.css) становится меньше, уменьшая время, в течение которого рендеринг блокируется.

Избегайте @import, включая несколько таблиц стилей

пройти через@import, мы можем включить таблицу стилей в другую таблицу стилей. Когда мы работаем над большим проектом, используйте@importМожно сделать код более лаконичным.

о@importКлючевым фактом является то, что это блокирующий вызов, потому что он должен сделать сетевой запрос, чтобы получить файл, проанализировать файл и включить его в таблицу стилей. Если мы вложили в таблицу стилей@import, это снизит производительность рендеринга.

/* style.css */
@import url("windows.css");

/* windows.css */
@import url("componenets.css");

и использовать@importПо сравнению, мы можем большеlinkдля достижения той же функциональности, но с гораздо большей производительностью, потому что это позволяет нам загружать таблицы стилей параллельно.

Обратите внимание, как динамически изменять пользовательские атрибуты

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

:root { --color: red; }

button {
    color: var(--color);
}

При использовании пользовательских свойств CSSrootПользовательский атрибут зарегистрирован в (корневом элементе), и зарегистрированный таким образом пользовательский атрибут является глобальным пользовательским атрибутом (глобальной переменной), который может наследоваться всеми вложенными дочерними элементами. Для приведенного выше примера--colorПозволяет любое свойствоbuttonСтиль использует его как переменную.

Учащиеся, знакомые с пользовательскими свойствами CSS, знают, что они могут использоватьstyle.setPropertyдля сброса значения зарегистрированного пользовательского свойства. Но вам нужно быть осторожным при изменении пользовательских свойств корня, так как это может повлиять на производительность сети. Еще в 2017 году @Lisi Linhart в "Performance of CSS Variables", пояснил в.

• При работе с переменными CSS мы всегда должны обращать внимание на область, в которой определена наша переменная, и если мы ее изменим, это повлияет на множество дочерних элементов, что приведет к большому количеству пересчетов стилей.
• Использование с переменными CSScalc()— отличный способ получить больше гибкости и ограничить количество переменных, которые нам нужно определить. Протестируйте в разных браузерахcalc()В сочетании с переменными CSS я не заметил больших проблем с производительностью. Однако поддержка некоторых единиц ограничена в некоторых браузерах, таких какdegилиms, так что мы должны иметь это в виду.
• Если мы сравним настройку переменных через встроенные стили в JavaScript сsetPropertyфлаги производительности метода, есть некоторые заметные различия между браузерами. Установка свойств с помощью встроенных стилей выполняется очень быстро в Safari и очень медленно в Firefox, поэтому используйтеsetPropertyУстановка переменных предпочтительнее

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

• Performance of CSS Variables
• Control CSS loading with custom properties
• CSS Custom Properties performance in 2018
• Improving CSS Custom Properties performance

резюме

Многие могут сказать, что появился 5G, производительность терминального оборудования становится все лучше и лучше, а сетевая среда становится все сильнее и сильнее. процесс веб-разработки. И мы предоставляем пользователям более плавный опыт — это одна из наших обязательных технологий. Сегодня существует множество способов и средств оптимизации веб-производительности, но внимание к каждой детали во время разработки может позволить нам добиться большего. Как указано в статье.

Помимо пунктов, упомянутых в статье, есть и другие способы использования CSS для повышения производительности веб-страниц. Конечно, некоторые функции, упомянутые в статье, еще не поддерживаются всеми браузерами, напримерcontent-visibility,containи т. д., но в будущем они определенно позволят рендерингу страниц ускорить рендеринг. Кроме того, некоторые методы, упомянутые в статье, не проработаны подробно, например метод ссылок CSS, блокировка CSS и т. д. Если вас интересует этот аспект, вы можете продолжать следить за последующими обновлениями; если у вас есть лучшие предложения или опыт в этой области, поделитесь с нами в комментариях ниже.