Quelles sont les différences entre l'événement de rendu et de peinture dans la vue chronologique de Chrome DevTool

Je pense que les render et paint signifient tous les deux rendre la page, montrer le DOM

Quelles sont les différences?

28
demandé sur hh54188 2013-09-10 05:55:24

3 réponses

Les événements de rendu concernent les styles de calcul associés à chaque nœud DOM (c'est-à-dire "recalculer le Style") et la position des éléments sur la page ("Mise en page"). La catégorie de peinture consiste à peindre des pixels et comprend des événements tels que "Paint" lui-même et "Decode Image" / "Redimensionner L'Image". En un mot, il s'agit de structure interne vs apparence-si votre page passe beaucoup de temps à rendre, c'est à cause de la structure de son DOM et CSS (par exemple un grand arbre DOM), alors que des temps de peinture importants souvent signifie que l'apparence de la page affecte les performances (par exemple, certains styles sont coûteux à peindre ou une image est trop grande).

35
répondu caseq 2013-09-10 14:51:59 
 Rendering            Painting     

   ______________
  / E      F /   |
 ____________    |    ____________
 |      A    |   |    |     A     |
 |           | G |    |           |
 |           |   |    |           |
 | B      D  |   |    | B      D  |
 |           |   |    |           |
 |     C     | H/     |     C     |
 |___________|_       |___________
8
répondu ad48 2014-12-08 19:57:41

Dans les versions récentes de Chrome (v51+) il y a deux événements pertinents dans la timeline: mise en page et peinture (il n'est plus un "rendu" de l'événement).

  • Layout fait référence au processus de construisant un arbre de rendu et utilisant cet arbre pour calculer la position et la taille exactes de chaque objet

  • Peinture se réfère au processus de prendre les positions précédemment calculées dessiner les couleurs à la écran

Layout a une notion de trois dimensions (z-index), de structure (lignes, boîtes, flux) et de relations parent-enfant (arbres). En peinture, nous aplatissons toutes ces informations à deux dimensions. Le résultat d'une peinture est juste une grille 2d de pixels et de leurs couleurs. C'est ce que vous voyez sur l'écran. Toute la structure a été perdue.

Plus d'informations: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=en

5
répondu James Lawson 2016-07-25 11:13:05