Автор этой статьи:вершина горы, ведущий инженер танцевальной труппы 360 Qi, член рабочей группы W3C Performance, а также участвовал в исследовании рабочей группы WOT.
Мы все знаем, что для веб-сайта очень важна производительность.Как важная часть рендеринга страницы и отображения контента, CSS влияет на первое впечатление пользователя от всего веб-сайта. Поэтому связанную с этим оптимизацию производительности нельзя игнорировать.
Мы часто думаем об оптимизации производительности, когда проект завершен, и часто ее откладывают до конца проекта или даже когда выявляются серьезные проблемы с производительностью.Я думаю, что большинство людей глубоко понимают это.
Автор считает, что для того, чтобы больше избежать этой ситуации, мы должны в первую очередь уделить внимание работе, связанной с оптимизацией производительности, и пропустить ее через весь дизайн и разработку продукта. Во-вторых, это понимание содержания, связанного с производительностью, и, естественно, оптимизация производительности в процессе разработки проекта. Наконец, и самое главное, с этого момента реализуйте оптимизацию.
Рекомендуется прочитать предыдущее сообщение от Qiwu Weekly.«Эй, я дам вам карту оптимизации веб-производительности»1Эта статья может помочь вам сформировать общее представление о том, что вам нужно сделать для оптимизации производительности и что вам нужно учитывать.
Эта статья подробно познакомит вас с навыками, связанными с оптимизацией производительности CSS, автор разделит их наПрактичныйирекомендуемыеДве категории, всего 8 советов. Практические навыки могут быть быстро применены в проектах и могут хорошо повысить производительность.Они также часто используются автором.Рекомендуется попрактиковаться в проектах как можно скорее. Среди предложенных навыков некоторые могут не оказывать существенного влияния на производительность, а некоторые не используются всеми в обычное время, поэтому автор не будет акцентировать на этом внимание, и читатели смогут понять это в соответствии со своей ситуацией.
Перед официальным стартом всем необходимоКак работают браузеры2Определенное понимание есть, и малые партнеры, которым оно нужно, могут просто сначала понять.
Давайте начнем с4 практических совета по оптимизации, начиная с ключа CSS над сгибом.
1. Вставьте критический CSS в верхнюю часть страницы (Critical CSS)
В оптимизации производительности есть важный показатель -первый действительный розыгрыш(First Meaningful Paint, сокращенно FMP) относится к моменту, когда основной контент страницы (основной контент) появляется на экране. Эта метрика влияет на время, необходимое пользователям для ожидания перед просмотром страницы, и **встроенный критический CSS (т.е. критический CSS может быть назван выше критического CSS сгиба)** может сократить это время.
Все должны привыкнуть ссылаться на внешние файлы CSS с помощью тегов ссылок. Но имейте в виду, что встраивание CSS непосредственно в документ HTML ускоряет загрузку CSS. При использовании внешних файлов CSS необходимо знать файлы CSS, на которые следует ссылаться после загрузки документа HTML, а затем загружать их. так,Встроенный CSS может заставить браузер начать рендеринг страницы раньше, так как его можно отобразить после завершения загрузки HTML.
Поскольку встроенный CSS может ускорить время начала рендеринга страницы, возможно ли встроить весь CSS? Очевидно, что нет, этот подход не подходит для встраивания больших файлов CSS. так какначальное окно перегрузки3Существует ограничение (концепции, связанные с TCP, обычно 14,6 КБ, сжатый размер), если встроенный файл CSS превышает этот предел, системе необходимо совершать больше циклов обмена между сервером и браузером, что не увеличивает время рендеринга страницы. Поэтому мы должныВстраивайте только критически важные CSS-коды, необходимые для преобразования содержимого верхней части страницы в HTML..
Теперь, когда вы знаете, что встроенный ключевой CSS в верхней части страницы может оптимизировать производительность, следующим шагом будет определение ключевого CSS в верхней части страницы. Очевидно, что нам не нужно вручную определять, что выше критически важного CSS. Есть проект на гитхабеCritical CSS4, вы можете извлечь ключевые стили, относящиеся к первому экрану.Вы можете взглянуть на проект и использовать его со своими собственными инструментами сборки. Конечно, для обеспечения правильности вам лучше лично подтвердить отсутствие извлеченного контента.
Однако у встроенного CSS есть недостаток: после встраивания CSS не будет кэшироваться и каждый раз будет загружаться заново. Но, как упоминалось выше, если мы сохраним размер встроенного файла менее 14,6 КБ, это не будет большой проблемой.
Как и выше, мы представили, почему и как встраивать критический CSS, так что же нам делать с остальной частью CSS? Рекомендуется использовать внешний CSS для импорта оставшихся CSS, что позволяет кэшировать их в дополнение к их асинхронной загрузке.
2. Загружайте CSS асинхронно
CSS отображает блокировку, и браузер не будет отображать обработанный контент, пока файл CSS не будет запрошен, загружен и проанализирован. Иногда эта блокировка необходима, потому что мы не хотим, чтобы браузер начал отображать страницу до загрузки необходимого CSS. Затем, после того, как ключ CSS над сгибом встроен, блокировка рендеринга оставшегося содержимого CSS не требуется, и внешний CSS можно использовать и загружать асинхронно.
Так как же добиться асинхронной загрузки CSS? Существует четыре способа добиться асинхронной загрузки CSS браузером.
Первый способ — динамически создавать элементы ссылок таблицы стилей с помощью JavaScript и вставлять их в модель DOM.
// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
Второй способ — добавить элемент linkmediaсвойству задан тип мультимедиа (или медиазапрос), который не соответствует браузеру пользователя, напримерmedia="print", или даже типы, которых вообще не существуетmedia="noexist". Для браузеров, если таблица стилей не подходит для текущего типа носителя, ее приоритет будет понижен, и она будет загружена без блокировки рендеринга страницы.
Конечно, это только для того, чтобы добиться асинхронной загрузки CSS.mediaЗначение установлено наscreenилиall, что заставляет браузер начать синтаксический анализ CSS.
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
Аналогично второму способу, мы также можем пройтиrelимущество будетlinkЭлементы отмечены какalternateДополнительные таблицы стилей, которые также могут быть загружены браузером асинхронно. Также не забудьте загрузить послеrelПоменяй обратно.
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
Вышеупомянутые три метода являются относительно старыми. в настоящее время,rel="preload"5Этот веб-стандарт определяет, как асинхронно загружать ресурсы, включая ресурсы, подобные CSS.
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
Уведомление,asЭто необходимо. пренебрегатьasатрибут или ложьasсвойства делаютpreloadЭквивалентноXHRзапрос, браузер не знает, какой контент загружается, поэтому приоритет загрузки таких ресурсов будет очень низким.asНеобязательное значение может ссылаться на приведенный выше стандартный документ.
Это выглядит как,rel="preload"Использование ничем не отличается от двух предыдущих, как путем изменения некоторых свойств, браузер загружает файл CSS асинхронно, но не анализирует его, пока загрузка не будет завершена и модификация не будет восстановлена, а затем начинает парсинг.
Но между ними есть одно важное отличие, т.Используйте предварительную загрузку, а не несоответствиеmediaспособ начать загрузку CSS раньше. Поэтому, хотя поддержка этого стандарта не идеальна, все же рекомендуется использовать этот метод в приоритете.
Этот стандарт теперь является стандартом-кандидатом, и считается, что браузеры постепенно будут поддерживать этот стандарт. Поддержка каждого браузера показана на рисунке ниже.
Как видно из рисунка выше, поддержка этого метода в текущих браузерах не оптимистична, но мы можем пройти мимо.loadCSS6Заполните его полифилом, поэтому не имеет значения, поддерживается он или нет.
3. Сжатие файлов
Одним из самых простых и часто используемых методов оптимизации производительности является сжатие файлов, которое часто оказывается эффективным.
Размер файла напрямую влияет на скорость загрузки браузера, особенно при плохой сети. Я считаю, что все уже давно привыкли к сжатию CSS, и современные инструменты сборки, такие как webpack, gulp/grunt, rollup и т. д., также поддерживают сжатие CSS. Сжатый файл может быть значительно уменьшен, что может значительно сократить время загрузки браузера.
4. Удалите бесполезный CSS
Хотя сжатие файлов может уменьшить размер файла. Но при сжатии файлов CSS обычно удаляются только бесполезные пробелы, что ограничивает коэффициент сжатия файлов CSS. Существуют ли другие способы оптимизации CSS? Ответ, очевидно, да, если сжатый файл все еще превышает ожидаемый размер, мы можем попробоватьНайдите и удалите бесполезный CSS в вашем коде.
В общем, есть два вида бесполезных CSS-кодов: один — повторяющийся код в разных элементах или других ситуациях, а другой — CSS-код, который не действует на всей странице. В первом случае при написании кода мы должны как можно больше извлекать общедоступные классы, чтобы уменьшить дублирование. Для последнего в процессе сопровождения кода разными разработчиками всегда будут генерироваться коды CSS, которые больше не используются.Конечно, эта проблема может возникнуть и тогда, когда его пишет один человек. И эти бесполезные коды CSS не только увеличат количество загрузок браузера, но и увеличат время парсинга браузера, что сильно снижает производительность. Так что нам нужно найти и удалить эти бесполезные коды.
Конечно, было бы неэффективно вручную удалять эти бесполезные CSS. мы можем использоватьUncss7библиотека для выполнения. Uncss можно использовать для удаления бесполезного CSS из таблиц стилей, он поддерживает несколько файлов и CSS, внедренный JavaScript.
О четырех практических методах оптимизации уже говорилось ранее, давайте представим их ниже.4 совета по консультированию.
1. Используйте селекторы выборочно
Большинство моих друзей должны знатьСелекторы CSS сопоставляются справа налево, эта стратегия приводит к различиям в производительности между разными типами селекторов. по сравнению с#markdown-content-h3, очевидно, используя#markdown .content h3, браузеру требуется больше времени для создания дерева рендеринга. Поскольку последнему необходимо сначала найти всеh3элементов, а затем отфильтровать элементы-предки, которые не.contentДа, наконец, отфильтровать.contentпредки не#markdownиз. Только подумайте, если на странице больше уровней вложенности и больше элементов, то затраты времени на сопоставление, естественно, будут выше.
Однако современные браузеры сделали большую оптимизацию в этом отношении, и разница в производительности между разными селекторами не очевидна или даже очень мала. Кроме того, разные селекторыПроизводительность в разных браузерах8Он не полностью унифицирован, и учесть каждый браузер при написании CSS невозможно.. По этим двум причинам нам нужно помнить только о следующих моментах при использовании селекторов, а все остальное может полностью зависеть от наших предпочтений.
- Будьте проще и не используйте слишком сложные вложенные селекторы.
- Подстановочные знаки и селекторы атрибутов наименее эффективны и должны соответствовать большинству элементов, поэтому старайтесь их избегать.
- Не украшайте теги элементов селекторами классов и селекторами идентификаторов, такими как
h3#markdown-content, что снизит эффективность. - Не жертвуйте читабельностью и ремонтопригодностью ради скорости.
Если у вас все еще есть сомнения по поводу вышеперечисленных пунктов, автор рекомендует выбрать одну из следующих методологий CSS (BEM9,OOCSS10,SUIT11,SMACSS12,ITCSS13,Enduring CSS14и т. д.) в качестве спецификации написания CSS. Использование единой методологии может помочь всем сформировать единый стиль, уменьшить конфликты имен и избежать описанных выше проблем. Короче говоря, есть много преимуществ. Если вы еще не использовали ее, используйте ее как можно скорее.
Советы. Почему селекторы CSS сопоставляются справа налево?
Больше селекторов в CSS не будет совпадать, поэтому при рассмотрении проблем с производительностью вам нужно подумать, как повысить эффективность, когда селекторы не совпадают. Для этой цели используется сопоставление справа налево, и эта стратегия делает селекторы CSS более эффективными, когда они не совпадают. Думая об этом таким образом, имеет смысл тратить больше производительности на сопоставление.
2. Сокращение использования дорогих свойств
Когда браузер рисует экран,Все свойства, которые требуют манипуляций или вычислений в браузере, относительно дороги.. Они замедляют производительность рендеринга браузера при перерисовке страницы. Поэтому при написании CSS мы должны свести к минимуму использование дорогостоящих свойств, таких какbox-shadow/border-radius/filter/прозрачность/:nth-childЖдать.
Конечно, не каждый может не использовать эти свойства, потому что это должны быть те свойства, которые мы часто используем. Причина упоминания об этом состоит в том, чтобы дать каждому понять это. Когда есть два варианта на выбор, можно отдать предпочтение варианту без атрибутов или с меньшими затратами.Если этот выбор делать каждый раз, производительность веб-сайта будет улучшаться неосознанно.
3. Оптимизированная перестановка и перерисовка
Во время использования веб-сайта некоторые операции вызывают изменение стиля. В настоящее время браузеру необходимо обнаружить эти изменения и выполнить повторную визуализацию. Некоторые из этих операций требуют большей производительности. Все мы знаем, что когда FPS составляет 60, пользователи чувствуют себя комфортно при использовании веб-сайта. То есть нам нужно завершить все операции, связанные с каждым рендерингом, в течение 16,67 мс, поэтому мы хотим минимизировать стоимость дополнительных операций.
3.1 Уменьшить перестановку
Перекомпоновка заставляет браузер пересчитывать весь документ и перестраивать дерево рендеринга, что замедляет скорость рендеринга браузера. Как показано ниже, существует множество операций, запускающих перекомпоновку, и нам следует избегать частого запуска этих операций.
- Изменять
font-sizeиfont-family - Изменение внутренних и внешних полей элемента
- Изменить класс CSS через JS
- Получите связанные с положением свойства элементов DOM через JS (например, ширину/высоту/слева и т. д.)
- Активация псевдокласса CSS
- Прокрутите полосу прокрутки или измените размер окна
Кроме того, мы также можемCSS Trigger15Запросите, какие свойства запускают перекомпоновку и перерисовку.
Стоит отметить, что некоторые свойства CSS имеют лучшую производительность перекомпоновки. ИспользуемыйFlex, чем при использованииinline-blockиfloatReflow работает быстрее, поэтому его можно расставить по приоритетам при верстке.Flex.
3.2 Избегайте ненужных перекрасок
Перерисовка запускается, когда внешний вид элемента (например, цвет, фон, видимость и т. д.) изменяется. Во время использования веб-сайта,Перекраска неизбежна. Однако браузер оптимизирует это, объединяя несколько операций перекомпоновки и перерисовки в одно выполнение. Но нам еще нужноИзбегайте ненужных перекрасок, такие как событие наведения при прокрутке страницы, вы можете отключить событие наведения при прокрутке, чтобы страница была более плавной при прокрутке.
Кроме того, мы пишем все больше и больше кода, связанного с анимацией, на CSS, и мы привыкли использовать анимацию для улучшения взаимодействия с пользователем. Когда мы пишем анимацию, мы также должны обращаться к вышеуказанному содержимому, чтобы уменьшить триггер перерисовки и перекомпоновки. Кроме того, мы также можемАппаратное ускорение16иwill-change17Чтобы улучшить производительность анимации, в этой статье мы не будем подробно рассказывать об этом. Заинтересованные партнеры могут щелкнуть ссылку, чтобы просмотреть ее.
Последнее, что следует отметить, это то, что устройство пользователя может быть не таким хорошим, как представлялось, по крайней мере, не таким хорошим, как наша машина для разработки. Мы можем использовать инструменты разработчика Chrome, чтобы замедлить процессор, а затем выполнить соответствующие тесты.Метод замедления показан на рисунке ниже.
Если вам нужен доступ к нему на мобильном телефоне, лучше установить более низкое ограничение скорости, потому что мобильная производительность, как правило, хуже.
4. Не используйте @import
Наконец, не используйте @import для представления CSS, я думаю, вы редко его используете.
Есть две основные причины, по которым использование @import не рекомендуется.
Во-первых, импорт CSS с помощью @import влияет на параллельную загрузку для браузеров. Только после того, как файл CSS, на который ссылается @import, будет загружен и проанализирован, браузер узнает, что есть еще один CSS, который нужно загрузить, и затем загрузит его, а затем начнет анализ и построение дерева рендеринга после загрузки, ряд операций. Это предотвращает параллельную загрузку браузером необходимых файлов стилей.
Во-вторых, несколько @imports могут привести к неупорядоченным загрузкам. В IE @import приведет к нарушению порядка загрузки файлов ресурсов, т.е.Файлы js, расположенные после @import, загружаются до @import и нарушают или даже уничтожают параллельную загрузку самого @import..
Так что не используйте этот метод, просто используйте тег ссылки.
Суммировать
На данный момент мы представили 4 практических навыка и 4 рекомендуемых навыка для оптимизации производительности CSS.После понимания этих навыков можно приступать к оптимизации производительности CSS. Не медлите, начните как можно скорее.
Спасибо
Выражаем особую благодарность @anjia(Anjia), @刘玉晨, @hxl(黄晓lu) и @刘光宇 за их трудолюбивые исправления и ценные предложения по структуре и содержанию статьи.
Справочная статья
- Efficiently Rendering CSS
- How to write CSS for a great performance web application
- CSS performance revisited: selectors, bloat and expensive styles
- Avoiding Unnecessary Paints
- Five CSS Performance Tools to Speed up Your Website
- How and Why You Should Inline Your Critical CSS
- Render blocking css
- Modern Asynchronous CSS Loading
- Preload