Оптимизация производительности мобильных веб-сайтов от начального до продвинутого — основы

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

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

Во-первых, запись

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

зачем сжимать?

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

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

HTML-сжатие

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

• узлыhtml-minifier.
• Онлайн-инструменты сжатия, инструменты для веб-мастеров и многое другое.

Сжатие файлов CSS и JavaScript

Сжатие JavaScript, в основном для удаления избыточных новых строк и пробелов и т. д. Для грамматики JavaScript может выбратьзапутанное сжатие和非混淆压缩，无论哪种压缩都是为了减少JavaScript的文件大小，当然出于前端代码保护来看，混淆压缩会大大破坏原有的阅读逻辑，增加压缩比，从而给代码添加一层保护。 CSS compression, empathy is to remove excess line breaks and spaces, etc., due to the special nature of the CSS file is temporarily unable to achieve compression confusion, mainly to the large number of compression wrap removal, you can reduce a lot of file размер.

• узлыuglifyjs2— мощная библиотека сжатия JavaScript.
• узлыclean-cssэто мощная библиотека сжатия CSS.
• Онлайн-инструменты сжатия, инструменты для веб-мастеров и многое другое.

сжатие изображений

Для обычных интерфейсных проектов существует два основных типа использования изображений:

• CDN

1. дляФиксированное изображение,рекомендоватьtinypng.com/Он импортируется после онлайн-сжатия.Поддерживает изображения в форматах png и jpeg.Относится к сжатию с потерями, удаляет некоторые ненужные метаданные изображения и использует 8 бит для представления 24 битов похожих пикселей, которые трудно различить с помощью невооруженным глазом Степень сжатия составляет 70%.

   

2. использоватьКарта спрайтов CSS: объедините некоторые изображения, используемые на вашем сайте, в одно изображение: Плюсы: уменьшает количество HTTP-запросов (черезbackgroundPositionнайти нужное изображение). Недостатки: Когда интегрированное изображение относительно велико, загрузка происходит медленно (если изображение не загружается успешно, вся страница потеряет информацию об изображении).
3. длянефиксированное изображение, общее оптимизационное сжатие в основном имеет следующие принципы: Приоритет использования высокой степени сжатияjpegТипа изображение, недостаток в том, что не поддерживает прозрачность. Используйте, если возможноwebP(новый тип, разработанный Google) тип изображения является лучшим выбором, имеет меньший размер файла и более высокое качество изображения, чем jpeg.

Консолидация ресурсов

В дополнение к объединению и сжатию файлов статических ресурсов, таких как css и js, во время внешнего кодирования мы также можем объединять несколько запросов css и js в один запрос на странице. Объединение файлов приводит к сокращению количества http-запросов, особенно на мобильной стороне, каждый http-запрос приносит慢启动,三次握手,连接建立, поэтому слияние ресурсов сделано важным, слияние и не слияние контрастируют:

1. Когда браузер получит документ HTML с сервера, превратите HTML в дерево DOM в памяти, если вы обнаружите CSS или изображение на узле (узле), вы отправите 1 запрос на запрос CSS или изображения, затем продолжите выполнение следующее преобразование, не дожидаясь возврата запроса, а затем помещает возвращенный контент в дерево DOM после возврата запроса.
2. Но при ссылке на JS браузер всегда будет ждать возврата запроса после отправки запроса js.
3. Поскольку браузеру нужна стабильная древовидная структура DOM, и очень вероятно, что в JS есть код, который напрямую изменяет древовидную структуру DOM, браузеру необходимо перестроить дерево DOM, чтобы предотвратить изменение JS дерева DOM, поэтому он буду阻塞Другие загрузки и визуализации. Итак, как решить и избежать проблемы блокировки, мы тестируем проблемы внедрения js и css в разных ситуациях через тестовый код следующим образом:

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <link rel=”stylesheet” type=”text/css” href=”stylesheet.css” media=”screen”>
      <link rel=”stylesheet” type=”text/css” href=”page-animation.css” media=”screen”>
      <script type =”text/javascript” >
          var f = 1;
          f++;
      </script >
  </head>
  <body>
    <img src=”download-button.png”>
  </body>
</html>

Процедура испытаний опущена, может обратиться кздесь, мы можем сделать следующие выводы:

• Браузеры имеют параллельную загрузку: запросы ресурсов выполняются одновременно.
• Браузеры могут поддерживать одновременные запросы. Разные браузеры поддерживают разное количество одновременных запросов (разделенное на доменное имя). В примере с Chrome предел параллелизма составляет 6 точек оптимизации: Распределите ресурсы CDN под несколькими доменными именами.
• Введение css через ссылку в шапку заблокирует отрисовку страницы, в стиле страницы надо разместить вот так.
• непосредственно через<script src>Js ввел блокировку внешнего узла рендеринга позади, внешний js как можно больше на нижнем теле.
• Старайтесь не внедрять js в голову.
• Если вы хотите представить js, попробуйте встроить js в строку.
• Поместите встроенный js перед всеми ссылками, импортированными css.
• Для внешних js, которые блокируют последующий контент<script src>, нужно добавитьdeferрешать.

3. Оптимизация кеша

Когда запрос браузера на ресурс попадает в надежный кеш, возвращаемый статус HTTP равен 200, а размер будет отображаться как из дискового кеша в сети инструментов разработчика Chrome.без отправки запроса,Как показано ниже

• Истекает: указывает, сколько времени осталось до истечения срока действия страницы, кэшированной и сохраненной в браузере, что эквивалентно эффекту max-age в Cache-control.Если он существует в то же время, он будет перезаписан max-age Кэш-Контроля.
• Кэш-Контроль:
  • общедоступный: ответы кэшируются и распределяются между несколькими пользователями.
  • private: значение по умолчанию, ответ может использоваться только как частный кеш (например, в браузере) и не может быть разделен между пользователями;
  • no-cache: ответ не будет кэшироваться, а будет запрашивать ресурсы с сервера в режиме реального времени.
  • max-age: значение в секундах, количество секунд между временем запроса и временем истечения срока действия. Относительный временной интервал на основе времени запроса (поле Дата), а не абсолютное время истечения срока действия;

Согласованный кеш: Last-Modified&Etag

Когда запрос браузера о ресурсе не попадает в сильный кеш, он отправляет запрос на сервер, чтобы проверить, попал ли кеш согласования. Будет отображаться измененная строка. Например, если вы откроете домашнюю страницу JD.com, нажмите F12, чтобы открыть инструменты разработчика, затем нажмите F5, чтобы обновить страницу, и проверьте сеть, вы увидите, что многие запросы попадают в кеш согласования. :

• Last-Modified/If-Modified-Since: время последней модификации локального файла на сервере. По истечении срока действия кеша на сервер отправляется время последней модификации кэшированной страницы на стороне браузера. Сервер сравнивает это время со временем последней модификации фактического файла на сервере. Если время совпадает, то вернуть 304, и клиент будет напрямую использовать локальный кэш document.
• Etag/If-None-Match: (EntityTags) — это тег URL-адреса, который используется для указания того, изменился ли объект URL-адреса, как правило, хеш-значение сущности ресурса. Подобно Last-Modified, если сервер проверяет, что ETag ресурса не изменился (ресурс не был обновлен), он вернет статус 304, указывающий клиенту использовать локально кэшированный файл. Приоритет Etag выше, чем Last-Modified, Etag в основном предназначен для решения
• Некоторые проблемы, которые Last-Modified не может решить.
  • Файл может периодически меняться, но его содержимое не меняется, и клиент не хочет получать его снова;
  • Степень детализации, которую может проверить If-Modified-Since, находится на уровне s;
  • Некоторые серверы не могут получить точное время последней модификации файла.

4. Ленивый загрузка предварительной нагрузки

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

ленивая загрузка

• Изображение Запрос ресурса изображения после входа в область просмотра.
• Уменьшите неэффективные ресурсы нагрузки.
• Слишком много ресурсов, загруженных одновременно, заблокируют загрузку js и повлияют на нормальное использование веб-сайта. После установки img src webkit не запрашивает этот ресурс после его разбора. Поэтому мы надеемся, что после того, как изображение достигнет видимой области,img srcОн будет установлен, и настоящий src не является реальным до достижения видимой области, а является заполнителем в 1 пиксель.

Предварительная загрузка

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

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