Каковы различия между событием разметки и рисования в Chrome DevTool Timeline View

Я думаю, что render и paint просто означают рендеринг страницы, показывают DOM

Какие отличия?

Ответ 1

События рендеринга относятся к классам, связанным с каждым DOM node (т.е. "пересчет стиля" ) и позиции элементов на странице ( "Макет" ). Категория Paint - это фактически рисование пикселей и включает в себя такие события, как "Paint" и "Decode Image" / "Resize Image". Вкратце, это о внутренней структуре и внешности - если ваша страница тратит много времени на рендеринг, это связано с структурой его DOM и CSS (например, большого дерева DOM), в то время как значительное время рисования часто означает появление страницы влияет на производительность (например, некоторые стили дороги для рисования или слишком большое изображение).

Ответ 2

 Rendering            Painting     

   ______________
  / E      F /   |
 ____________    |    ____________
 |      A    |   |    |     A     |
 |           | G |    |           |
 |           |   |    |           |
 | B      D  |   |    | B      D  |
 |           |   |    |           |
 |     C     | H/     |     C     |
 |___________|_       |___________

Ответ 3

В последних версиях Chrome (v51 +) на шкале времени есть два релевантных события: макет и paint (больше не происходит событие "render" ).

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

В макете есть понятие трехмерных (z-индексов), структуры (линий, ящиков, потоков) и отношений родитель-потомок (деревья). В живописи мы сглаживаем всю эту информацию до двух измерений. Результатом краски является только 2d-сетка пикселей и их цвета. Это то, что вы видите на экране. Вся структура потеряна.

Дополнительная информация: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=en