Автор: Тэм Ханна
Переводчик: Front-end Xiaozhi
Источник: креативблок
Чем больше вы знаете, тем больше вы не знаете
Ставьте лайк и смотрите снова, формируйте привычку
эта статьяГитхаб:GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.
Чтобы обеспечить удобочитаемость, в этой статье используется вольный перевод, а не дословный перевод.
CSS должен пройти через относительно сложный конвейер, точно так же, как HTML и JavaScript, браузер должен загрузить файл с сервера, проанализировать его и применить к DOM. Из-за экстремального уровня оптимизации этот процесс обычно проходит очень быстро — для небольших веб-проектов, не основанных на фреймворках, CSS обычно составляет лишь малую долю от общего потребления ресурсов.
Каркас нарушает этот баланс. Включает стек JavaScript GUI, например jQuery UI, для наблюдения за тем, как CSS, JS и HTML постепенно увеличиваются в размерах. Обычно разработчики нервничают в последнюю очередь, когда они стоят за мощной 8-ядерной рабочей станцией, используют интернет T3, никого не волнует скорость, которая меняется с задержкой или устройствами с ограниченным процессором.
Оптимизация CSS требует многомерного подхода. В то время как написанный от руки код можно упростить с помощью различных методов, ручная проверка кода фреймворка неэффективна. В этих случаях использование автоматизированных упрощений дает лучшие результаты.
Следующие шаги перенесут нас в мир оптимизации CSS. Не каждый из них может быть непосредственно применен к вашему проекту, но обязательно помните о них.
01. Используйте стенографию
Используйте сокращенные операторы, как показано ниже.marginобъявление, может радикально уменьшить размер файлов CSS. поиск в гуглеCSS ShorthandМожно найти много других сокращенных форм.
p { margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px; }
p { margin: 1px 2px 3px 4px; }
02. Найдите и удалите неиспользуемый CSS
Удаление ненужных частей CSS, очевидно, ускорит загрузку страницы. Браузер Google Chrome имеет эту возможность из коробки. Просто перейдите в «Просмотр»> «Разработчик»> «Инструменты разработчика» и в последних сборках откройте вкладку «Источники» и откройте меню команд. Затем выберите «Показать покрытие», чтобы выделить неиспользуемый код на текущей странице в окне «Анализ покрытия».
Откройте Google Chrome DevTools, вConlseДополнительные параметры рядомCoverage, вы можете увидеть неиспользуемый CSS, нажмите на соответствующий элемент, и неиспользуемый код на текущей странице будет выделен, что откроет вам глаза:
03. Сделайте это более удобным способом
Навигация в построчном анализе не обязательно удобна, использование аудитов Google Chrome может быстро помочь нам проанализировать, как использовать, откройте инструменты разработчика, нажмитеAuditsполе, нажмитеRun auditsЗатем приступайте к анализу результатов.
04. Будьте в курсе этих проблем
Помните, что автоматический анализ CSS всегда будет приводить к ошибкам. После замены несжатых CSS-файлов сжатыми CSS-файлами тщательно протестируйте весь сайт — никто не знает, какие ошибки может вызвать оптимизатор.
05. Встроенный критический CSS
Загрузка внешних таблиц стилей требует времени из-за задержки, поэтому поместите наиболее важные фрагменты кода вheadсередина. Однако убедитесь, что вы не переусердствуете, помня, что люди, выполняющие задачи обслуживания, также должны читать код.
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
06. Разрешить антипараллельный анализ
@importЛегко добавляйте стили CSS в свой код. К сожалению, за эти преимущества приходится платить: из-за@importМогут быть вложенными, поэтому их нельзя анализировать параллельно. Более параллельный подход заключается в использовании сериитеги, которые немедленно доступны для браузера.
@import url("a.css");
@import url("b.css");
@import url("c.css");
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
<link rel="stylesheet" href="c.css">
07. Замена изображений с помощью CSS
Несколько лет назад набор полупрозрачных png-файлов был обычным явлением для создания полупрозрачных эффектов на веб-сайтах. Фильтры CSS теперь предоставляют альтернативный метод экономии ресурсов. Например, следующий фрагмент кода гарантирует, что рассматриваемое изображение будет отображаться как версия самого себя в градациях серого.
img {
-webkit-filter: grayscale(100%);
/* old safari */
filter: grayscale(100%);
}
08. Используйте сочетания цветов
Здравый смысл подсказывает нам, что шестизначные цветовые дескрипторы — наиболее эффективный способ выразить цвет. Это не так — сокращенные описания или названия цветов в некоторых случаях могут быть короче.
target { background-color: #ffffff; }
target { background: #fff; }
09. Удалите ненужные единицы с нулевой суммой
CSS поддерживает различные форматы единиц измерения и чисел. Они являются благодарной целью оптимизации — конечные нули и конечные нули могут быть удалены, как показано во фрагменте кода ниже. Кроме того, имейте в виду, что ноль всегда является нулем, и добавление измерения не увеличивает ценность содержащейся в нем информации.
padding: 0.2em;
margin: 20.0em;
avalue: 0px;
padding: .2em;
margin: 20em;
avalue: 0;
10. Удалите лишние точки с запятой
Эта оптимизация требует осторожности, поскольку она влияет на изменения в коде. Спецификация CSS позволяет опускать последнюю точку с запятой в группе свойств. Поскольку экономия затрат при использовании этого метода оптимизации невелика, мы в основном обращаемся к нему для программистов, разрабатывающих автоматическую оптимизацию.
p {
. . .
font-size: 1.33em
}
11. Используйте атлас текстур
Загрузка нескольких небольших изображений неэффективна из-за накладных расходов протокола. Спрайты CSS объединяют серию небольших изображений в один большой файл PNG, который затем разбивается по правилам CSS. Такие программы, как [TexturePacker][3], значительно упрощают процесс создания.
.download {
width:80px;
height:31px;
background-position: -160px -160px
}
.download:hover {
width:80px;
height:32px;
background-position: -80px -160px
}
12. Опустить пикс.
Простой способ повысить производительность — использовать функцию стандарта CSS. Единицей по умолчанию для значения 0 являетсяpx-- удалятьpxДля каждого числа можно сохранить два байта.
h2 {padding:0px; margin:0px;}
h2 {padding:0; margin:0}
13. Избегайте свойств, которые требуют требований к производительности
Анализ показывает, что одни этикетки дороже других. Следующие разборы повлияют на производительность — старайтесь не использовать их без необходимости. радиус границы коробка-тень трансформировать фильтр :nth-ребенок положение: фиксированное;
14. Удалить пробелы
Пробелы — подумайте о табуляции, возврате каретки и пробелах — облегчают чтение кода, но с точки зрения синтаксического анализатора от них мало пользы. Удалите их перед публикацией. Лучше делегировать эту задачу сценарию оболочки или аналогичному инструменту.
15. Удалить комментарии
Комментарии также не влияют на компилятор. Создайте собственный парсер, чтобы удалить их перед публикацией. Это не только экономит полосу пропускания, но также гарантирует, что злоумышленникам и клонерам будет труднее понять смысл имеющегося кода.
##16. Использование автоматического сжатия
Команда Yahoo, занимающаяся пользовательским интерфейсом, создала приложение, которое выполняет множество задач по сжатию. Он распространяется в виде файла JAR, доступного здесь, и может быть запущен с выбранной JVM.
java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar
[options] [input file]
Global Options
-h, --help Displays this
information
--type <js|css> Specifies the
type of the input file
##17. Запускаем на NPM
Если вы хотите интегрировать продукт в Node.JS, посетите [npmjs.com/package/yuicompressor][4]. Плохо поддерживаемый репозиторий содержит набор файлов-оболочек и JavaScript API.
var compressor = require('yuicompressor');
compressor.compress('/path/to/
file or String of JS', {
//Compressor Options:
charset: 'utf8',
type: 'js',
18. Отметьте, чтобы сохранить Sass
Хотя производительность селекторов CSS, в отличие от нескольких лет назад, столь важна (см. Ресурсы), но такие фреймворки, как Sass, иногда производят очень сложные имена, время от времени просматривая выходной файл и обдумывая пути оптимизации результатов.
19. Настройка кеша
Есть старая поговорка, что самые быстрые файлы никогда не отправляются по сети. Наличие кеша браузера для запроса эффективно выполняет это. К сожалению, настройка заголовка кеша должна выполняться на сервере. Полные двух инструментов Chrome, упомянутых выше, они обеспечивают быстрый способ анализа результатов изменений.
20. Разбить кеш
Дизайнеры обычно не любят кэширование, потому что опасаются, что браузер кэширует последнюю таблицу стилей. Простой способ исправить это — включить тег с именем файла. К сожалению, сценарий, изложенный в коде, сопровождающем этот шаг, работает не везде, так как некоторые прокси отказываются кэшировать файлы с «динамическими» путями.
<Link rel="stylesheet" href="style.css?v=1.2.3">
21. Не забывайте об основах
Оптимизация CSS — это только часть игры. Если ваш сервер не использует сжатие HTTP/2 и gzip, вы потеряете много времени при передаче данных. К счастью, решить обе эти проблемы обычно несложно. В нашем примере показаны некоторые настройки обычного сервера Apache. Если вы окажетесь в другой системе, просто обратитесь к документации сервера.
pico /etc/httpd/conf/httpd.conf
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы исправить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, вот полезный инструмент мониторинга ошибок [Fundebug][ 6].
оригинал:woooooo.creative Bha Q.com/how-to/21-I…
общаться с
Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете. [1]: /img/bVbpTtp [2]: /img/bVbpTtJ [3]:woohoo.code и Web.com/texture pack… [4]: Уууу, эта лошадь plus.com/package/YUI… [5]: /img/bVbAQp1 [6]: woohoo.fun на bug.com/?UTM_source…