Практика оптимизации производительности официального веб-сайта HUAWEI CLOUD

Для анализа оптимизации веб-производительности мы должны обсудить два основных аспекта, а именно: оптимизация загрузки и оптимизация рендеринга.Конечно, у нас есть и другие методы оптимизации, так как же мы делаем оптимизацию производительности в HUAWEI CLOUD Woolen?

Оптимизация нагрузки

Как показано на рисунке выше, это трудоемкий процесс анализа полного сетевого запроса:

Очередь: ожидание доступных подключений, приоритет, количество подключений, выделенный дисковый кеш
Заблокировано/Блокировка: Запрос на ожидание времени отправки
Поиск DNS: время запроса DNS
Начальное соединение/подключение: время, затрачиваемое на установление соединения, рукопожатие/повторную попытку TCP и время согласования для SSL.
Запрос отправлен/отправлен: время, потраченное на выполнение сетевых запросов.
Ожидание (TTFB): количество миллисекунд, которое требуется для инициирования начального сетевого запроса до «до получения первого байта от сервера».
Загрузка/загрузка контента: время, затраченное на получение ответных данных.

Исходя из этого, мы можем сделать следующие оптимизации:

1. Оптимизируйте сетевое соединение

Существует три основных правила оптимизации сетевых подключений: использовать ускорение CDN, сократить количество запросов DNS и избегать перенаправлений.

CDN: CDN — это набор географически распределенных веб-серверов, используемых для более эффективного распространения контента.
Поиск DNS: DNS используется для сопоставления имен хостов и IP-адресов.Как правило, разрешение занимает от 20 до 120 миллисекунд.
Перенаправление: перенаправление одного URL-адреса на другой. Функция перенаправления выполняется с помощью двух кодов состояния HTTP, 301 и 302.

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

preload: Когда браузер встречает следующий тег ссылки, он сразу же начинает скачивать main.js (без блокировки парсера) и помещать его в память, но не будет выполнять в нем JS-оператор. preload в основном используется для предварительной загрузки ресурсов, необходимых для текущей страницы.

<link rel="preload" href="/main.js" as="script">

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

<link rel="prefetch" href="/images/big.jpeg">

dns-prefetch: инструктирует браузер предварительно разрешать доменные имена DNS. Это уменьшает задержку открытия страниц. Запросы DNS очень малы с точки зрения пропускной способности, но имеют очень большую задержку, особенно в мобильных сетях.

<meta http-equiv="x-dns-prefetch-control" content="off">
<link rel="dns-prefetch" href="http://www.spreadfirefox.com/">

3. Ресурсы загрузки нескольких доменных имен

Количество одновременно загружаемых ресурсов браузера под одним доменным именем ограничено, например, IE6 и 7 — два, IE8 — шесть, а версии хрома разные, обычно 4-6. Если вы можете распространять статические ресурсы под несколькими доменными именами, вы можете скрытно обойти это ограничение браузера.

4. Уменьшите HTTP-запросы

Объединить js-файлы
Объединить css-файлы
Использование спрайтовых изображений (css sprite)
Используйте base64 для представления простых изображений

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

5. Уменьшите размер ресурса

6. Оптимизация изображения

Избавьтесь от избыточных ресурсов изображений
Используйте эффект CSS3 максимально возможным
обрезка изображения
Библиотека иконок веб-шрифтов
Сжатие изображения
Не масштабируйте изображение

7. js оптимизация запуска

Скачивайте только тот код, который нужен пользователю
Удалите неиспользуемый код.
Загружайте только те ресурсы, которые нужны видимой области (механизм ленивой загрузки изображений)
Отложить загрузку JS
Функция динамического импорта Webpack (отложенная загрузка конфигурации маршрутизации)
Минимизируйте импортированные зависимости

8. Ленивая загрузка

Ленивая загрузка — это метод задержки загрузки некритических ресурсов при загрузке страницы, и эти некритические ресурсы загружаются только при необходимости. Что касается изображений, «некритическое» обычно означает «за кадром». Процесс примерно такой: (Схему отложенной загрузки изображений можете посмотреть в моей статьеНаггетс.Талант/пост/697794…

Посетите страницу и начните прокручивать содержимое.
В какой-то момент вы прокручиваете изображение-заполнитель в окно просмотра.
Это изображение-заполнитель мгновенно заменяется окончательным изображением.

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

9. HTTP-кэширование

10. Автономное кэширование

Сервисные работники по сути действуют как прокси-сервер между веб-приложением и браузером, а также могут действовать как прокси-сервер между браузером и сетью, когда сеть доступна. Используя потоки Service Workers, можно перехватывать соединения, составлять и фильтровать ответы. Это очень мощный инструмент. Поэтому из соображений безопасности поддерживается только регистрация Service Workers на HTTPS-страницах.После регистрации сервис-воркеров их можно использовать для кэширования CSS, изображений, шрифтов, JS, шаблонов и других статических ресурсов:

self.addEventListener('install', function (event) {
    event.waitUntil(caches.open('mysite-static-v3').then(function (cache) {
        return cache.addAll([
            '/css/whatever-v3.css',
            '/css/imgs/sprites-v6.png', 
            '/css/fonts/whatever-v8.woff', 
            '/js/all-min-v4.js'
        ]);
    }));
});

11. Использование HTTP/2

Улучшения http2 по сравнению с http1 отражены в:

мультиплексирование
Бинарное кадрирование
сжатие заголовка
Пуш сервера

Загрузка сводки по оптимизации

Удалите ненужные ресурсы: сожмите все ресурсы, удалите неиспользуемый код и не вводите зависимости, если они не нужны.
Разделите код в соответствии с маршрутом: загрузите только те ресурсы, которые необходимы в данный момент, и используйте метод ленивой загрузки для других ресурсов.
Кэшированный код: упаковывает код в разные файлы в соответствии с частотой изменений, так что код загружается только при наличии изменений.
Отслеживание размера пакета: используйте инструменты (webpack-dashboard, webpack-bundle-analyzer), чтобы отслеживать изменения размера пакета и своевременно оптимизировать размер пакета.

Оптимизация рендеринга

Давайте сначала разберемся со всем процессом рендеринга страницы:

1. Оптимизируйте выполнение js

Для реализации эффектов анимации избегайте использования setTimeout или setInterval, вместо этого используйте requestAnimationFrame.
Переместите продолжительный JavaScript из основного потока в Web Worker.
Используйте микрозадачи для выполнения изменений DOM в нескольких кадрах.
Используйте временную шкалу Chrome DevTools и анализаторы JavaScript, чтобы оценить влияние JavaScript.

2. Уменьшите объем и сложность вычислений стилей.

Время, используемое для расчета стиля расчета элемента, состоит из двух частей: около 50% времени тратится на сопоставление с селектором, а другая половина времени тратится на построение RenderStyle (представление стиля расчета) из сопоставление правил, добавление и удаление элементов, изменение свойств, классов или изменение DOM с помощью анимации — все это заставляет браузер пересчитывать стили элементов и, во многих случаях, макетировать (т. е. автоматически перекомпоновывать) страницу или часть страницы, что известен как вычисление стилей вычислений. Таким образом, суть сокращения времени рендеринга CSS заключается в следующих двух моментах:

Уменьшите сложность селектора, используйте подход, ориентированный на классы, такой как БЭМ.
Уменьшите количество элементов, стили которых необходимо вычислить.

3. Устраните блокировку рендеринга JavaScript и CSS

CSS не блокирует синтаксический анализ DOM, но блокирует рендеринг DOM. Его необходимо загрузить в клиент как можно раньше и как можно быстрее, чтобы сократить время до первого рендеринга.
JS блокирует синтаксический анализ DOM, но браузер «заглядывает» в DOM и предварительно загружает соответствующие ресурсы.
Когда браузер встречает тег со сценарием и без атрибута отсрочки или асинхронности, он запускает отрисовку страницы, поэтому, если предыдущий ресурс CSS не был загружен, браузер будет ждать его загрузки перед выполнением сценария.

Другие оптимизации

1. Оптимизация вызовов API

Сокращайте поля и получайте только необходимые данные: указывайте возвращаемые поля при запросе
Сокращение количества запросов: Возврат после обработки дела на промежуточной станции; промежуточная станция обеспечивает возможность обработки запросов пакетами.
кешировать данные
Язык запросов API

2. Рендеринг SSR на стороне сервера — улучшите KPI домашней страницы

3. Рендеринг клиента CSR

4. Избегайте преждевременной и чрезмерной оптимизации

Не тратьте время на оптимизацию, которая вообще не имеет значения
Старайтесь писать код как можно проще, чтобы обеспечить удобочитаемость и повысить удобство сопровождения.