предисловие
В последнее время я исследую, как оптимизировать время белого экрана первого экрана, который примерно разделен на сетевую часть и часть рендеринга js.Эта статья в основном предназначена для того, чтобы разобраться, что будет происходить от клиента к серверу, начиная с входной URL, и где можно оптимизировать.
Карта процесса
Процесс, который происходит после того, как браузер вводит URL
1. Введите URL-адрес
URL-адрес следует определенным правилам синтаксиса: схема://хост.домен:порт/путь/имя файла.
- схема: определяет тип (протокол) Интернет-сервисов, распространенными являются http, https, файл, ftp и т. д.
- host: определяет хост домена (обычно http по умолчанию www)
- домен: определяет имя домена в Интернете,Например, baidu.com
- post: номер порта (http обычно 80, https обычно 443)
2. Браузер сначала проверит кеш браузера — системный кеш — кеш маршрута, если есть кеш, он будет отображаться напрямую. Если нет, перейдите к шагу 3
3, браузер находит IP-адрес доменного имени (DNS, доменное имя и распределенная база данных карты IP)
Его можно условно разделить на несколько частей:
-
кеш браузера
Браузеры кэшируют записи DNS в течение определенного периода времени, и разные браузеры имеют разное время кэширования.
-
системный кеш
Если требуемая запись не найдена в кеше браузера, браузер выполнит системный вызов (gethostbyname в windows). Это позволит получить запись в системном кеше (хосте).
-
кеш маршрутизатора
Запрос запроса отправляется на маршрутизатор, который обычно имеет собственный кеш DNS.
-
DNS-кеш провайдера
ISP — это аббревиатура от Internet Service Provider (Интернет-провайдер).У ISP есть выделенный DNS-сервер для обработки запросов DNS-запросов.
-
корневой сервер (рекурсивный поиск)
Если DNS-сервер провайдера не может его найти, он отправит запрос на корневой сервер для выполнения рекурсивного запроса (DNS-сервер сначала запрашивает у корневого сервера доменных имен его IP-адрес, затем запрашивает сервер доменных имен .com, и так далее)
CDN (Content Delivery Network) использует технологию перенаправления DNS.DNS-сервер будет возвращать пользователю IP-адрес ближайшей к пользователю точки.Сервер узла CDN отвечает за ответ на запрос пользователя и предоставление необходимого контента.
Общее направление оптимизации DNS - уменьшить время разрешения DNS, то есть попытаться уменьшить ip запрос через механизм кеширования браузера для dns, то есть уменьшить количество доменных имен, которые необходимо разрешить
4. Браузер отправляет запрос HTTP (HTTPS) на веб-сервер.
-
Трехстороннее рукопожатие TCP
После того, как браузер получит IP-адрес, он инициирует запрос на установление TCP-соединения с целевым сервером.Существует три основных шага для установления соединения, которые обычно называют трехсторонним рукопожатием между клиентом и сервером. :
Первое рукопожатие: когда соединение установлено, клиент отправляет пакет синхронизации (syn=j) на сервер и переходит в состояние SYN_SENT, ожидая подтверждения от сервера;
Второе рукопожатие: когда сервер получает син-пакет, он должен подтвердить SYN клиента (ack=j+1), и в то же время он также отправляет SYN-пакет (syn=k), то есть SYN+ Пакет ACK В это время сервер переходит в состояние SYN_RECV;
Третье рукопожатие: клиент получает пакет SYN+ACK от сервера и отправляет серверу пакет подтверждения ACK (ack=k+1).После отправки пакета клиент и сервер устанавливают УСТАНОВЛЕННОЕ (TCP-соединение) выполнено успешно) состояние, которое завершается три раза пожать друг другу руки.
-
ПТС махнул четыре раза
Клиент или сервер могут инициировать волновое действие
Первое размахивание: активно выключается, установите FIL-1, SEQ, установленный на Z - значение ACK, передаваемое от последнего другого, и ACK установлен на X - значение SEQ +1. После установки вышеперечисленного данные отправляются на пассивную замыкающую сторону (здесь: b). Затем A входит в состояние FIN_WAIT_1.
Вторая волна: B получает сегмент FIN, отправленный A, и отвечает A. Для Ack устанавливается значение Seq в первой волне + 1, а для Seq устанавливается значение Ack в первой волне Y. Затем B переходит в состояние CLOSE_WAIT, а после того, как A получает ответ от B, он переходит в состояние FIN_WAIT_2.
Третья волна: B снова отправляет сообщение A, устанавливая FIN на 1, Ack на X и Seq на Y. Затем B переходит в состояние LAST_ACK, а после того, как A получает сообщение от B, он переходит в состояние TIME_WAIT.
Четвертая волна: A получает сегмент FIN, отправленный B, Ack устанавливается на Y, а Seq устанавливается на X. Затем A переходит в состояние TIME_WAIT, B переходит в состояние CLOSED после получения сообщения, а A переходит в состояние CLOSED после ожидания в течение 2MSL после отправки сообщения.
-
Асимметричное и симметричное шифрование HTTPS (http+ssl)
-
Асимметричное шифрование
Во время процесса рукопожатия сервер выдаст сертификат (с открытым ключом), и клиент шифрует короткий фрагмент данных S с открытым ключом и возвращает его на сервер. Сервер разблокирует его с закрытым ключом и получает S. На данном этапе шаг рукопожатия завершен, и S становится симметричным ключом шифрования, который надежно передается на другую сторону. После этого сервер и ответ требуют только для использования S в качестве ключа для выполнения симметричного шифрования один раз.
Сертификат содержит открытый ключ, поэтому получение сертификата означает получение открытого ключа другой стороны.
-
Симметричное шифрование
Согласованный ключ шифрования, запрошенные данные шифруются с помощью ключа, а сервер расшифровывает с помощью ключа
Полный https-запрос:
1. Клиент отправляет https-запрос на сервер (порт 443)
2, трехстороннее рукопожатие TCP для установления соединения TCP
2. Сервер возвращает сертификат безопасности (открытый ключ)
3. Клиент получает и проверяет его, если нет проблем, он шифрует случайное значение сертификатом безопасности (открытым ключом). и отправить на сервер
4. Сервер расшифровывает закрытый ключ и получает случайное значение
5. Последующая связь может осуществляться симметричным шифрованием через случайные значения.
-
-
HTTP поставляется с файлами cookie по умолчанию
В HTTP-запросе файл cookie включен по умолчанию, и им можно управлять, установив атрибуты HttpOnly и Secure файла cookie.переехать
-
Атрибуты, связанные с tcp, которые идут с заголовком запроса
-
Connection
Заголовок Connection (заголовок) определяет, будет ли закрыто сетевое соединение после завершения текущей транзакции. Если значение равно «keep-alive», сетевое соединение является постоянным и не будет закрыто, поэтому запросы к тому же серверу могут продолжать выполняться в соединении.
В http1.0 значение Connection по умолчанию равно close
В http1.1 значение Connection по умолчанию равно Keep-Alive.
-
-
Что браузеры делают спонтанно
Браузеры могут безопасно добавлять косые черты,Например, www.baidu.com ->www.baidu.com/ ,И www.baidu.com/222 ->www.baidu.com/222 не будет, потому что браузер…
оптимизировать:
- Замедление событий возврата данных путем развертывания cdn
- Оптимизируйте время рукопожатия
- Установите тип Accept-Encoding в заголовке, чтобы уменьшить объем данных, возвращая gzip
- Оптимизируйте производительность, настроив HTTP-кеш,пожалуйста, переместите
5. Постоянно перенаправлять ответ
Для оптимизации поисковых систем несколько доменных имен классифицируются,Например, baidu.com,www.baidu.com,www.baidu.com классифицированоВернуть 301, уведомить браузер о переходе, что хорошо для SEO.
6. Браузер отслеживает адрес перенаправления, а заголовок запроса остается неизменным
7. Сервер «обрабатывает» запрос
8. Сервер отправляет ответ в формате HTML
9. Браузер начинает отображать HTML
- Обработка HTML-разметки, построение DOM-дерева.
- Обработка разметки CSS, построение дерева CSSOM.
- Объедините дерево DOM и дерево CSSOM в дерево рендеринга (игнорируя DOM, который не нуждается в рендеринге).
- Компоновка основана на дереве рендеринга, и вычисляется геометрическая информация о каждом узле.
- Рисует отдельные узлы на экране.
- При столкновении с различными ресурсами посередине ресурсы будут загружены
Может быть проблема:
-
Скачать
-
css будет блокировать рендеринг при загрузке (за исключением атрибута media, который не будет блокировать синтаксический анализ браузера).
-
При встрече тега script построение DOM останавливается, а управление передается js до тех пор, пока скрипт (загрузка) не будет выполнен, в это время браузер загрузит другие ресурсы с оптимизацией, но не будет их парсить. Если есть операция над CSSOM в js, она также проследит за тем, чтобы CSSOM был скачан и собран.
-
Загрузка ресурса изображения не будет заблокирована.
-
-
Redraw reflow приводит к повторной генерации дерева рендеринга.
-
Перестановка (ОТМУТ)
Макет будет пересчитан, что обычно вызвано изменениями в структуре, добавлениями, удалениями, позициями и размерами элементов, например, после успешной загрузки img происходит замена img элементов на заполненной странице и изменение размера ; смещение, прокрутка, cilent, getComputedStyle и другая информация.
-
перерисовать
Простые изменения внешнего вида могут привести к перерисовке, например изменению цвета.
-
Reflow должен перерисовать.
-
оптимизация:
- dom
-
Упростите структуру DOM, уменьшите стоимость построения дерева DOM и дерева рендеринга, а также уменьшите количество элементов страницы.
Например, используйте разбиение данных таблицы списка на страницы и не используйте сложные сторонние компоненты для простых таблиц.
-
- js
-
Поместите тег сценария js в нижнюю часть тела страницы, чтобы уменьшить блокировку других процессов.
Отложенное выполнение: Используйте атрибут defer для скриптов внешней цепочки, которые не модифицируют страницу, чтобы скрипты загружались параллельно без блокировки, и они не выполнялись сразу после скачивания, а выполнялись после парсинга всех элементов.
Вот краткое введение в разницу между отсрочкой и асинхронностью:
Тот же пункт:
- Не блокировать отрисовку страницы при загрузке файлов
- Недействительно для встроенного скрипта (внутренний скрипт)
- Вы не можете вызвать документ. Написать скрипт метода использует эти два атрибута
- Существует обратный вызов события onload скрипта
разница:
- HTML-версия html4.0 определяет отсрочку, html5.0 определяет асинхронность.
- Каждый скрипт с асинхронным атрибутом выполняется сразу после его загрузки, что может нарушить первоначальный порядок
- Каждый сценарий атрибута отсрочки выполняется в исходном порядке после анализа страницы.
-
Сократите и объедините ненужные операции, связанные с DOM, такие как использование DocumentFragment, изменение имени класса вместо различных стилей и т. д., чтобы уменьшить число срабатываний перерисовки и перестановки.
-
- css
- Поместите css в голову, загрузите его заранее и предотвратите мерцание страницы, рекомбинируя css после рендеринга html.
- Уменьшите уровни CSS и сложность селектора CSS, улучшите скорость синтаксического анализа, хотя в браузерах есть оптимизации.
- Используйте более эффективные стили CSS, такие как flex, вместо float.
- Включите составные слои, такие как использование 3d-преобразований, непрозрачности и т. д., чтобы элемент и его дочерние элементы не вызывали внешних перестановок, а также имели ямки.
- Разумное использование стилей вне потока документа для уменьшения влияния внешнего переформатирования, например абсолютного.
- количество файлов
-
Уменьшите размер файла для первой загрузки.
Использование отложенной загрузки изображений, загрузка js-запроса и т. д. для хранения с использованием хранилища js, кеша файлов css (PWA).
-
Разделите ресурсы страницы, сначала загрузите данные в верхней части страницы и т. д.
Динамическая маршрутизация, отложенная загрузка
-
10. Браузер отправляет и получает статические ресурсы, встроенные в HTML 11. Браузер отправляет асинхронный (AJAX) запрос
Краткое введение в преимущества и недостатки выборки по сравнению с ajax
- преимущество
- Встроенные промисы, связанные вызовы, вы также можете использовать асинхронное ожидание, чтобы решить ад обратного вызова.
- res предоставляет множество методов для преобразования форматов, json(), blob()
- недостаток
- Нет куки по умолчанию, с кукой нужно указать учетные данные = включить
- Требуется низкоуровневая поддержка или используйте сторонний пакет совместимости.
- Невозможно выполнить обработку тайм-аута, нет метода прерывания
- При обнаружении распространенных кодов ошибок сообщение об ошибке не передается, и его необходимо упаковать вручную.
наконец
Порекомендуйте свой личный публичный аккаунт: Front-end Intensive Reading (хорошая фронтенд-статья регулярно публикуется каждый день)