Большая сводка производительности внешнего интерфейса

Производительность на стороне узла

оценка эффективности

Оценивается инструментами тестирования производительности:
- wrk: Поддерживает сценарии lua, которые могут легко справиться с различными потребностями тестирования, такими как
```
-- 带随机参数请求
function request()
    wrk.headers["Connection"] = "keep-Alive"
    arg = math.random(1, 500)
    path = "/random?arg=" .. arg
    return wrk.format("GET", path)
end
```
- Apache ab
- WebBench
Просмотр данных процесса выполнения программы через профилирование v8,Используется совместно с Webstorm, вы можете настроить его в Webstorm [Конфигурации запуска/отладки], обратите внимание, что вам нужно сначала установить его:v8-profiler

Общие решения по оптимизации

Параллельные запросы, например: promise.all одновременные трехсторонние вызовы HTTP-интерфейса, вызовы RPC
Если вы используете mysql
- Используйте пул соединений с базой данных для повторного использования соединений
- Индексирование общих запросов
- Программно избегайте запросов на объединение
- разделение чтения-записи
Добавить стратегию кэширования

Фронтальная производительность

DNS-запрос

Уменьшить количество DNS-запросов

TCP/HTTP

Оптимизировать ядро

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

Конкретные шаги

Сокращение HTTP-запросов: для HTTP1.0/1.1 уменьшите количество запрашиваемых ресурсов (упаковка, сжатие, слияние и т. д.).
Используйте CDN
Добавьте заголовок Expires и настройте тег ETag
GZip-ресурсы
Избегайте перенаправления HTTP
Постоянное соединение: избегайте трехстороннего рукопожатия TCP, HTTP1.1 включен по умолчанию, HTTP1.0 может использовать: Соединение: Keep-Alive
HTTP1 не поддерживает мультиплексирование и может открывать несколько сеансов TCP (обычно 6) параллельно для хоста.
Удалите ненужные байты запроса (запрос HTTP1, заголовки ответов не сжимаются)
Встроенные ресурсы, такие как: встроенные ресурсы Base64 (для небольших ресурсов статического изображения)

рендеринг на стороне клиента

Критический путь рендеринга: DOM -> CSSDOM/JS -> RenderTree -> Layout -> Paint

процесс рендеринга в браузере

Создайте DOM

Процесс строительства: персонаж -> Токен -> Узел -> Дом
инкрементная сборка

Создание CSSOM (объектная модель CSS)

Процесс построения: персонаж, токен, узел, CSSOM
Чем сложнее селектор, тем больше времени требуется для сопоставления

Построить рендердерево

RenderTree содержит всю информацию об узле, которая должна быть отображена на странице.
Элементы с display: none не будут добавлены в RenderTree, потому что их не нужно рендерить, элементы с visible: hidden будут добавлены в RenderTree

Layout

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

Paint

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

Оптимизация ресурсов

Оптимизация производительности CSS (предотвратить блокировку ресурсов при первоначальном рендеринге)

медиа-запрос (добавить медиа к ссылке)
- В этот момент таблица стилей все еще будет загружена и не будет блокировать рендеринг, если среда браузера не соответствует условиям медиа-запроса.
- Разделяйте файлы CSS для разных сред мультимедиа, чтобы избежать блокировки первоначального рендеринга и загрузки некритических ресурсов CSS.
Добавление ссылок с помощью DOM API не блокирует первоначальный рендеринг

var style = document.createElement('lin');
style.rel = 'stylesheet';
style.href = 'index.css';
document.head.appendChild(style);

предварительная загрузка, предварительная выборка и предварительная визуализация (не только для CSS)
- rel="preload", а не таблица стилей не будет блокировать рендеринг
- Предварительная загрузка — это функция, определенная в спецификации подсказки ресурса.Подсказка ресурса сообщает браузеру, что нужно установить соединение или загрузить ресурсы заранее, чтобы повысить скорость загрузки ресурсов:
  - предварительная загрузка: https://www.w3.org/TR/preload/
  - предварительная выборка и предварительная обработка: https://w3c.github.io/resource-hints/#prefetch
- Когда браузер встречает ссылку, помеченную как предварительная загрузка, он начинает ее загружать.
- Когда происходит событие загрузки, измените rel на таблицу стилей, чтобы применить этот стиль.
- Вы можете использовать предварительную загрузку (CSS preload polyfill) через loadCSS.js: принцип на самом деле заключается в использовании DOM API.

<link rel="preload" type="text/css" href="./style.css" as="style" onload="this.rel='stylesheet'"/>

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

JS блокирует HTML Parse (парсер HTML, инкрементный) и, таким образом, блокирует рендеринг тегов HTML, которые появляются после скриптов.
Причина: JS может модифицировать поток HTML-документа через document.write, поэтому при выполнении JS браузер будет приостанавливать работу по парсингу DOM
CSS блокирует JS
Стратегия загрузки ресурсов браузера (предварительная загрузка, которая отличается от предыдущей предварительной загрузки CSS, см.: https://juejin.cn/post/6844903545016156174)
- Когда синтаксический анализатор HTML заблокирован сценарием, хотя синтаксический анализатор прекратит построение DOM, он все равно распознает ресурсы, стоящие за сценарием, и загрузит их заранее.
Оптимизация производительности (для предотвращения блокировки)
- Поместите ресурс в нижней части тела
- Используйте отсрочку, чтобы отложить выполнение скрипта: с отсрочкой скрипт будет отложен до тех пор, пока весь HTML-документ не будет проанализирован перед началом выполнения. Скрипт отсрочки будет выполняться в строгом соответствии с порядком, в котором он появляется в HTML-документе. Используя метод defer, ресурсы скрипта могут быть загружены раньше.
- Используйте async для асинхронной загрузки скрипта: скрипт не будет блокировать синтаксический анализатор HTML и не будет заблокирован CSS, и он начнет выполняться при загрузке скрипта. async подходит для независимых ресурсов без зависимостей (таких как код статистики Baidu)

картина

Асинхронная загрузка с большим двоичным объектом
использоватьimg-2Вместо тега img (принцип тот же, что и выше) легко увеличить скорость доступа более чем в пять раз для сайтов с большим количеством картинок

шрифт

Чтобы избежать FOUT (Flash Of Unstyled Text), браузер попытается дождаться завершения загрузки шрифта, прежде чем отображать содержимое с примененным шрифтом. Вызывает FOIT (проблема Flash Of Invisible Text), что приводит к пустому пространству.
Установить несколько шрифтов, метод понижения: использовать шрифт по умолчанию
Загружать файлы шрифтов асинхронно: загружая CSS асинхронно, вы можете избежать блокировки рендеринга шрифта, иначе он будет пустым.

разное

По запросу/ленивая загрузка
Для стека React рекомендуется использоватьnext.js prefetch

Оптимизация критического пути рендеринга

оптимизировать цель

количество критических ресурсов
критический объем ресурсов
Количество сетевых циклов для ключевых ресурсов

Не встраивайте ресурсы вслепую

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

Встраивание и кэширование в сочетании

При первом посещении используйте встроенные ресурсы и асинхронно запрашивайте кешированные ресурсы (например, rel="prefetch"). Кэш успешно передает тег файла cookie. При следующем посещении возвращается только тег внешнего ресурса.

разное

Пополнить

TTFB (время до первого байта):

Время, которое требуется от клиента, делающего запрос, до получения первого байта ответа (Transfer-Encoding: chunked)

Основной дизайн HTTP2.0:

Устранить «блокировку начала очереди» в HTTP;
Двоичный механизм кадрирования устраняет необходимость устанавливать несколько TCP-соединений, тем самым улучшая использование TCP.
Сохраняйте семантику HTTP 1.1

Блокировка начальника линии:

Блокировка заголовка строки приложения HTTP: отправка запросов в соответствии с приоритетом
Блокировка заголовков на транспортном уровне TCP: TCP требует, чтобы пакеты доставлялись в строгом порядке.

Оптимизация производительности React Time Slicing (с приостановкой):

речь Дэна
Time Slicing & Suspence Информация на китайском языке

Производительность на стороне узла

оценка эффективности

Общие решения по оптимизации

Фронтальная производительность

DNS-запрос

TCP/HTTP

Оптимизировать ядро

Конкретные шаги

рендеринг на стороне клиента

процесс рендеринга в браузере

Создайте DOM

Создание CSSOM (объектная модель CSS)

Построить рендердерево

Layout

Paint

Оптимизация ресурсов

Оптимизация производительности CSS (предотвратить блокировку ресурсов при первоначальном рендеринге)

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

картина

шрифт

разное

Оптимизация критического пути рендеринга

оптимизировать цель

Не встраивайте ресурсы вслепую

Встраивание и кэширование в сочетании

разное

Общий инструмент

инструмент для тестирования производительности

Релевантная информация

Пополнить

TTFB (время до первого байта):

Основной дизайн HTTP2.0:

Блокировка начальника линии:

Оптимизация производительности React Time Slicing (с приостановкой):