Эта статья в основном знакомит с процессом посещения веб-сайта, процессом рендеринга страницы, включая используемые концепции. И как мы оптимизируем страницу переднего плана, чтобы она посещалась быстрее. (критический путь рендеринга лучший путь рендеринга)
- Откройте браузер и введите URL
- разрешение DNS
- Завершите рукопожатие TCP
- отправить HTTP-запрос
- Получить результаты HTTP-ответа
- Браузерный парсинг HTML, CSS
- Создайте объектную модель, дерево DOM и дерево CSSOM, чтобы сформировать дерево рендеринга.
- Браузер отображает страницу (макет)
HTTP1.x и HTTP2
В HTTP/1.x, если клиент хочет сделать несколько одновременных запросов для повышения производительности, он должен использовать несколько соединений TCP. Это прямой результат модели доставки HTTP/1.x, которая гарантирует, что каждое соединение доставляет только один ответ за раз (очередь ответов). Что еще хуже, эта модель также вызывает блокировку заголовка строки, что, в свою очередь, делает базовое TCP-соединение неэффективным. То есть в соответствии с текущим протоколом HTTP1.X количество одновременных запросов ресурсов браузером ограничено. Когда появится HTTP2, он будет оптимизирован через уровень двоичного кадрирования. Новый уровень двоичного кадрирования в HTTP/2 снимает эти ограничения и обеспечивает полное мультиплексирование запросов и ответов: клиенты и серверы могут разбивать HTTP-сообщения на независимые кадры, которые затем чередуются и отправляются на другом конце. Соедините их вместе.
Преимущество:
- Несколько запросов отправляются параллельно и чередуются, не влияя друг на друга.
- Несколько ответов отправляются параллельно и чередуются, не мешая друг другу.
- Отправляйте несколько запросов и ответов параллельно, используя одно соединение.
Но это не те части, которые мы можем оптимизировать.
В зависимости от текущих условий в сети мы можем использовать несколько адресов CDN для улучшения и оптимизации параллелизма различных источников. В этой статье в основном представлена та часть, которую мы можем оптимизировать с шестого шага, то есть парсинг HTML и CSS.
Как браузеры строят объектные модели?
- байт → символ → токен → узел → объектная модель.
- И теги HTML, и теги CSS проходят описанный выше процесс, HTML становится DOM, CSS становится CSSOM.
визуализировать построение дерева, компоновку и рисование
хорошо построенныйrender treeПосле этого он будет отфильтрованdisplay:noneЭтот узел без рендеринга. БудуtreeРендеринг на страницу.
Стоит отметить, что каждое изменение DOM или макета вызываетreflow(回流/重排), будет потреблять много ресурсов страницы.
reflowЗапускается из-за изменений в dom или макете, таких как изменение положения dom, ширины и высоты, полей, отступов и т. д.repaintЭто модификация стиля, которая срабатывает, когда не влияет на макет, например, изменение цвета и т. д.
Улучшите скорость рендеринга веб-страниц, в основном для уменьшенияDOM, CSSOMпроцесс, слияниеrender tree, и уменьшитьreflowколичество раз
Оптимизация страницы внешнего интерфейса, способы уменьшения рефлоуЗдесь вы можете увидеть, как уменьшить количество перекомпоновок
Оптимизация CSS
Согласно приведенному выше содержанию, мы знаем, что если вы хотите отобразить страницу, у вас должен бытьrender tree,а такжеrender treeКDOM treeтак же какCSSOM treeсостоит из.
- По умолчанию CSS блокирует отрисовку страницы.
- мы проходим
@mediaи т. д., CSS может быть помечен как неблокирующий - Браузеры будут загружать ресурсы CSS клиенту независимо от блокировки рендеринга или нет.
Таким образом, чтобы страница отображалась быстрее, мы должны как можно скорее загрузить ресурсы CSS в наш клиент. *и использовать@mediaоптимизировать
Для лучшей производительности вы можете использовать некоторые встроенные css, чтобы они не переходили в CDN для ресурсов, вызывая多次往返
Оптимизация для JS
Когда синтаксический анализатор HTML встречает тег script, он приостанавливает построение DOM и передает управление движку JavaScript; когда движок JavaScript завершает работу, браузер возобновляет построение DOM с того места, где он остановился.
Вот почему нам нужноscriptтеги размещаются внизу страницы.
/React APP обычно используется таким образом. Поскольку React должен отобразить все приложение в узле DOM, если он будет помещен в DOM, это приведет к тому, что React не найдет отображаемый узел и сообщит об ошибке/
и мы вообще не рекомендуемrender treeКогда он был только создан, JS использовался для манипулирования DOM, что приводило к перекомпоновке, то есть я надеюсь, что JS не станетrender treeчасть. В это время мы будем<script>Поместите его в нижнюю часть страницы, чтобы не блокировать рендеринг страницы.
если ваш<script>Если ресурс получен из CDN, процесс ожидания также вызовет определенную блокировку.
ты можешь поставить<script>плюсasync, чтобы он загружался асинхронно.
Для лучшей производительности рекомендуется удалитькритический путь рендерингалюбой ненужный JavaScript в
/критический путь рендерингаЭто означает, что содержимое, связанное с текущей операцией пользователя, отображается преимущественно. /
Статьи по Теме:
Полный веб-запрос и процесс рендеринга, а также способы оптимизации веб-страниц
Базовые знания о внешнем интерфейсе Что такое Node?
Оптимизация страницы внешнего интерфейса, способы уменьшения рефлоу