Как тестировать вёрстку
Браузеры на разных движках могут поддерживать или не поддерживать определённые HTML-элементы, по-своему рендерят стили и интерпретируют поведение JavaScript. Поэтому и сайты в них отображаются по-разному. Например, у Chrome, Firefox и Safari отличается рендеринг шрифтов и стили по умолчанию.
Отличий много, но добиваться полного сходства необязательно. Главное — проверить, что сайт во всех браузерах работает корректно и соответствует макету.
В каких браузерах тестировать вёрстку
Всё зависит от проекта, над которым вы работаете. Обычно список платформ указывает заказчик в техническом задании. Если в вашем ТЗ этой информации нет, нужно её уточнить, например, через менеджера проекта. Это важно, потому что пользователи разных сайтов заходят в интернет с определённых устройств и браузеров. И до сих пор некоторым организациям нужно, чтобы сайт хорошо отображался в IE, хотя этот браузер больше не поддерживается.
Разработка сайта под IE11 занимает больше времени и стоит дороже, поэтому чаще заказчик отказывается от поддержки IE.
Если конкретных требований нет, тестируйте вёрстку в самых популярных браузерах: Chrome, Firefox, Edge, Safari, Яндекс Браузере и Opera, а также их мобильных версиях для iOS и Android.
Лучший способ проверки — установить браузеры на свой компьютер и тестировать сайт в каждом из них. Так вы увидите, как страница на самом деле отображается в конкретном браузере и сможете проверить, как работают скрипты или плагины.
Топ браузеров для тестирования сайтов
Самые популярные мобильные браузеры
Самые популярные десктопные браузеры
Это статистика Similarweb по России. На других ресурсах, например, StatCounter или W3Counter, топ будет немного отличаться, потому что сервисы используют различные методы сбора данных. Также статистика меняется со временем, поэтому перед тестированием проверяйте, какие браузеры сейчас актуальны.
�� Или можете использовать наш подход. Разработчики «Акселератора» проверяют сайты минимум в двух последних версиях:
- Chrome для проверки на macOS, Windows и Android.
- Safari на macOS и iOS.
- Firefox на macOS и Windows.
Это базовое покрытие для проектов «Акселератора». Если в проекте указаны дополнительные браузеры, сайты проверяются и в них.
Как тестировать вёрстку, если нет устройства Apple
Чтобы протестировать вёрстку в Safari, используйте онлайн-эмуляторы, например, browserstack или appetize. Они помогают проверить страницу в популярных браузерах и на различных устройствах без установки дополнительных программ.
Для работы создайте аккаунт, выберите среду для тестирования, загрузите код и запустите проверку. На browserstack можно протестировать сайт, который уже опубликован.
Оба сервиса платные, но у appetize есть бесплатный план с ограниченными функциями. У вас будет меньше времени на тест, не такой детализированный отчёт и неполный список устройств. У эмулятора browserstack есть бесплатная пробная версия. Вам даётся минута, чтобы проверить вёрстку в каждом доступном браузере и устройстве.
Обязательно тестируйте вёрстку в нескольких браузерах, даже если кажется, что сайт выглядит безупречно, и у вас подключён normalize.
Не забывайте и о других проверках. Смотрите, как вёрстка отображается на другой операционной системе, тестируйте сайт на популярных устройствах — эмуляторы и в этом вам помогут. А ещё проверяйте скрипты, чтобы сайт не только хорошо выглядел, но и корректно работал.
Материалы по теме
- Как тестировать сайты
- Как оптимизировать сайты с помощью Lighthouse
- Как работать с Chrome DevTools
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Как работают браузеры?
Основное предназначение браузера — отображение запрашиваемых ресурсов. Расположение ресурса определяется с помощью URI (унифицированого идентификатора ресурса). Рассмотрим основные компоненты браузера:
- User Interface (Пользовательский интерфейс)— адресная строка, кнопки «Вперед»/»Назад» и остальные элементы, через которые пользователь может взаимодействовать с браузером.
- Browser Engine (Механизм браузера) — управляет взаимодействием User Interface и Rendering Engine
- Rendering Engine (Модуль отображения) — выполняет синтаксический анализ кода запрашиваемого ресурса и выводит содержимое на экран. По умолчанию он отображает HTML, XML документы и картинки, для отображения других файлов, например pdf, используются специальные модули. В Chrome и Safari модулем отображения является Webkit, а в Firefox — Gecko. Подробней о работе Rendering Engine рассмотрим далее.
- Networking (Сетевые компоненты) — выполнение сетевых вызовов (HTTP запросы)
- UI Backend — отрисовка основных виджетов — окна, поля со списками.
- Интерпретатор JS — синтаксический анализ и выполнение JS
- Data Persistence (Хранилище данных) — браузер хранит данные в формате «ключ: значение» на жестком диске для различных сайтов (cookie, sessionStorage).
Что же происходит когда мы ищем нужный ресурс в браузере?
Когда пользователь вводит данные в адресной строке, браузер, получив строку к примеру «searchpage.com.ua», должен узнать IP-адрес. User Interface после ввода url передает управление элементу Browser Engine. Для того, что бы сделать запрос по указанному в адресной строке url, браузеру нужно узнать адрес IP сервера.
Компьютеры в сети интернет имеют доменное имя (например, site.com) и IP-адрес (например, 127.0.0.1). Основной задачей DNS сервера является трансляция доменных имен в IP-адреса и обратно. DNS имеет иерархическую структуру имен, где есть корень дерева («.»), далее расположены домены первого уровня (com, net, org и т.д.) и домены государств (ua, ru и т.д.), далее домены второго, третьего уровня… Когда клиент посылает запрос этому серверу, сервер или отвечает на запрос (если знает ответ) или пересылает запрос вышестоящему серверу, а когда ответ найден он опускается низ по цепочке серверов к источнику запроса. Процесс получения IP адреса называется DNS lookup.
Для того, что бы узнать IP-адрес ресурса «searchpage.com.ua» начинается поиск с локального кеша DNS и с локальных хостов (файл /etc/hosts), если там запись не найдена — локальная система обращается к интернет провайдеру, который тоже имеет свой кеш DNS, если и там не найден — запрос идет дальше по цепочке серверов.
В нашем примере для сайта «searchpage.com.ua» запросы будут идти приблизительно так: . (корневой DNS) -> ua (DNS зоны “ua”) -> com (DNS зоны “com”)-> searchpage.
Далее Browser Engine смотрит, нет ли в ее кеше данных соответвующих ресурсу по искомому IP-адресу, если такого закешированого ресурса не найдено — передается управление Rendering Engine, который, при помощи компонента Network, посылает GET запросы за ресурсом HTML на указанный IP. Браузер получает запрашиваемый HTML файл с указанными заголовками, если присутствуют заголовки для кеширования — он сохранит их в свой локальный кеш. Далее браузер начинает парсинг полученного ресурса при помощи Rendering Engine.
Модуль отображения (Rendering Engine)
Rendering Engine получает содержимое запрашиваемого документа обычно фрагментами по 8 КБ.
Сначала он проводит синтаксический анализ и парсинг HTML документа и приводит параметры в узлы для построения DOM дерева (Дерева содержания). СSS документы тоже обрабатываются и служат для построения CSSOM дерева, а так же там собирается вся информация о стилях, найдена в других источниках, например, inline стили в html. После DOM дерево и CSSOM дерево объединяются в одно, этот процесс называется Attachment, для создания Render Tree. Дерево отображения (Render Tree) состоит из объектов отображения (Render Objects). В нем элементы отображения располагаются в том порядке в котором их необходимо вывести на экран.
Из полученного Render Tree происходит компоновка (layout), в процессе которой каждому узлу дерева отображения присваиваются координаты места, где он должен появится. Затем с помощью UI Backend происходит отрисовка элементов.
Ниже представлена схема работы модуля отображения WebKit:
Синтаксический анализ HTML
Синтаксический анализ — это преобразование документа в пригодную для чтения структуру. Результатом синтаксического анализа является дерево узлов, представляющее структуру документа — Синтаксическое дерево. В случае анализа HTML документа — в результате синтаксического анализа мы получим синтаксическое дерево (DOM).
Объектная модель документа (DOM) — это фундаментальный прикладной программный интерфейс, обеспечивающий возможность работы с содержимым HTML & XML документов таким внешним объектам как код JS.
Синтаксический анализ состоит из двух этапов — лексического анализа и построения дерева. В процессе лексического анализа входная последовательность символов разбивается на токены — открывающие и закрывающие теги, названия и значения атрибутов. Лексичесткий анализатор обнаруживает токен, передает его в конструктор дерева и переходит дальше к поиску новых токенов, пока входная последовательность символов не будет закончена.
DOM состоит из узлов, представляющих элементы или теги, такие как
или , и узлы представляющие строки текста.
Рассмотрим пример как бы выглядело DOM дерево для такого html кода:
Title Demo Text
Каждый прямоугольник, представленный на DOM дереве является объектом Node. На схеме представлены узлы типа Document, Element (p, div …) и Text — они являются подклассами класса Node.
В процессе лексического анализа элементы добавляются не только в DOM, а так же и в стек открытых элементов, что позволяет исправлять неправильно вложенные или закрытые теги, тем самым, корректируя отображения ресурса пользователю.
Порядок обработки CSS & JS
Обработка CSS
При обработке стилей браузер строит подобную древовидную структуру, как было рассмотрено выше. В файле стилей имеется селектор ( div, #id, .cssClass ) и значение. Браузер читает селекторы справа налево, например, селектор типа div ul > a будет обработан в такой поочередности: сначала браузер найдет все элементы a на странице, после ul и отфильтрует массив ul до тех, дочерними элементами которых являются a и т.д. пока не дойдет до крайнего левого селектора.
В результате синтаксического анализа CSS будет построено дерево на основе всех найденных стилей, рассмотрим маленький пример:
body < font-size: 16px; >h1
В следствии обработки такого css будет построено CSSOM дерево:
После построения дерева CSS браузеру нужно сопоставить его с DOM деревом элементов. В Webkit процесс сопоставления DOM дерева и стилей называется Attachment. Совмещение происходит синхронно — при добавлении нового элемента DOM дерева для него вызывается метод attach .
Обработка Javascript
Javascript код выполняется сразу как был обнаружен на странице тег , при этом синтаксический анализ документа останавливается до выполнения скрипта. Если речь идет о внешних источниках, которые нужно загрузить, синтаксический анализ документа точно так же ставится на паузу, но уже для загрузки и выполнения кода.
Чтобы влиять на время выполнения скрипта, можно использовать атрибуты defer или async . Они позволяют не останавливать синтаксический анализ документа для загрузки скрипта.
defer и async дают возможность выполнять загрузку скрипта асинхронно, он будет выполнен как только загрузится, а блокировки системного анализа не произойдет.
Отличием defer от async является то, что async выполнит скрипт как только он загрузился, а defer при этом сохранит порядок в котором они были подключены на страницу.
Если присутствуют оба атрибута — defer будет проигнорирован.
Так как стили не вносят изменение в DOM — останавливать синтаксическую обработку для их загрузки нет необходимости, но скрипты JS могут пытаться использовать еще не загруженные стили, таким образом в WebKit скрипты останавливаются только в том случае, если просят данные о стилях, а браузер имеет в наличии еще необработанные таблицы стилей, а Gecko останавливает все скрипты если обнаруживает, что какая-то таблица стилей была еще не обработана.
Render Tree
Во время обработки HTML и CSS создается еще одно дерево — дерево отображения или Render Tree, в котором элементы располагаются в том порядке. в котором они будут выведены на экран. Render Tree состоит из объектов отображения, которые в свою очереди представляют из себя прямоугольную область, где содержатся геометрические данные — высота, ширина, размеры рамок и отступов. Тип окна объекта отображения зависит от свойства display .
Один объект синтаксического DOM дерева может иметь 1 или больше объектов дерева отображения, так к примеру элемент select будет иметь 3 объекта дерева отображения — объект отображения области, раскрывающийся список и кнопка. Стоит отметить, что если текст не помещается в одну строку — каждой строке будет создан новый объект отображения. Элементам со стилем display: none не будет создано объекта отображения в Render Tree.
Для построения дерева стилей нужно рассчитать свойство каждого элемента, достав стили с внешних файлов, inline стилей и стилей заданных атрибутами (например width, bgcolor…).
Компоновка (Layout)
Layout — это расчет размера и положения объекта.
В большинстве случаев компоновка выполняется за 1 проход, так как последующие элементы не влияют на размеры уже рассчитанных элементов, но бывают и исключения, к примеру таблицы.
Layout проходит в несколько циклов и начинается с объекта html , который получает начальные координаты 0:0, а размеры соответствуют видимой части экрана.
Существует 2 вида компоновки — инкрементная и глобальная. Глобальная компоновка выполняется для всего Render Tree, а инкрементная только для части Render Tree — тех объектов которые помечены как «dirty».
Что бы не выполнять глобальную перекомпоновку при небольших изменениях была придумана система «грязных битов» — измененный объект отображения и его дочерние элементы помечаются флагами dirty и children are dirty . Флаг children are dirty означает, что перекомпоновка нужна не самому объекту, а одному из его дочерних элементов.
Глобальную перекомпоновку могут вызвать какие-то глобальные изменения, которые используются во всех объектах, например, изменение шрифта или размеров экрана.
Инкрементная перекомпоновка выполняется асинхронно по мере обнаружения «грязных битов».
Способ компоновки окна определяется следующими способами:
- Типом окна
- Размером окна
- Схемой позиционирования
- Внешней информацией (например размеры экрана)
Тип окна элементов отображения зависят от свойства display: block, inline, none. Блочное окно имеет собственный блок, строчное окно не имеет собственного блока и помещается внутрь контейнера,
В зависимости от свойств position и float существуют разные схемы позицинирования:
- Стандартная — объект размещается в документе согласно своему положению в дереве
- Плавающая — сначала объект размещается в документе согласно своему положению в дереве, а после сдвигается в крайнее левое или крайнее правое положение
- Относительная — положение объекта в дереве отображения отличается от его положения в дереве DOM
Display (Отрисовка)
На этапе отрисовки каждому объекту отображения будет вызван метод paint , в результате которого он будет отображен на экран.
Пространство, где отображается сформированная структура называется холст (canvas). В действительности он бесконечен, однако браузеры обычно определяют для него ширину исходя из размеров области просмотра.
Окна делятся на стеки, где сначала отрисовываются элементы на заднем плане, а затем на переднем. Порядок стеков определяется свойством z-index и соответствует третьей оси расположения объектов.
Источники:
«How browsers work» By Tali Garsiel and Paul Irish
«Javascript. Подробное руководство» Дэвид Флэнаган
Medium
Blog imena.ua
HTML — что это такое и как работает
HTML — это язык разметки, который применяют для создания и структурирования содержимого веб-страниц. Он является основой любого сайта. Знание HTML является важным фактором для начинающих веб-разработчиков. В данной статье мы разберемся, что означает HTML, из чего состоит его код и как он работает на сайтах. Из чего состоит HTML-код HTML-код состоит из элементов, которые открываются […]
Подготовлено_выпускником —>
Получите востребованную профессию бесплатно. Обучение от 1 до 4 месяцев
HTML — это язык разметки, который применяют для создания и структурирования содержимого веб-страниц. Он является основой любого сайта. Знание HTML является важным фактором для начинающих веб-разработчиков. В данной статье мы разберемся, что означает HTML, из чего состоит его код и как он работает на сайтах.
Из чего состоит HTML-код
HTML-код состоит из элементов, которые открываются тегами. Теги влияют на рост и форматирование текста, добавляют другие изображения, видео и медиа-элементы на веб-страницу. Каждый тег начинается с символа « < » и заканчивается « >» . Внутри тегов содержится содержимое или элементы атрибутов, определяющие его свойства.
Пример простого HTML-кода:
Привет, мир!
Это мой первый сайт.
Как HTML работает на сайтах
Когда пользователь открывает веб-страницу, скачивается его HTML-файл с сервера и начинается анализ. Браузер читает HTML-код, распознает теги и их атрибуты, а затем строит структуру страницы на основе данных. Эта структура называется « деревом DOM » (объектная модель документа).
HTML-язык только задает структуру и содержание страницы, но не определяет его стилизацию и взаимодействие. Для этого используйте другие языки: CSS и JavaScript.
HTML — язык программирования?
Хотя HTML является языком, он не является языком программирования. HTML относится к языкам разметки. Языковые программы выделяются для написания инструкций, используются компьютером. А языки созданы для описания структур и представлений данных на веб-страницах.
Сколько времени нужно, чтобы освоить HTML
HTML — это простой язык. Его можно освоить довольно быстро — в течение нескольких дней или недель, в зависимости от интенсивности обучения и опыта. Структура HTML довольно логична, и большинство тегов имеют понятное назначение. Это значительно ускоряет процесс обучения.
После освоения основ HTML вам понадобится практика, чтобы овладеть навыками и применить свои знания на практике. Создание возможных проектов или работа над реальными задачами поможет закрепить материал. На курсе « Web-программист » вы освоите все необходимые навыки в области языка разметки и научитесь разрабатывать сайты.
Для создания полноценных веб-страниц и веб-приложений вам также необходимо изучить другие технологии, такие как CSS и JavaScript. Все эти языки взаимодействуют друг с другом и являются частью современной веб-разработки. Для этой темы на курсе выделен не один урок.
После того как вы освоите основы HTML, CSS и JavaScript, изучите дополнительные инструменты и технологии, которые используются в веб-разработке. Например, на курсе вы познакомитесь с фреймворками и библиотеками, которые упрощают и ускоряют процесс разработки.
Вот несколько популярных инструментов:
- Bootstrap: библиотека CSS, которая предоставляет готовые стильные компоненты и набор для быстрого и адаптивного оформления веб-страниц.
- jQuery: библиотека JavaScript, упрощающая работу с DOM, анимацией, AJAX и другими функциями.
- React: популярная библиотека JavaScript для создания интерактивных интерфейсов с использованием компонентного приложения.
- Angular: фреймворк создает масштабируемые и надежные веб-приложения с использованием компонентов и директив.
Веб-технологии постоянно развиваются, и вам обязательно нужно знать новые тенденции и тренды. Станьте частью комьюнити, читайте блоги и статьи о веб-разработке, просматривайте видеоуроки и посещайте конференции.
Если вы хотите углубить свои знания в веб-разработке и специализироваться в этой области, вы можете изучить такие темы, как:
- Бэкенд-разработка: Изучите серверные языки программирования (например, PHP, Ruby, Python или Node.js) и работайте с базами данных.
- SEO (поисковая оптимизация): Оптимизируйте веб-страницы для поисковых систем и повышайте их видимость.
- UX/UI-дизайн: Разрабатывайте атмосферные интерфейсы, которые удобны и приятны для использования.
Помимо изучения технических навыков, вам необходимо развивать личные качества: коммуникация, умение работать в команде, решение проблем и ответственность. Эти навыки играют важную роль в построении успешной карьеры в веб-разработке. Особенно, если вы планируете работать в компании или заниматься фрилансом.
Поделиться:
Помогаем найти вашу работу мечты
Лучшая инвестиция — это инвестиция в себя, в свои знания и будущее. Оставьте заявку на обучение прямо сейчас и станьте участником проекта
Получите востребованную профессию бесплатно. Обучение от 1 до 4 месяцев
Как браузер рендерит веб-страницу
Цель статьи, если я собираюсь создавать быстрые и надежные веб-сайты, мне нужно действительно понимать механику каждого шага, который браузер выполняет для отображения веб-страницы, чтобы каждый шаг был обдуман и оптимизирован во время разработки. Этот пост представляет собой краткое изложение моих знаний о процессе отображения страниц на довольно высоком уровне.
Много идей основано на фантастическом (и БЕСПЛАТНОН!) курсе по оптимизации производительности веб-сайта Website Performance Optimization Ilya Grigorik и Cameron Pittman на Udacity. Я очень рекомендую это посмотреть.
Также очень полезной оказалась статья Пола Айриша и Тали Гарсиэль How Browsers Work: Behind the scenes of modern web browsers. Хотя эта статья 2011 года, но многие основы работы браузеров остаются актуальными до сих пор.
И так, поехали. Процесс отображения страниц можно разбить на следующие основные этапы:
- Начало разбора HTML
- Получение внешних ресурсов
- Разбор CSS и создание CSSOM
- Выполнение JavaScript
- Объединение DOM и CSSOM, для построения дерево рендеринга
- Расчет макета и отрисовка результата
1. Начало разбора HTML
Когда браузер начинает получать данные HTML страницы по сети, он немедленно запускает свой синтаксический анализатор parser для преобразования HTML в объектную модель документа (DOM) Document Object Model (DOM).
Объектная модель документа (DOM) – это представление данных объектов, которые составляют структуру и содержимое документа в Интернете.
Первый шаг этого процесса синтаксического анализа – разбить HTML на токены, которые представляют начальные теги (start tags), конечные теги (end tags) и их содержимое (contents). Из этого он строит DOM.
2. Получение внешних ресурсов
Когда парсер встречает внешний ресурс, такой как файл CSS или JavaScript, он пытается, получить его. Синтаксический анализатор будет продолжать работу по мере загрузки файла CSS, но он заблокирует рендеринг до тех пор, пока файл не будет загружен и проанализирован (подробнее об этом чуть позже).
Файлы JavaScript немного отличаются – по умолчанию они так же блокируют синтаксический анализ HTML, на время загрузки. Но у них есть два атрибута, которые могут быть добавлены в теги сценария, чтобы изменить это: defer и async. Оба позволяют синтаксическому анализатору продолжать работу, пока файл JavaScript загружается в фоновом режиме. Они отличаются друг от друга то, как они выполняются. Подробнее об этом тоже немного ниже, но вкратце:
defer означает, что выполнение файла будет отложено до завершения синтаксического анализа документа. Если несколько файлов имеют атрибут defer, то они будут выполняться в том порядке, в котором они были обнаружены в HTML.
async означает, что файл будет выполнен, как только он загрузится, это может быть во время или после процесса синтаксического анализа, и поэтому порядок, в котором выполняются асинхронные сценарии, не может быть гарантирован.
Предварительная загрузка ресурсов
Кроме того, современные браузеры будут продолжать сканировать HTML-код, пока анализатор блокирован, и «смотреть вперед» на то, какие внешние ресурсы появляются, а затем загружать их предположительно. То, как они это делают, варьируется в зависимости от браузера, поэтому нельзя полагаться на то, что они будут вести себя определенным образом. Чтобы пометить ресурс как важный и, следовательно, с большей вероятностью он должен быть загруженным на ранней стадии процесса рендеринга, можно использовать тег ссылки с rel = “preload”.
3. Разбор CSS и создание CSSOM
Возможно, вы слышали о DOM, но слышали ли вы о CSSOM (CSS Object Model) (объектной модели CSS)? До того, как я начал исследовать эту тему, я об этом ни чего не знал!
Объектная модель CSS (CSSOM) – это карта всех селекторов CSS и соответствующих свойств для каждого селектора в форме дерева с корневым узлом, родственником, потомком, дочерним элементом и другими отношениями. CSSOM очень похож на объектную модель документа (DOM). Оба они являются частью пути рендеринга, который представляет собой серию шагов, которые должны пройти для правильного рендеринга веб-сайта.
CSSOM вместе с DOM используется для построения дерева рендеринга, которое, в свою очередь, используется браузером для компоновки и раскраски веб-страницы.
Подобно файлам HTML и DOM, когда файлы CSS загружаются, они должны быть проанализированы и преобразованы в дерево – на этот раз CSSOM. Он описывает все селекторы CSS на странице, их иерархию и их свойства.
Чем CSSOM отличается от DOM, так это тем, что он не может быть построен постепенно, поскольку правила CSS могут перезаписывать друг друга в разных точках из-за specificity (порядка применения свойства). Вот почему загрузка CSS блокирует рендеринг, поскольку до тех пор, пока весь CSS не будет проанализирован и не будет построен CSSOM, браузер не может знать, где и как разместить каждый элемент на экране.
4. Выполнение JavaScript
Как и когда ресурсы JavaScript будут загружены, определяет, в какой-то момент они будут проанализированы, скомпилированы и выполнены. В разных браузерах для выполнения этой задачи используются разные механизмы JavaScript. Анализ JavaScript может быть дорогостоящим процессом с точки зрения ресурсов компьютера, в большей степени, чем другие типы ресурсов, поэтому его оптимизация так важна для достижения хорошей производительности. Прочтите этот фантастический пост, чтобы подробнее узнать, как работает движок JavaScript.
События загрузки
После того, как синхронно загруженный JavaScript и DOM будут полностью проанализированы и готовы, будет сгенерировано событие document.DOMContentLoaded. Для любых сценариев, которым требуется доступ к DOM, например, для управления им или прослушивания событий взаимодействия с пользователем, рекомендуется сначала дождаться этого события перед выполнением сценариев.
document.addEventListener('DOMContentLoaded', (event) => < // You can now safely access the DOM >);
После того, как все остальное, например асинхронный JavaScript, изображения и т. д., завершили загрузку, запускается событие window.load.
window.addEventListener('load', (event) => < // The page has now fully loaded >);
5. Объединение DOM и CSSOM, для построения дерево рендеринга
Дерево рендеринга представляет собой комбинацию DOM и CSSOM и представляет все, что будет отображаться на странице. Это не обязательно означает, что все узлы в дереве рендеринга будут визуально присутствовать, например узлы со стилями opacity: 0 или visibility: hidden будут включены и могут быть прочитаны программой чтения с экрана и т. д., тогда как те, которые настроены на display: none будет исключены. Кроме того, такие теги, как , не содержащие визуальной информации, всегда будут пропущены.
Как и в случае с движками JavaScript, разные браузеры имеют разные механизмы рендеринга.
6. Расчет макета и отрисовка результата
Теперь, когда у нас есть полное дерево рендеринга, браузер знает, что рендерить, но не знает, где рендерить. Следовательно, необходимо рассчитать макет страницы (то есть положение и размер каждого узла). Механизм рендеринга проходит дерево рендеринга, начиная с вершины и идя вниз, вычисляет координаты, в которых должен отображаться каждый узел.
Как только это будет сделано, последний шаг – используя эту информацию о макете отрисовать пиксели на экране.
И вуаля! В конце концов, у нас есть полностью отрисованная веб-страница!