[Внешняя оптимизация] Сжато с 9,2 с до 3,6 с для загрузки первого экрана.

оптимизация производительности
[Внешняя оптимизация] Сжато с 9,2 с до 3,6 с для загрузки первого экрана.

задний план

В связи с постоянной итерацией бизнеса и растущим проектом, чтобы предоставить пользователям лучший опыт, оптимизация интерфейса является для нас неизбежной темой. Отличный веб-сайт должен иметь богатые функции и относительно низкую скорость отклика блока.Предположительно, мы предпочитаем ощущение шелковистой гладкости при просмотре веб-страниц. Как фронтенд-инженер, оптимизация проекта в основном фокусируется на следующих моментах: время белого экрана, время первого экрана, время полной страницы, время DNS и загрузка ЦП. Что касается нашего текущего проекта, для разработки используется Angular.Время загрузки первого экрана составляет 9,2 секунды.Эта скорость значительно снижает пользовательский опыт.Благодаря этой оптимизации загрузка первого экрана сжимается до 3,6 секунд. Далее мы пошагово объясним этот процесс оптимизации.

Проблемы с таргетингом PageSpeed ​​Insights

На самом деле, идея оптимизации главной страницы проекта возникла еще раньше, потому что понятие фронтенд-оптимизации относительно велико и охватывает широкий спектр, и часто невозможно начать с проект. Я также читал и заимствовал много отличных статей перед оптимизацией и наконец нашел очень полезный инструмент — PageSpeed ​​Insights для Chrome. Это подключаемый модуль Google Chrome, который можно использовать для обнаружения проблем с производительностью на веб-страницах. После его установки добавьте его в DevTools, и вы можете с радостью начать поиск проблем.Возьмите приведенное выше изображение в качестве примера, вы можете видеть, что PageSpeed ​​​​Insights будет классифицировать проблемы, существующие на веб-странице, которую необходимо оптимизировать, и определенные файлы могут быть расположены в каждой категории, так что изначально абстрактная оптимизация внешнего интерфейса очень проста. ярко представлены нам перед вами. Направление оптимизации в основном делится на сжатие кода, кеширование браузера и сжатие статических ресурсов.Как только направление станет ясным, вы можете начать трансформировать проблему.

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

сжатие кода

Объединяя передовые инженерные идеи, я разделю сжатие кода на две категории: одна — это сжатие файлов, когда проект создается с помощью инструментов упаковки, таких как настройка различных плагинов сжатия в Webpack, а другая — передача ответ интерфейсному серверу Конфигурация сжатия, например, Nginx Gzip.

Конфигурация веб-пакета

Поскольку Angular-Cli интегрирует внутреннюю интеграцию Webpack и переупаковывает его, в проекте Angular 6.0+, если вы хотите оптимизировать или изменить конфигурацию упаковки Webpack, вам необходимо пройти Angular-Builders, что требует от нас установки пакета отдельно . Конечно, если это проект, упакованный непосредственно с помощью Webpack, этот шаг можно пропустить.

npm install @angular-builders/custom-webpack --save-dev
npm install @angular-devkit/build-angular --save-dev

Нет необходимости устанавливать отдельно webpack и webpack-dev-server, потому что эти два являются зависимостями @angular-devkit/build-angular.При установке @angular-devkit/build-angular webpack и webpack-dev-server будут быть автоматически установлен.

После завершения установки вам необходимо изменить конфигурацию файла angular.json и добавить конфигурацию веб-пакета, которую мы добавим позже, в команды запуска (обслуживания) и компиляции (сборки), тогда ключевые конфигурации будут следующими:

"architect": {
        ......
        "build": {
            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
                "customWebpackConfig": {
                    "path": "./webpack.config.js"
                }
            }
        },
        "serve": {
            "builder": "@angular-builders/custom-webpack:dev-server",
            "options": {
                "customWebpackConfig": {
                    "path": "./webpack.config.js"
                }
            }
        }
    }

Затем вам нужно создать файл конфигурации в корневом каталоге, который я назвал здесь webpack.config.js. На данный момент подготовка к связыванию Angular и пользовательской конфигурации Webpack завершена, и теперь мы можем записать требуемую конфигурацию Webpack во вновь созданный файл. Внедрить плагины сжатия, соответственно сжать Js, Html, Css, Js сжатие:UglifyJsPlugin, HTML-сжатиеHtmlWebpackPlugin, для извлечения публичных ресурсов:CommonsChunkPlugin, извлеките css и сожмите:ExtractTextPlugin.

Настроить сжатие Nginx

Поскольку все наши интерфейсные проекты развернуты через Nginx, нам также необходимо включить сжатие передачи Gzip на Nginx, что может сжать объем передаваемого файла пакета примерно до 1/4 от исходного, и эффект очень очевиден.

gzip on;
gzip_types text/plain application/javascriptapplication/x-javascripttext/css application/xml text/javascriptapplication/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

После настройки и перезапуска Nginx, когда вы видите Content-Encoding: gzip в заголовке ответа на запрос, это означает, что конфигурация сжатия передачи вступила в силу.В это время вы можете видеть, что размер запрошенного файла был сильно сжат. .

Сжатие статических ресурсов

Использовать спрайт

Функция изображения спрайта состоит в том, чтобы уменьшить количество запросов, а объединенный объем нескольких изображений будет меньше, чем сумма объемов нескольких изображений.Это также относительно распространенная схема сжатия изображений и инструмент генерации изображений спрайтов. Рекомендовано.sprite-generator

Используйте изображения в формате WebP

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

Загружать через CDN

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

Оптимизация производительности рендеринга страницы

Уменьшить перестановку перерисовки

Следующие три ситуации могут вызвать отрисовку страницы.

  • Изменить DOM
  • Изменить стиль
  • пользовательское событие

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

  • Операции чтения нескольких DOM следует записывать вместе, насколько это возможно, и не добавлять операции записи к последовательным операциям чтения.
  • Если стили переформатированы, попробуйте кэшировать стили.
  • Не меняйте стиль по отдельности, лучше менять его единообразно через Class.
  • Попробуйте использовать автономный DOM для изменения стилей и напишите объект, когда закончите.
  • сначала установите элемент вdisplay: none, а затем работать с узлом.
  • позицияabsoluteилиfixedСтоимость перестановки элементов относительно невелика, поскольку не учитывается влияние других элементов.
  • Узлы с display:none не будут добавлены в Render Tree, а visibility:hidden будут, поэтому, если узел изначально скрыт, лучше установить display:none.

Избегайте блокировки CSS, JS

Говоря о блокировке ресурсов, давайте проясним, что современные браузеры всегда загружают ресурсы параллельно. Например, когда синтаксический анализатор HTML заблокирован сценарием, синтаксический анализатор прекратит построение DOM, но все равно распознает ресурс, стоящий за сценарием, и предварительно загрузит его. По умолчанию CSS рассматривается как ресурс, блокирующий рендеринг, что означает, что браузер не будет рендерить обработанный контент до тех пор, пока не будет построена CSSOM.
Javascript может читать и изменять не только свойства DOM, но и свойства CSSOM. При наличии блокирующих ресурсов CSS браузер задерживает выполнение javascript и построение дерева рендеринга.
Когда браузер встречает тег скрипта, построение DOM приостанавливается до тех пор, пока скрипт не завершит выполнение. javascript может запрашивать и изменять DOM и CSSOM Когда CSSOM построен, выполнение javascript будет приостановлено до тех пор, пока CSSOM не будет готов. Итак, положение тега script очень важно. В реальном использовании вы можете следовать следующим двум принципам

  • Ресурс CSS лучше, чем импорт ресурсов JS
  • JS должен как можно меньше влиять на построение DOM

Измените способ блокировки js с помощью отсрочки и асинхронности
<script defer></script>
Скрипт загружается в режиме отсрочки, что не блокирует синтаксический анализ HTML.Js не будет выполняться до тех пор, пока не будет сгенерирован DOM и не загружен скрипт.<script async></script>
Атрибут async указывает, что JS, представленный асинхронным выполнением, не будет блокировать синтаксический анализ HTML во время загрузки, а будет выполняться сразу после завершения загрузки, и событие загрузки в это время все еще будет заблокировано.

Суммировать

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

Категории