Какие существуют способы оптимизации производительности страницы?

Введение

В Интернете есть знаменитое правило 8 секунд. Пользователи теряют терпение, когда посещают веб-страницу более 8 секунд, и если загрузка занимает слишком много времени, они отказываются от посещения.. Большинство пользователей ожидают, что веб-страницы будут загружаться в течение 2 секунд. Фактически, вы теряете 7% своих пользователей за каждую дополнительную секунду времени загрузки. 8 секунд — это не совсем 8 секунд, они просто показывают важность времени загрузки для разработчиков веб-сайтов. Итак, как нам оптимизировать производительность страницы и повысить скорость загрузки страницы? Это основной вопрос, который будет обсуждаться в этой статье, однако оптимизация производительности — комплексная проблема, стандартного ответа на которую нет, все перечислить непросто.

Эта статья фокусируется только на некоторых основных моментах.Ниже приводится краткое изложение распространенных методов оптимизации производительности в сочетании с курсом MOOC «Оптимизация производительности веб-интерфейса»:

Если вы считаете, что статья немного полезна для вас, добро пожаловать вмой блог на гитхабеСтавьте лайк и подписывайтесь, большое спасибо!

1. Сжатие и консолидация ресурсов

В основном включают такие аспекты:сжатие html, сжатие css, сжатие js и объединение и слияние файлов. Сжатие ресурсов удаляет из файлов посторонние символы, такие как символы возврата каретки и пробелы. Когда вы пишете код в редакторе, вы используете отступы и комментарии, эти методы, несомненно, сделают ваш код лаконичным и читабельным, но они же добавляют лишние байты в документацию.

1.html сжатие

Сжатие HTML-кода предназначено для сжатия этих символов, которые имеют значение в текстовых файлах, но не отображаются в HTML, включая пробелы, символы табуляции, символы новой строки и т. д., а некоторые другие значимые символы, такие как комментарии HTML, также могут быть сжаты.

Как сделать html сжатие:

1. Используйте онлайн-сайт для сжатия (обычно не используется во время разработки)
2. nodejs предоставляет инструмент html-minifier
3. Сжатие рендеринга движка шаблонов бэкенда

2.сжатие кода css:

Сжатие кода CSS — это просто удаление недопустимого кода и слияние семантики CSS.

Как сделать css сжатие:

1. Используйте онлайн-сайт для сжатия (обычно не используется во время разработки)
2. Используйте инструмент html-minifier
3. Сжать CSS с помощью clean-css

3. Сжатие и путаница js

Сжатие и путаница js в основном включает следующие части:

1. Удаление недопустимых символов
2. Удалить комментарии
3. Сокращение и оптимизация семантики кода
4. Защита кода (логика кода загромождается, что снижает читабельность кода, что важно)

Как сжимать и возиться с js

1. Используйте онлайн-сайт для сжатия (обычно не используется во время разработки)
2. Используйте инструмент html-minifier
3. Используйте uglifyjs2 для сжатия js

На самом деле, сжатие и путаница сжатия css и js намного выгоднее, чем сжатие html. В то же время код css и код js намного больше, чем код html. Сокращение трафика, вызванное сжатием css и сжатием js, будет очень очевидный. Таким образом, для крупных компаний сжатие html не является обязательным, но сжатие css и сжатие js и путаница должны быть!

4. Слияние файлов

Как видно из рисунка выше, отсутствие мерж-реквестов имеет следующие недостатки:

• Между файлами вставляются восходящие запросы, что добавляет N-1 сетевых задержек.
• Более серьезно затронуты проблемой потери пакетов
• В методе keep-alive могут быть ситуации, и он может отключаться при прохождении через прокси-сервер, а значит, состояние keep-alive не может поддерживаться все время.

Сжатие и слияние css и js может уменьшить количество http-запросов для веб-сайта, но слияние файлов может привести к проблемам: рендеринг верхней части страницы и проблемы с аннулированием кеша.. Итак, как бороться с этой проблемой? ----Слияние общих библиотек и слияние разных страниц.

Как сделать слияние файлов

1. Объединение файлов с помощью онлайн-сайта
2. Слияние файлов с использованием nodejs (gulp, fis3)

2. Асинхронная загрузка неосновного кода асинхронная загрузка

1. Метод асинхронной загрузки

Три способа асинхронной загрузки — асинхронная и отложенная, создание динамического скрипта

① асинхронный метод

• Атрибут async — это новый атрибут HTML5, для которого требуется поддержка браузеров Chrome, FireFox, IE9+.
• Атрибут async указывает, что как только скрипт станет доступен, он будет выполняться асинхронно.
• атрибут async работает только с внешними скриптами
• В случае нескольких скриптов этот метод не гарантирует, что скрипты будут выполняться по порядку.

<script type="text/javascript" src="xxx.js" async="async"></script>

② метод отсрочки

• Совместимость со всеми браузерами
• Атрибут defer указывает, следует ли откладывать выполнение скрипта до загрузки страницы.
• При наличии нескольких скриптов этот метод может гарантировать, что все скрипты с установленным атрибутом defer будут выполняться по порядку.
• Если скрипт не изменяет содержимое документа, в тег script можно добавить атрибут defer, чтобы ускорить обработку документа.

③ Динамически создавать теги сценарияДо того, как отсрочка и асинхронность не были определены, способ асинхронной загрузки заключается в динамическом создании сценариев и использовании метода window.onload для обеспечения загрузки страницы, а затем вставки тега сценария в DOM. Конкретный код выглядит следующим образом. :

function addScriptTag(src){  
    var script = document.createElement('script');  
    script.setAttribute("type","text/javascript");  
    script.src = src;  
    document.body.appendChild(script);  
}  
window.onload = function(){  
    addScriptTag("js/index.js");  
}  

2. Отличие асинхронной загрузки

1) defer будет выполняться после парсинга HTML, если их больше одного, то они будут выполняться в порядке загрузки.

2) асинхронность выполняется сразу после загрузки, если их несколько, то порядок выполнения никак не связан с порядком загрузки

Синяя линия представляет собой чтение из сети, красная линия представляет время выполнения, оба из которых относятся к скриптам, а зеленая линия представляет собой синтаксический анализ HTML.

3. Используйте кеш браузера

Для веб-приложений кэширование является мощным инструментом повышения производительности страниц и снижения нагрузки на сервер.

Тип кеша браузера

1. Сильный кеш: запрос на сервер не отправляется, а ресурсы считываются напрямую из кеша.В сетевой опции хром-консоли видно, что запрос возвращает код состояния 200, а размер показывает с диска кэш или из кэша памяти;

Связанные заголовки:

Expires: время истечения срока действия в заголовке ответа. Когда браузер снова загружает ресурс, если он находится в пределах этого времени истечения срока действия, он попадет в сильный кеш. Его значение представляет собой строку абсолютного времени в формате GMT, например Expires:Thu,21 Jan 2018 23:39:02 GMT.

Cache-Control: это относительное время при настройке кэша в секундах с числовым значением. Когда установлено значение max-agn = 300, представитель сильного кеша в течение 5 минут запроса правильно возвращает время (браузер также будет записывать). Например, cache-control: max-agn=300,

Краткое содержание: На самом деле между ними нет большой разницы, разница в том, что Expires является продуктом http1.0, а Cache-Control — продуктом http1.1.Если оба существуют одновременно, Cache-Control имеет более высокий приоритет, чем Expires.; В некоторых средах, не поддерживающих HTTP1.1, вступает в действие Expires. Так что Expires на самом деле устаревший продукт, и его существование на данном этапе — это просто способ написания совместимости. Сильный кеш определяет, основан ли кеш на том, превышает ли он определенное время или определенный период времени, и не заботится о том, был ли обновлен файл на стороне сервера, что может привести к тому, что загруженный файл не будет самым последним содержимым на на стороне сервера.Итак, как мы узнаем, был ли обновлен контент на стороне сервера по сравнению с контентом на стороне клиента?? На этом этапе нам нужно согласовать стратегию кэширования.

2. Кэш согласования: отправьте запрос на сервер, и сервер определит, нужно ли попасть в кеш согласования, в соответствии с некоторыми параметрами заголовка запроса.Если он попадает, он возвращает код состояния 304 и приносит новый заголовок ответа, чтобы уведомить браузер о необходимости чтения из кеша.Получить ресурсы; кроме того, согласованный кеш необходимо использовать вместе с cache-control.

Связанные заголовки:

①Last-Modified и If-Modified-Since: Когда ресурс запрашивается в первый раз, когда сервер передает ресурс клиенту, он добавит время последнего изменения ресурса в заголовок объекта в форме «Последнее изменение: GMT» и вернет его. к клиенту вместе.

Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT

Клиент пометит ресурс этой информацией, и в следующий раз, когда он запросит снова, он прикрепит информацию к сообщению запроса и передаст его на сервер для проверки.Если переданное значение времени согласуется с окончательным временем модификации ресурса на сервере означает, что ресурс не был изменен.Возвращайте код состояния 304 напрямую, содержимое пусто, что экономит объем передаваемых данных. Если два времени не совпадают, сервер отправит обратно ресурс с кодом состояния 200, аналогично первому запросу. Это гарантирует, что ресурсы не отправляются клиенту повторно, и что при изменении сервера клиент может получить самые последние ресурсы. Ответ 304 обычно намного меньше, чем статический ресурс, что экономит пропускную способность сети.

Но last-modified имеет некоторые недостатки:

Ⅰ Некоторые серверы не могут получить точное время модификации

Ⅱ.Изменилось время модификации файла, но содержимое файла не изменилось

Поскольку вопрос о том, недостаточно ли кэша, определяется на основе времени модификации файла, можно ли определить стратегию кэширования непосредственно на основе того, было ли изменено содержимое файла? ----ETag и If-None-Match

②ETag и If-None-Match: Etag — это заголовок ответа, возвращаемый сервером при последней загрузке ресурса. Это уникальный идентификатор ресурса. При изменении ресурса Etag будет создаваться повторно. В следующий раз, когда браузер загрузит ресурс и отправит запрос на сервер, он поместит значение Etag, возвращенное в прошлый раз, в If-None-Match в заголовке запроса.Серверу нужно только сравнить отправленное If-None-Match. клиентом со своим собственным сервером.Если ETag ресурса непротиворечив, можно судить о том, был ли ресурс изменен по отношению к клиенту. Если сервер обнаружит, что ETag не совпадает, он напрямую отправит новый ресурс (включая новый ETag) клиенту в виде обычного возвращаемого пакета GET 200; если ETag непротиворечив, он напрямую вернет 304 на уведомить клиента напрямую. Просто используйте локальный кеш.

сравнение между двумя:Во-первых, по точности Etag лучше, чем Last-Modified. Единицей времени Last-Modified являются секунды.Если файл изменяется несколько раз в течение 1 секунды, то их Last-Modified на самом деле не отражает модификацию, но Etag будет меняться каждый раз, чтобы обеспечить точность; если он сбалансирован по нагрузке Last-Modified, сгенерированный каждым сервером, также может быть несогласованным.Во-вторых, по производительности Etag уступает Last-Modified, в конце концов, Last-Modified нужно только записать время, а Etag нужен сервер для вычисления хеш-значения с помощью алгоритма.В-третьих, с точки зрения приоритета проверка сервера отдает приоритет Etag.

механизм кэширования

Обязательное кэширование имеет приоритет над согласованным кэшированием.Если действует обязательное кэширование (Expires и Cache-Control), кеш используется напрямую.Если оно не действует, выполняется согласованное кэширование (Last-Modified / If-Modified-Since и Etag /If-None-Match) , кэш согласования определяется сервером, следует ли использовать кеш. Если кеш согласования недействителен, кеш, представляющий запрос, недействителен, а результат запроса повторно загружается и сохраняется в браузере. кеш; если он действителен, он возвращает 304 и продолжает использовать кеш. Основной процесс выглядит следующим образом:

Влияние поведения пользователя на кэширование браузера

1. Доступ к адресной строке и переход по ссылкам являются нормальным поведением пользователя, которое запускает механизм кэширования браузера;

2. Обновление F5, браузер установит max-age=0, пропустит строгую оценку кеша и будет согласовывать оценку кеша;

3. Обновите ctrl+F5, пропустите надежный кэш и кэш согласования и извлеките ресурсы непосредственно с сервера.

Если вы хотите узнать больше о механизме кэширования, нажмитеГлубокое понимание механизма кэширования браузера

4. Используйте CDN

Погоня за скоростью в крупномасштабных веб-приложениях не останавливается на кеше браузера, потому что кеш браузера всегда только для повышения скорости второго посещения.Для ускорения первого посещения нам нужно оптимизировать с сетевого уровня , Наиболее распространенным методом является ускорение CDN (Content Delivery Network).Кэшируя статические ресурсы (такие как javascript, css, изображения и т. д.) на узле CDN того же сетевого оператора, который находится рядом с пользователем, можно не только повысить скорость доступа пользователя, но и снизить потребление полосы пропускания. сервера и снизить нагрузку.

Как ускоряется CDN?

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

Пять предварительно обработанных DNS

Еще один ресурс — это предварительно загруженные методы оптимизации производительности, мы можем использовать эту технологию для определенных ресурсов заранее, чтобы сообщить браузеру, что они могут быть использованы в будущем.С помощью предварительного разрешения DNS, чтобы сообщить браузеру, что мы можем получить ресурсы с определенного URL-адреса в будущем, когда браузер фактически использует ресурс в домене, разрешение DNS может быть завершено как можно скорее. Например, в будущем мы можем получать изображения или звуковые ресурсы с сайта example.com, а затем включать в теги в верхней части документа следующее:

<link rel="dns-prefetch" href="//example.com">

Когда мы запрашиваем ресурс с этого URL-адреса, нам больше не нужно ждать процесса разрешения DNS. Этот метод особенно полезен для использования сторонних ресурсов. Этим совместимым браузерам можно указать выполнить предварительное разрешение DNS с помощью простой строки кода, что означает, что, когда браузер фактически запрашивает ресурс в этом домене, разрешение DNS уже выполнено, что экономит драгоценное время. Также обратите внимание, чтоБраузер автоматически включит предварительную выборку DNS для href тега a, поэтому доменное имя, содержащееся в теге a, не нужно вручную устанавливать ссылку в заголовке. Но он не работает под HTTPS, требует мета для включения функции. Причина этого ограничения состоит в том, чтобы не допустить перехвата имен хостов, отображаемых в гиперссылках на страницах HTTPS, на основе предварительной выборки DNS. Функция следующего предложения состоит в том, чтобы принудительно открыть разрешение доменного имени с тегом a.

<meta http-equiv="x-dns-prefetch-control" content="on">

Порекомендуйте полезный инструмент мониторинга ошибок для всехFundebug, добро пожаловать, чтобы попробовать это бесплатно!

Добро пожаловать в публичный аккаунт:Мастер по фронтенду, мы будем свидетелями вашего роста вместе!

Ссылаться на

• Оптимизация производительности веб-интерфейса
• Оптимизация производительности внешнего интерфейса — предварительная загрузка ресурсов
• Развертывание CDN для фронтенд-инжиниринга
• [Ошибка 887] Краткий обзор механизма кэширования браузера
• Глубокое понимание механизма кэширования браузера