1. Общий процесс
Два и пять шагов
1. HTML → DOM-дерево (парсинг html)
Полное название DOM — объектная модель документа, в которой узел DOM соответствует метке, а дерево Dom представляет структуру документа HTML. Процесс преобразования показан на следующем рисунке:
- расшифровка: Браузер считывает необработанные байты HTML с диска или из сети и преобразует их в соответствующие символы в соответствии с указанным форматом кодировки файла (например, UTF-8).
- токенизация: Браузер преобразует символы в различные точные токены, указанные в стандарте W3C HTML5, такие как "", "" и другие строки, заключенные в угловые скобки. Каждый токен имеет особое значение и собственный набор правил.
- лексический анализ: сгенерированные токены преобразуются в объекты, определяющие их свойства и правила.
- Построение DOM-дерева: Наконец, поскольку HTML-теги определяют отношения между различными тегами (некоторые теги вложены в другие теги), созданные объекты связаны друг с другом в древовидной структуре данных, которая также фиксирует отношения «родитель-потомок». родитель объекта body, тело является родителем объекта p и т. д.
2. CSS → дерево CSSOM (разбор стилей CSS)
Полное название CSSOM — объектная модель CSS.CSOM сообщает браузеру, как выглядит элемент при его отображении. Как и в случае с HTML, нам нужно преобразовать полученные правила CSS во что-то, что браузер сможет понять и обработать. Итак, мы повторяем процесс, очень похожий на работу с HTML:
CSSOM выводит только те узлы, которые содержат стили, и окончательный вывод:
3. Сгенерируйте дерево рендеринга (рассчитайте видимые узлы и стили)
DOM описывает структуру документа, а CSSOM описывает правила стиля документа. Целью построения этого дерева является отрисовка содержимого документа в правильном порядке. Дерево рендеринга:
- Не включает невидимые узлы, такие как заголовок, сценарий, метаданные и т. д.
- Некоторые узлы, скрытые с помощью CSS, также будут игнорироваться в дереве рендеринга, например, узлы с примененным правилом display:none, в то время как visible: hidden невидим только визуально, по-прежнему занимает место и не будет игнорироваться.
4. (рендеринг) макет
В соответствии с блочной моделью рассчитайте положение и размер каждого узла на экране.
5. (рендеринг) живопись
По рассчитанным правилам контент отрисовывается на экране через видеокарту.
3. Рендеринг
1. перекомпоновка reflow (т.е. переразметка)
Перекомпоновка происходит при изменении положения и размера видимого узла., В частности, следующие обстоятельства:
- начальная отрисовка страницы
- добавить/удалитьвидимыйDOM-элемент
- изменить положение элемента
- Изменить размер элемента (ширину, высоту,Внутренние и внешние поля, границыЖдать)
- Изменить содержимое элемента** (текст, HTML и т. д.)**
- изменить элементразмер шрифта
- Изменить размер окна
Никакого поведения перестановки не происходит:
- Чтение атрибутов узла dom, содержимого, стиля
2. перекрасить перекрасить (т.е. перекрасить)
При изменении цвета фона элемента, цвета текста, цвета границы и т. д. свойств, не влияющих на его окружение или внутреннюю компоновку, часть экрана перерисовывается, но геометрия элемента не меняется.
это видимое изменение узлаВнешний вид, отличный от положения и размераТриггерное поведение браузера имеет следующие характеристики:
- Перерисовка не обязательно приводит к перекомпоновке
- Перекомпоновка определенно приведет к перерисовке, потому что перерисовка — это последний шаг, который браузер делает для отображения страницы.
вопрос
просить: Когда браузер отправляет запрос на сервер для получения внешних файлов css и js?
О: Когда при анализе DOM встречается внешняя ссылка, если соединение все еще существует, запрос на загрузку будет запущен немедленно.
просить: CSSOM DOM JavaScript блокирует отношения между тремя?
Ответ: CSSOM DOM не влияют друг на друга. JavaScript будет блокировать построение дерева DOM, но HTML до JS можно будет нормально разобрать в дерево DOM. Построение CSSOM заблокирует выполнение JavaScript. Это также объясняет, почему выполнение JavaScript требует доступа к DOM и CSSOM, но блокируется только CSSOM.