AmilKey · July 10, 2019 07:49
diff --git a/gistfile1.txt b/gistfile1.txt
 Процесс обработки WEB-страницы браузером

 Для начала, рассмотрим последовательность работы браузера при отображении документа:

 Из полученного от сервера HTML-документа формируется DOM (Document Object Model).
 Загружаются и распознаются стили, формируется CSSOM (CSS Object Model).
 На основе DOM и CSSOM формируется дерево рендеринга, или render tree — набор объектов рендеринга (Webkit использует термин «renderer», или «render object», а Gecko — «frame»). Render tree дублирует структуру DOM, но сюда не попадают невидимые элементы (например — <head>, или элементы со стилем display:none;). Также, каждая строка текста представлена в дереве рендеринга как отдельный renderer. Каждый объект рендеринга содержит соответствующий ему объект DOM (или блок текста), и рассчитанный для этого объекта стиль. Проще говоря, render tree описывает визуальное представление DOM.
 Для каждого элемента render tree рассчитывается положение на странице — происходит layout. Браузеры используют поточный метод (flow), при котором в большинстве случаев достаточно одного прохода для размещения всех элементов (для таблиц проходов требуется больше).
 Наконец, происходит отрисовка всего этого добра в браузере — painting.

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

 Repaint

 В случае изменения стилей элемента, не влияющих на его размеры и положение на странице (например, background-color, border-color, visibility), браузер просто отрисовывает его заново, с учётом нового стиля — происходит repaint (или restyle).

 Reflow

 Если же изменения затрагивают содержимое, структуру документа, положение элементов — происходит reflow (или relayout). Причинами таких изменений обычно являются:

 Манипуляции с DOM (добавление, удаление, изменение, перестановка элементов);
 Изменение содержимого, в т.ч. текста в полях форм;
 Расчёт или изменение CSS-свойств;
 Добавление, удаление таблиц стилей;
 Манипуляции с атрибутом «class»;
 Манипуляции с окном браузера — изменения размеров, прокрутка;
 Активация псевдо-классов (например, :hover).
	Процесс обработки WEB-страницы браузером

	Для начала, рассмотрим последовательность работы браузера при отображении документа:

	Из полученного от сервера HTML-документа формируется DOM (Document Object Model).
	Загружаются и распознаются стили, формируется CSSOM (CSS Object Model).
	На основе DOM и CSSOM формируется дерево рендеринга, или render tree — набор объектов рендеринга (Webkit использует термин «renderer», или «render object», а Gecko — «frame»). Render tree дублирует структуру DOM, но сюда не попадают невидимые элементы (например — <head>, или элементы со стилем display:none;). Также, каждая строка текста представлена в дереве рендеринга как отдельный renderer. Каждый объект рендеринга содержит соответствующий ему объект DOM (или блок текста), и рассчитанный для этого объекта стиль. Проще говоря, render tree описывает визуальное представление DOM.
	Для каждого элемента render tree рассчитывается положение на странице — происходит layout. Браузеры используют поточный метод (flow), при котором в большинстве случаев достаточно одного прохода для размещения всех элементов (для таблиц проходов требуется больше).
	Наконец, происходит отрисовка всего этого добра в браузере — painting.

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

	Repaint

	В случае изменения стилей элемента, не влияющих на его размеры и положение на странице (например, background-color, border-color, visibility), браузер просто отрисовывает его заново, с учётом нового стиля — происходит repaint (или restyle).

	Reflow

	Если же изменения затрагивают содержимое, структуру документа, положение элементов — происходит reflow (или relayout). Причинами таких изменений обычно являются:

	Манипуляции с DOM (добавление, удаление, изменение, перестановка элементов);
	Изменение содержимого, в т.ч. текста в полях форм;
	Расчёт или изменение CSS-свойств;
	Добавление, удаление таблиц стилей;
	Манипуляции с атрибутом «class»;
	Манипуляции с окном браузера — изменения размеров, прокрутка;
	Активация псевдо-классов (например, :hover).
No results found