Вы когда-нибудь задумывались, что происходит, когда вы нажимаете Enter после ввода URL-адреса в адресной строке браузера? 🤔

что-происходит-визуально-при-нажатии-войдите

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

Ты получил это

Давайте разберемся с этим один за другим —

  1. Вы вводите некоторые данные Вы заходите на свой любимый сайт

  2. Браузер анализирует ввод, чтобы проверить, является ли это URL-адресом или поисковым запросом.
    Для поискового запроса => перенаправляет в поисковую систему.

  3. Для URL это —
    Что делает браузер, когда он встречает URL
    💡 В ответе n/w мы видим огромные различия между размером ответа 14 КБ и 15 КБ, но не между 15 и 16 КБ. Знание того, какие все Kb более важны, чем другие, может дать вам большое преимущество. ТТФБ выгода. Подробнее здесь.

  4. Как только ответ получен, он —
    что делает браузер после получения ответа

  5. Как только процесс визуализации получает IPC и поток данных, он —

    • Начинает синтаксический анализ полученного HTML. Полученный HTML имеет формат байтов.
      HTML-разбор
    • ДОМ (структура данных, которую браузеры используют для преобразования html в веб-страницы) — она содержит все узлы HTML и их отношения.
    • Когда синтаксический анализатор сталкивается с загружаемыми ресурсами (такими как css, js, активы, такие как шрифты, изображения, видео), он отправляет запросы в сетевой поток в процессе браузера.
    • Сканер предварительной загрузки — это метод оптимизации браузера для ускорения этого процесса. Он достигает пика в токенах, сгенерированных синтаксическими анализаторами, и отправляет запросы в сетевой поток в процессе браузера.
    • CSS, JS — ресурсы блокировки рендеринга. Они останавливают синтаксический анализ HTML и блокируют отрисовку страницы, тем самым создавая дополнительные задержки и увеличивая время загрузки страницы.
    • 💡 Вот почему мы используем такие методы, как предварительная загрузка, предварительно соединяет, асинхронный, отложитьразделяя CSS на критические и некритические и откладывая некритические и т. д., где это возможно.
  6. После создания DOM основной поток анализирует CSS для создания CSSOM — структура данных аналогична DOM, но содержит вычисляемые стили для каждого узла в DOM.
    CSSOM

  7. Теперь браузер создает дерево доступности — AOM — семантическая версия DOM — для использования программами чтения с экрана и другими устройствами специальных возможностей.
    Доступность Объектная модель

  8. Теперь, чтобы отобразить страницу, браузеру необходимо знать точное положение узлов. Итак, он создает дерево рендеринга/макета, содержащее информацию о координатах узлов, которые должны отображаться на странице, с учетом всех разрывов строк, высоты и ширины элементов.
    Рендеринг дерева
    🤔 Зачем он нам нужен, если у нас есть dom и cssom?
    Потому что CSS могущественен 💪🏻 Он может скрывать элементы с веб-страницы, даже если они присутствуют в DOM. И наоборот, он может добавлять информацию (используя псевдоклассы), даже если их нет в DOM. Это может сделать элементы плавающими в одну сторону, маскировать элементы переполнения и изменить направление письма.

    • Последующий расчет этих позиций называется переплавкой.
    • 💡 Если для таких элементов, как изображение, мы можем предоставить размеры перед загрузкой, перекомпоновка может быть сохранена, улучшая ЦЛС.
  9. Затем он создает записи рисования — чтобы добавить z-индекс и определить порядок рисования.

  10. Теперь наступает этап, когда мы действительно видим что-то на экране — растеризация — преобразование изображений, созданных в настоящие пиксели, с помощью графических процессоров.
    Чтобы оптимизировать это, браузер создает слои страницы (на основе видео, холста, 3D-преобразования, свойство will-change css). Эти слои растрируются по отдельности, а затем объединяются в настоящую страницу.
    Растеризация и композиция

    • Первое появление этого знаменует собой ФКП.
    • Кроме того, весь период времени с момента начала поиска DNS до настоящего времени отмечает нашу ТТИ.
    • 💡 Когда мы сталкиваемся с дерганной прокруткой и анимацией, мы должны проверить перекомпоновку и перерисовку, она должна пропускать некоторые кадры.
  11. Теперь процесс рендеринга отправляет сообщение обратно процессу браузера, чтобы заменить счетчик значком перезагрузки. И все события загрузки запускаются.

Это сделано

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