Автор оригинала: FreeCodeCamp Community Member.
Harnoor Bandesh
Вы когда-нибудь задумывались, почему страницы поиска Google или сайт Amazon нагрузятся очень быстро? Хорошо держитесь со мной, пока я беру тебя через концепцию, которая резко улучшает производительность страницы. Но во-первых, давайте пройдем несколько концепций, которые ведут к идее.
Анализируя критический путь рендеринга (CRP)
Прежде всего, давайте определим словарный запас, который мы будем использовать:
- Критический ресурс : Ресурс, который может заблокировать начальную рендеринг страницы
- Время на первый байт (TTFB) : Измеряет продолжительность от браузера, делающего HTTP-запрос на первый байт страницы, полученной браузером
Оптимизация производительности веб-характеристики – это все о том, что происходит в промежуточных шагах между приемными файлами HTML, CSS и JavaScript и требуемой обработки, чтобы превратить их в представленные пиксели – это критический путь рендеринга (CRP).
Перед отображением страниц браузер должен пройти все следующие шаги:
Когда браузер сначала ударяет страницу, он загружает файл HTML. Затем он начинает создавать дерево DOM (модель объекта документа). Каждый тег в HTML представляет собой узел внутри дерева DOM, который имеет всю информацию об этом. Давайте возьмем пример, чтобы понять это.
Предположим, что браузер получает следующий HTML с сервера:
Critical Path Hello web performance students!
Браузер преобразует его в объект дерева, называемого DOM AS:
Примечание : Процесс строительства DOM постепенно. Это основа идеи, для которой я пишу эту статью.
Пока браузер построил DOM, он столкнулся с ссылка Тег в голова Раздел ссылается на внешнюю таблицу стилей CSS.
Представив, что ему нужен этот ресурс для оказания страницы, он отправляет запрос на то же самое, что возвращается со следующим контентом:
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }Браузер затем создает CSSOM (объектная модель CSS):
CSSOM и DOM деревья объединены, чтобы сформировать дерево рендер. Затем дерево рендер используется для вычисления макета каждого видимого элемента.
Это как выглядит визуализация дерева:
Некоторые узлы не видны – такие как теги скрипта и мета-теги – и опущены, поскольку они не отражаются в визуализированном выходе. Некоторые узлы скрыты через CSS и также опущены из дерева рендера.
Сейчас с деревом Render на месте мы можем отправиться на шаг макета. Вывод процесса макета представляет собой «коробку модели», в которой точное положение и размер каждого элемента захвачены. Все относительные измерения преобразуются в абсолютные пиксели на экране.
Наконец, теперь, когда мы знаем, какие узлы видны, и их вычисленные стили и геометрии мы можем пройти эту информацию на заключительную стадию. Этот этап преобразует каждый узел в дереве визуализации на фактические пиксели на экране. Этот шаг часто называют «картиной».
Примечание : CSS представляет собой блокировку. Пока CSSOM не будет построен, браузер не может перейти к этапу рендеринга. Следовательно, нам нужно служить файлу CSS в браузер как можно скорее, поэтому мы сохраняем все ссылка Теги в голова раздел.
Теперь добавим JavaScript на наш пример:
Critical Path Hello web performance students!
По умолчанию выполнение JavaScript – это «блокировка парсера». Когда браузер сталкивается с Сценарий Тег в документе, он выполняет следующие шаги:
1. Пауза Дом Строительство
2. Загрузите файл
3. Передайте управление контрольным времени выполнения JavaScript
4. Пусть сценарий выполняется до прохождения домостроительной конструкции
Браузер не знает, что сценарий планирует делать на странице, поэтому предполагает худший сценарий и блокирует парсер.
Подожди!!! Это не самый худший случай, который может произойти во время разбора DOM. В последнем примере мы видим, что у нас есть оба CSS и JavaScript внешние файлы, которые необходимо загрузить браузер.
Теперь, предположим, что файлы CSS зарабатывают некоторое время для загрузки, а в то же время загружается файл JavaScript. Теперь, браузер предполагает, что в худшем случае JavaScript может запросить CCSOM, поэтому он не запускает анализ файла JavaScript, пока не будет загружен файл CSS, а CSSOM не готов!
Давайте посмотрим на диаграмму, которая может помочь нам получить лучшее понимание того, что я пытаюсь сказать:
CSS – это Демон Для любой веб-страницы! Он также представляет блокировку и блокировку анализа. Мы должны быть очень осторожны в обращении с этим.
Давайте посмотрим на несколько способов оптимизировать CRP.
Оптимизация CRP.
На данный момент мы знаем, что CSS может быть демоном. Получите его клиенту как можно скорее, чтобы оптимизировать время для первого визуализации. Что, если у нас есть некоторые стили CSS, которые используются только при определенных условиях? Например, когда страница печатается или проецируется на большой экран?
Было бы здорово, если бы нам не придется блокировать рендеринг на эти ресурсы. CSS «Типы носителей» и «Media queries» позволяют нам решать эти случаи использования:
А СМИ Запрос Состоит из типа носителя, который проверяет условия определенных средств массовой информации. Например, наша первая декларация Stylesheet не обеспечивает тип медиа или запроса, поэтому он применяется во всех случаях. То есть это всегда оказывает блокировку.
С другой стороны, вторая декларация таблицы стилей применяется только тогда, когда содержимое напечатано. Следовательно, эта декларация stylesheet не нужно блокировать рендеринг страницы, когда она сначала загружена.
Наконец, последний стилей будет выполнен браузером, если условие совпадает. Если состояние не совпадает, браузер не заблокирует рендеринг.
При объявлении ваших листовых активов в стиле обратите пристальное внимание к типу медиа и запросах. Они значительно влияют на критическую производительность пути рендеринга.
По умолчанию все JavaScript – блокировка анализатора. Сигнал для браузера, который скрипт не должен выполняться в точке, в котором он ссылается, позволяет браузеру продолжать построить DOM и позволяет сценарию выполнить, когда он будет готов. Например, после того, как файл извлечен из кэша или удаленного сервера.
Для достижения этого мы отмечаем наши Сценарий как async :
Добавление async ключевое слово для Сценарий Тег сообщает браузеру не блокировать конструкцию DOM, пока он ждет, чтобы скрипт стал доступен, который может значительно повысить производительность.
Еще одна точка плюс async атрибут это то, что Сценарий не заблокирован, ожидая CSSOM, чтобы подготовиться.
Аналитический скрипт – отличный пример для async атрибут как Сценарий не меняет дому никак. Есть еще один атрибут для Сценарий Теги, что это отложить Отказ Вы можете узнать о отложить посещение здесь Отказ
И, наконец, – вершина статьи прибывает, где я скажу вам главный секрет – кроме оптимизации, указанных выше – эта большие компании применяют и делают чудес …
Отправка HTML в кусочки с сервера
Посмотрите на следующие изображения и решайте: Каким образом вы хотите, чтобы ваши сайты оказать?
Получил ответ? Это первый, конечно! Никто не любит видеть пустую страницу так долго. Гораздо лучше сделать HTML в кусочках на веб-странице, которая является то, что делает страницы поиска Google, Amazon и другие большие гиганты.
Теперь, когда вы впервые попали в URL любого сайта, полный HTML страницы создается на сервере. До этого времени браузер сидит без простоя ничего не делать.
После того, как HTML построен на сервере, он передается в браузер. Затем браузер начинает создавать домо и проходит все шаги CRP, как упоминалось ранее.
Следующая диаграмма поможет нам получить эту вещь яснее:
Так почему же мы не оптимизируем время простоях браузера и сделаем его начать настроить DOM, отправив HTML-кусок, который готов к серверу? Другими словами, мы можем вымыть HTML в кусках, в тот момент, когда они готовы, вместо того, чтобы в ожидании всего HTML подготовиться. Это сделает браузер начать настроить дерево DOM/CSSOM вместо ожидания ожидания. Разве это не замечательная идея!
Я надеюсь, что следующая диаграмма может прояснить эту идею больше:
Страница разделена на HTML-куски на сервере. Теперь сервер, вместо того, чтобы ждать всего HTML, чтобы подготовиться, а затем служить его в браузере, отправит HTML Clunss в тот момент, когда они готовы на сервере. Это означает, что первые кусочки не будут ждать других двух, чтобы подготовиться – они будут поданы в браузере, в тот момент, когда они готовы на сервере.
Давайте возьмем пример, чтобы понять эту идею еще лучше. Ниже приведен страница поиска Google:
Теперь предположим, что мы ударим это URL, и браузер отправляет запрос на сервер для обслуживания этой страницы. Сервер начинает строить эту страницу и завершил HTML части A, но для части B, она должна извлечь данные из некоторого источника, который займет еще немного времени.
Теперь вместо того, чтобы ждать часть B, чтобы завершено, сервер вымывает заполненный HTML части A к браузеру, чтобы он начнут создавать домо.
Тем временем сервер готовит HTML части B с необходимыми данными. Таким образом, пользователь сможет постепенно видеть загрузку веб-страницы в браузере. Отправка HTML в кусочках также уменьшает время для первого байта и улучшает показатель производительности и скорости страницы страницы.
Это то, что Google на самом деле делает на своих страницах поиска! Даже Amazon сначала бросает свой заголовок, пока остальная часть страницы подготовлена на сервере.
Отправка HTML в кусочки также обслуживает еще одну цель оптимизации. Как ваш голова Метка сначала достигает клиента, браузер инициирует CSS и другие запросы в теге. Это помогает браузеру загружать другие критические ресурсы, а остальная часть HTML подготовлена сервером.
Типичное время для получения страницы с сервера составляет около 500 мс. Но типичное время для получения первого куска с сервера составляет около 20-30 мс. Вызов CSS, который должен быть инициирован после 500 мс, теперь будет инициирован после 20-30 мс, давая веб-странице повышения около 470-480 мс. Вы даже можете Прелога Тяжелые изображения в голова Тег, который будет использоваться HTML, который еще не придет с сервера, улучшая время загрузки страницы!
Теперь вопрос в том, как отправить HTML в кусочки на стороне сервера.
Ну, у нас разные пути на разных языках. У нас есть метод под названием Flush в Java, .NET и PHP. В Node.js нам нужно res.write () Всякий раз, когда наш HTML-кусок готов.
Примечание. Браузер не делает повторяющиеся вызовы на сервер, чтобы получить все куски. Все HTML-кусочки подаются за один звонок на сервер.
Мой POC.
Я сделал POC с Node.js, Express и реагирует, где компоненты реагирования отображаются на Node.js, и каждый компонент покраснется в браузер, как только его HTML. Вы можете найти исходный код здесь Отказ
Вы можете увидеть живую демонстрацию здесь Отказ
В демо вы можете увидеть ссылки. Перейти к странице без каблуки Ссылка возьмет вас на страницу, в которой концепция хворения не была применена. Перейти к странице с Chunking Ссылка отвечает вам на страницу, в которой была применена концепция хлокинга. Ниже приведены скриншоты страницы.
Страница разделена на 4 части. Момента, что часть A подготовлена на сервере, он покрасен в браузер, чтобы браузер мог начать создавать домо.
Часть B создается с использованием данных из API, которая займет некоторое время. До этого браузер создает HTML части A A в качестве конструкции DOM в инкрементном процессе.
В тот момент, когда HTML части B подготовлен на сервере, он подается в браузере. История продолжается для части C и часть D.
Но вот один улов: даже перед отправкой части A, я отправляю еще один кусок в браузер, который является голова Тег HTML. В голова Теги я предварительно загрузил все тяжелые изображения баннера в заголовке и нижнем колонтитуле и сделали предварительную связь и DNS-предпринимать все остальные изображения. Узнайте больше о Preload, Prefetch и Pre-Connect здесь Отказ
голова Тег также содержит ссылки на файл CSS. Теперь как часть A подготовлена на сервере, браузер отправляет запрос всех ресурсов в голова Раздел, чтобы страница была заселена быстрее, когда HTML поступает.
Тест производительности на обоих страницах был запущен с помощью расширения маяка в Chrome. И результаты действительно обнадеживают.
Тест был запущен в 10 раз как на страницах, так и в среднем все значения отображаются ниже:
Узнайте больше о Время для интерактивности , Индекс скорости , Первая значимая краска Отказ
Эта базовая реализация идеи может значительно улучшить производительность веб-страницы. Я надеюсь, что смог объяснить концепцию.
Если вы хотите внести свой вклад в идею, или если вы чувствуете что-то лучше, можно сделать в нем, посмотрите вперед, Fork Repo, создайте новую ветку и поднимите запрос на голову. Пожалуйста, найдите ниже шаги, чтобы включить приложение по локальному:
- Клон от здесь
- Установите узел в вашей системе
- Беги
NPM установитьВнутри папки, в которой вы клонировали код - Беги
NPM запустить devсделатьbundle.jsфайл - Завершить процесс и запустить
Начнем NPM - Приложение начнет работать на
8080порт
Пожалуйста, не стесняйтесь поделиться этой статьей с друзьями, если вы обнаружите это интересно.:)