Вы сделали этот список оптимизации?

введение

Всем привет, вот@IT · Союз братьев Пинтоу,Я首席填坑官——Сунан(Юг·Вс), сегодня второй день Национального дня, и я не выходил на улицу в этот праздник (не спрашивайте почему, решайте сами~😭), несколько дней назад поделился статьейРезюме фронтенд-интервью, некоторые студенты задали некоторые детали в группе, и оптимизация производительности, которая больше всего волнует всех.Сегодня я разобрал некоторые моменты в проекте компании, которые я считаю хорошими, и поделился с вами.Если у вас есть любые недоразумения, пожалуйста, исправьте их. .

Сводка по оптимизации

1,Прежде всего,CSSТаблица стилей размещается в шапке страницы иlinkВведение в цепочку, javascript помещается перед закрывающим тегом нижнего тела, чтобы избежать блокировки.

2,js/html/css/ изображения сжимаются и объединяются.Предварительная загрузка изображений и отложенная загрузка также являются обычным явлением.Здесь я рекомендую инструмент для экстремального сжатия изображений без потерь, который может уменьшить размер примерно на 60-80%.Ручное управление -TinyPNG.

3.Уменьшите количество элементов DOM и уменьшите манипуляции с DOM:

• Уменьшите количество DOM-элементов, рационально используйте :after, :before и другие псевдоклассы, чтобы избежать глубокой вложенности страниц;
• Оптимизируйте производительность javascript, уменьшите количество операций DOM (или централизованных операций) и эффективно избегайте страниц重绘/重排;
• Как это меньше? К сожалению, нет возможности дать стандартный и точный ответ, его можно только максимально оптимизировать, например, подкачку данных, прямо из сгиба и загрузку по требованию.

4.статические ресурсыCDNраспределение:

• Целью CDN является максимально возможное сокращение ресурсов для обеспечения непрерывности информации в случае пересылки, передачи, джиттера канала и т. д.;
• С точки зрения непрофессионала этоCDNСистема может работать в режиме реального времени, основываясь на сетевом трафике и подключении каждого узла, состоянии загрузки и用户的距离и время отклика для перенаправления запроса пользователя от пользователя最近的服务节点Вверху — раньше говорили, что расстояние рождает красоту, а потом говорили, что расстояние рождает любовницу, здесь距离产生的是用户跑路了, поэтому достаточно проиллюстрировать CDN重要性;
• CDN принимает механизм кеша каждого узла.Кэш очень серьезный.Когда статические ресурсы нашего проекта (только ресурсы, хранящиеся на CDN ранее) изменяются, если кеш CDN не был обновлен соответствующим образом, старые веб-страницы будут все еще видно.Решение Это обновить кеш.Облако Qiniu и Tencent Cloud могут обновлять определенный файл/каталог отдельно;
• В рекламе часто говорится: «Хотя вино XX хорошее, не жадничайте», и то же самое верно для хостинга CDN.РазумныйИспользовать: картинки, общие компоненты js, стили сброса css и т.д., то есть файлы, которые не часто изменяются, могут выходить в CDN, включая некоторые ознакомительные страницы в проекте;
• Тег img должен установить высоту и ширину, и он также может уменьшить размер страницы таким же образом.重绘/重排,использоватьWebPОтформатируйте изображение, оно может сжимать исходное изображение (png) почти на 98%, конечно, оно не идеально:

WebPПервоначально выпущенный в 2010 году, цель состоит в том, чтобы уменьшить размер файла, поддерживать сжатие без потерь, сжатие с потерями, динамические и статические изображения, а коэффициент сжатия лучше, чем GIF, JPEG, JPEG2000, PNG и другие форматы, очень подходящие для передачи по сети и других изображений. , и теперь он поддерживается все большим количеством браузеров.Конечно, формат WebP также имеет свои недостатки.По сравнению с другими форматами алгоритм более сложный, что займет вычислительные ресурсы при экономии ресурсов трафика, вызывая большую нагрузка на компьютер.WebPМаксимальное поддерживаемое количество пикселей составляет 16383x16383. WebP со сжатием с потерями поддерживает только 8-битноеYUV4:2:0Формат. Сжатие без потерь (обратимое сжатие) WebP поддерживает кодировку VP8L и 8-битное цветовое пространство ARGB. И будь то сжатие с потерями или без потерь, он поддерживает прозрачный альфа-канал, цветовую конфигурацию ICC, данные интерпретации XMP и более подробные инструкции по поддержке:caniuse.com

Преимущество:

• небольшой объемПочти без преувеличения можно сказать, что она уже мала и меньше быть не может;
  
• Маленький и красивый, но тоже хорошего качества, почти не отличающийся от оригинального изображения;
  
• В прошлом сжатие динамического изображения в формате gif и jpeg было бы нечетким, но теперь это так просто~.
  

Недостаток/трудность:

• В настоящее время не все браузеры поддерживаютWebP, значит нужно решить проблему адаптации браузера;
  
• Для запущенных проектов используйтеWebPНужно заменить много картинок, слишком много работы (не уверен, что фоновая программа справится).

5.Разделение домена:

• Что такое разделенное доменное имя? Многие компании подают заявку на доменное имя только для первоначального построения проекта, и все содержимое сайта (html/php/jsp, js, css, img и т. д. размещается под одним доменным именем), разделение доменного имени в основном увеличить параллелизм запросов ресурсов браузера. Степень — проблема параллелизма, которая позволяет браузеру инициировать больше запросов одновременно, а также решает проблему файлов cookie, переносимых по умолчанию в запросах, уменьшая байты передачи данных;
• Как разделить? На примере текущей разработки front-end и back-end разделения рекомендуется разделить на три категории:

• Front-end class - html, css, js, диаграммы/слайсы и т.д. самого проекта;
• Статический класс — упомянутый выше класс ресурса CDN;
• Динамические классы — могут быть классифицированы как классы внутреннего интерфейса API;

Ниже приведено количество одновременных запросов для каждого браузера, данные взяты изchorme搜索, цените жизнь, держитесь подальше от...🙏:

браузер	HTTP/1.1	HTTP/1.0
Chrome	6	6
Fire Fox	6	6
Safari	4	4
IE11	6	6
IE9	10	10
...	...	...

6. уменьшить количество http-запросов

• Да, вы правильно прочитали, то есть для уменьшения количества http-запросов и экономии времени сетевых запросов, но вы можете спросить еще раз, а не разделяли ли вы ранее доменное имя? ? Один — разделение развертывания, другой — сокращение запросов, без проблем;
• Во-первых, давайте посмотрим на процесс HTTP-запроса (Кратко объяснить):

• Разрешение доменного имени DNS -1.Достаньте телефон и найдите номер определенного разъема;
• Инициировать трехстороннее рукопожатие TCP -2.Пароль после подключения:A), привет, привет, я Янцзы № 1, ты меня слышишь?B)Привет, я река Янцзы № 2, ты слышишь, ты говоришь, ты слышишь, что я говорю?A), слышите, приступим к делу...;
• Обычная передача данных... -3.очень хорошо болтать;
• 4 взмаха руки для завершения отключения передачи -4.После чата приготовьтесь попрощаться:A), (это может быть сервер или клиент) Я закончил то, что должен сказать, вы сами разберетесь;B), Хорошо, я закончил говорить;B), (Затем Б отправил сообщение А), до свидания;A), а затем А получил сообщение Б, а Б положил трубку и повесил трубку, А подождал некоторое время и услышал, что Б ничего не сказал, а затем повесил трубку (Вешает трубку, сука безжалостная, шоу неправедный, я сопровождаю вас в чате, как это Давно я не даю хороший обзор~😂);
• Конечно, сейчасHTTP/2.0Обработка другая, у процесса 2.0 тоже естьTLS/SSLHTTP — это протокол передачи гипертекста, информация передается в виде обычного текста, HTTPS — это безопасный протокол SSL (центр сертификации, приложение для сертификации), зашифрованный протокол передачи, зашифрованная передача HTTPS, сетевой протокол аутентификации личности, передача контента проходит проверку целостности, Есть много преимуществ, таких как в качестве проверки контент симметрично шифруется, каждое соединение генерирует уникальный ключ шифрования, и третья сторона не может подделать личность сервера (клиента) Это также является основной причиной замедления HTTPS.
• 上两图吧，这样大家看着清晰一些, но пока в списке только HTTP/1.0. Картинка с HTTP/2.0 будет добавлена ​​в следующий раз. Там есть большой парень, который указал на меня, сказав, что это выглядит более раздражающим, и всем это больше понравится, ха-ха~ :

В заключение: Из вышеописанного процесса видно, что каждый запрос такой сложный, надо ли уменьшать количество http запросов? ? Ответ положительный, мы будем оптимизировать в следующих измерениях:

• сливатьсяJS、CSSдокумент;
• Спрайты изображений/иконок объединены или используютсяiconfontзначок шрифта илиSVG Sprites;Что такое SVG-спрайты?;
• Ресурсы загружаются по требованию, то есть то, что используется на текущей странице, что загружается, избегайте загрузки вещей, не связанных с текущей страницей, которая теперь является React/Vue/Angular и т. д.MVVMФреймворк, основанный на инструментах компиляции и упаковки webpack, хорошо справляется со своей задачей;
• Кэш внешних данных (таких как: страница со списком, введите данные, а затем вернитесь, интерактивное поведение пользователя очень частое, вы можете кэшировать ход данных списка, и вам не нужно загружать его каждый раз, когда вы return, например, обновление каждые 5 минут.

7.Кэш настроек данных, так устал писать, настройки http кеша, сводка предыдущих интервью 👉Как настроить http кеш?Бар;8,На сервере сайта включено сжатие Gzip.Конечно, вы также можете узнать о Brotli или Zopfli.Говорят, что Brotli более эффективен, чем Gzip и Deflate.Заинтересованные студенты могут узнать об этом;

9,Избегайте редиректов и минимизируйте использование iframe, которое блокирует отрисовку главной страницы;

10.Избегайте использования CSS Expression (выражения css), также известного как Dynamic properties (динамические свойства);

11.Разумное использование dns-prefetch, prefetch, preload, defer, async:

• dns-prefetch: Используйте dns-prefetch для выполнения предварительного разрешения DNS для доменных имен, используемых в проекте, чтобы уменьшить количество DNS-запросов, таких как: Гиганты BAT делают это, см. рисунок ниже, подробный процесс разрешения DNS сегодня обсуждаться не будет, Код не движется, а писать и делиться им утомительнее, чем работать сверхурочно над проектами. Надеюсь на ваше понимание~;
• prefetch: это флаг загрузки ресурса с очень низким приоритетом, и браузер будет загружать ресурс сprefetchИдентифицированные ресурсы кешируются на диск, и когда последующие модули будут использовать этот файл, они будут считываться напрямую из кеша, эта функция webpack имеет плагин, который можно автоматически вставлять на страницу после настройки и компиляции;
• preload: Да, это атрибут, который может предварительно загружать ресурсы.Подробности смотрите на официальном сайтеAPI, При нормальных обстоятельствах мы можем предварительно загрузить аудио, img, шрифт, сценарий и другие ресурсы, необходимые для следующего бизнеса (даже для следующей страницы маршрутизации), что может обеспечить эффект открытия страницы за 0 секунд!

• Это пока все, что я могу придумать, добавляйте...

Суммировать:

• Несколько рекомендуемых инструментов:WebPagetest,Lighthouse,SpeedCurve,New RelicИнструменты активного/пассивного мониторинга, такие как эти, могут эффективно помочь нам проанализировать и найти проблему, чтобы назначить правильное лекарство;
• Предварительное разрешение DNS не важно. Это процесс преобразования URL-адреса в IP-адрес для запроса корневого сервера. Его можно обобщить и поделиться им в следующий раз. Заинтересованные учащиеся также могут сначала узнать об этом.
• 要把一个项目做好，每一个细节都很重要，希望今天的分享能给大家的工作带来些许帮助，谢谢！

План публикации статьи:

В последнее время я думал о том, как систематически делиться накопленной работой.Я читал много блогов, написанных великими богами во время Национального дня.Наконец, я решил попробовать написать блог, исходя из своих возможностей и времени. .# 动画 #Серия статей, анимация в основном может содержать (CSS/Canvas) две части, приветствую всех, чтобы продолжать обращать внимание!
Вышеизложенное является сегодняшним обменом.Я буду стараться изо всех сил, чтобы стать лучше и писать лучшие статьи, когда я новичок в дороге.Если в статье что-то не так, пожалуйста, поправьте меня. Если вы считаете, что эта статья полезна для вас, не забудьте поставить лайк или подписаться на нас.公众号О~.

Автор: Сунан-Главный специалист по заполнению карьеров

Группа обмена: 912594095, публичный аккаунт:honeyBadger8

Данная статья является оригинальной и авторские права принадлежат автору. Для коммерческой перепечатки обращайтесь@IT·平头哥联盟Авторизованная, некоммерческая перепечатка, просьба указывать оригинальную ссылку и источник.