Silelle Sehl.

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

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

Отказ от ответственности : Вся информация, которую я разделяю в этом посте, это то, что я узнал через бесплатные курсы, упомянутые на дне и суммирован Вот для тех, кто заинтересован.

Критический путь рендеринга

Прежде всего, было бы полезно понять шаги, которые фактически проходит браузер. Он начинается с простого HTML, CSS, и файлов JavaScript проходит через рендеринг и покрасить страницу, и поступает в конце, чтобы стать то, что видит пользователь.

Эти шаги из ваших различных файлов HTML, CSS и JS на окрашенной странице обычно называются критически важным путем (или CRP).

Критический путь рендеринга состоит из пяти разных этапов, которые лучше всего объяснены в графике.

Наращивание дома и CSSOM

Большинство веб-страниц состоят из HTML, CSS и JavaScript, которые имеют критическую часть в CRP. Для того, чтобы прочитать и обработать HTML, браузер построит модель объекта документа (DOM). Браузер смотрит на теги HTML (

,

,

и

etc) в вашей разметке и преобразует их в токены, которые в свою очередь, создаются в узлы параллельно. При обработке этих токенов starttag и tokes endtag в порядке, и увидев, что на первом месте, браузер может установить свою иерархию и устанавливать родителей и детей.

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

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

Таким образом, DOM представляет нашу полную HTML-разметку. Как вы видели, он постепенно застроен путем обработки токенов и преобразовав их на узлы. Фактически, мы можем использовать это в наше преимущество, вернув частичный HTML и предоставление нашего пользователя индикации, что что-то происходит и рендеринг на странице.

После конструирования DOM ваш браузер будет обработать CSS и создает модель объекта CSS (CSSOM). Этот процесс очень похож на строительство дома. Но в этом процессе, в отличие от ранее, дочерние узлы наследуют свои родительские правила укладки узлов – отсюда и название каскадных листов стилей (CSS).

К сожалению, мы не можем постепенно постепенно обрабатывать частичные CSS, подобные мы могли с домом, так как можно легко привести к применению неправильных стилей, если в процессе позже приходит переопределенный стиль. Это причина, по которой CSS представляет собой блокировку, поскольку браузер должен прекратить рендеринг, пока не получает и обрабатывает все CSS.

Наше дерево DOM и CSSOM будут содержать все узлы и зависимости, которые у нас есть на нашей странице.

Собрание всего видимого контента – дерево визуализации

Браузер должен знать, какие узлы на самом деле визуально представляют на странице. Дерево Render достигает именно то, что и является представлением Видимый Содержание Дома и CSSOM.

Мы начинаем строить дерево рендер, идентифицируя корневой узел, а затем копирование всех Видимый Информация от DOM и CSSOM. Для этого мы также проверяем, что мы ищем теги, которые имеют тот же селектор. Мета данных, ссылки, и так далее не скопирован в дерево визуализации. То же самое относится и для CSS, содержащих «дисплей: нет;» Как это также не видимый предмет.

Как только мы завершим этот процесс, мы получаем что-то похожее на ниже (обратите внимание, как «веб-производительность» не копируется).

Дерево Render – это довольно точное описание того, что на самом деле отображается вам на экране, захватывая как содержание, так и связанные стили. Конечно, это будет выглядеть намного сложнее в реальных образцах.

Заставить его подходить правильно – Макет

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

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

Покрасить пиксели

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

Давайте суммируемся

Теперь давайте снова поставим всю эту информацию вместе, чтобы мы могли видеть, что мы схватили все шаги, которые мы должны пройти через критический путь рендеринга (CRP).

1. Браузер запускается, построив DOM путем анализа всех соответствующих HTML.
2. Затем он продолжает посмотреть на ресурсы CSS и JavaScript и запрашивает их, что происходит обычно в голове, где мы обычно поставляем наши внешние ссылки.
3. Затем браузер анализирует CSS и создает CSSOM, а затем запустить JavaScript.
4. Тогда DOM и CSSOM объединяются в дерево рендера.
5. Затем мы запускаем макет и мастер рисования, чтобы представить страницу пользователя.

Хорошо, это приятно знать – но почему это имеет значение?

Теперь это все аккуратно знать, и мы получили лучшее понимание того, что браузер на самом деле делает на заднем плане. Но почему именно это имеет значение? Всем нам нужно знать, что происходит под капотом?

Да!

Если мы продолжим увеличение размера наших файлов и не обращайте внимания на то, что мы просим браузеру оказать и покрасить страницу, браузер понадобится дольше для обработки всех ресурсов. Это обычно приводит к более медленным и менее приятным опыте пользователей, что означает, что страницы не будут полезны и оказаны правильно, что приводит к разочарованию на стороне пользователя.

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

Но, к счастью, вокруг этого есть несколько способов, и мы можем сделать наши страницы быстрее!

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

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

Когда мы говорим о стратегиях оптимизации, мы примерно у нас примерно три техники в нашем распоряжении.

Министерство, сжатие и кэширование

Эти методы все могут быть применены к нашему HTML, CSS и JS. Затем, через их меньший размер, они уменьшат объем данных, которые мы отправляем взад-вперед между клиентом и сервером. Меньшее количество байтов, которые мы должны отправлять, тем быстрее браузер получит данные и запускает обработку и отображение страницы.

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

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

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

Минимизируйте использование ресурсов блокировки парсеров (JS Parser Document Parser)

Мы также можем отложить выполнение нашего JavaScript и использовать асинхронные атрибуты в нашем сценарии для достижения этого. Это означает, что остальная часть страницы может обрабатывать, а тем временем пользователь видит указание, что что-то происходит на странице. Это также означает, что нам не нужно ждать загрузки JavaScript.

Так широко говоря, что оставляет нас с 3 узорами оптимизации:

1. Минимизировать количество байтов Вы посылаете
2. Уменьшить количество критических ресурсов в критическом пути рендеринга (аналитика может не быть загружена в самом начале, когда страница создана)
3. Укорочение критической длины пути рендеринга (означающее уменьшение количества круглых игр между вашим браузером и сервером, который нам нужно сделать страницу)

Попробуй сам

Если вы хотите дать эту попытку и начать оптимизировать, вы можете измерить производительность вашего сайта или других с помощью ряд инструментов. Самые простые, вероятно, продукты Google, такие как Pagespeedinsights или Google Lighthouse Удобное маленькое расширение Google Chrome вы можете легко установить через App Store Chrome.

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

Затем вы можете сравнить свою производительность против ряда метрик, таких как первый пиксель, окрашенный на экран, первую интерактивную, визуальную полноту вашего сайта и многие другие.

Ваши любимые инструменты DEV браузера также имеют отличное место, чтобы посмотреть с точки зрения выяснения времени нагрузки и узких мест. Обеспечение общего времени загрузки Низкое, определенно увеличит общую скорость, на которой ваш сайт обслуживается вашим конечным пользователям.

Заключение

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

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

Ресурсы

Большинство из моих знаний, которые я поделился здесь, я приобрел следующее:

1. Оптимизация производительности сайта на Udacity.
2. Почему производительность имеет значение на Разработчики Google
3. Высокопроизводительные браузерные сети Илья Григорик ( https://hpbn.co/ )
4. Высокопроизводительные веб-сайты: существенные знания для интерфейсных инженеров Стив Саудерс

Оригинал: “https://www.freecodecamp.org/news/an-introduction-to-web-performance-and-the-critical-rendering-path-ce1fb5029494/”