Vous entrez le nom du site dans la barre d'adresse du navigateur, appuyez sur
Entrée , et par habitude vous voyez la page demandée. C'est simple: j'ai entré le nom du site - le site était affiché. Cependant, pour les plus curieux, je veux vous dire ce qui se passe lorsque le navigateur commence à recevoir des morceaux du site (oui, le site vient en morceaux, en d'autres termes, des morceaux) et affiche une page entièrement dessinée.
Comment fonctionne le navigateur?
Avant l'histoire de la façon dont le navigateur dessine la page, il est important de comprendre comment elle est organisée, quels processus et à quel niveau sont effectués. Lorsque nous nous familiariserons avec le processus de rendu, nous rappellerons les composants du navigateur plus d'une fois. Donc, sous le capot, le navigateur ressemble à ceci:
L'interface utilisateur est tout ce que l'utilisateur voit: barre d'adresse, boutons avant / arrière, menus, signets - à l'exception de la zone où le site est affiché.
Le moteur de navigation est responsable de l'interaction entre l'interface utilisateur et le moteur de rendu. Par exemple, cliquer sur le bouton de retour devrait indiquer au composant RE qu'il est nécessaire de dessiner l'état précédent.
Le moteur de rendu est responsable de l'affichage de la page Web. Selon le type de fichier, ce composant peut analyser et restituer à la fois HTML / XML et CSS, ainsi que PDF.
Le réseau exécute des demandes de ressources xhr et, en général, le navigateur communique avec le reste d'Internet via ce composant, y compris le proxy, la mise en cache, etc.
JS Engine est l' endroit où le code js est analysé et exécuté.
L'interface utilisateur est utilisée pour dessiner des composants standard tels que des cases à cocher, des entrées, des boutons.
La persistance des données est responsable du stockage des données locales, telles que les cookies, SessionStorage, indexDB, etc.
Ensuite, nous apprenons comment les composants du navigateur considérés interagissent entre eux et analysons plus en détail ce qui se passe à l'intérieur du moteur de rendu. En d'autres termes ...
Comment le navigateur traduit-il le HTML en pixels à l'écran?
Ainsi, avec l'aide du composant Réseau, le navigateur a commencé à recevoir le fichier html avec des morceaux, généralement 8 Ko, quelle est la prochaine étape? Et puis vient le processus d'analyse (
spécification du processus) et de rendu de ce fichier dans le composant, comme vous l'avez peut-être deviné - le moteur de rendu.
Important! Pour augmenter la convivialité, le navigateur n'attend pas que tout le html soit chargé et analysé. Au lieu de cela, le navigateur essaie immédiatement d'afficher la page à l'utilisateur (ci-après, nous examinerons comment).
Le processus d'analyse lui-même ressemble à ceci:
Le résultat de l'analyse est un
arbre DOM . Prenez par exemple le html suivant:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web Rendering</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="wrapper"> <div class="header"> <h1>Hey</h1> </div> <div class="content"> <p> Lorem <span>ipsum</span>. </p> </div> <footer> Contact me </footer> </div> <script src="./code.js"></script> </body> </html>
L'arbre DOM d'un tel fichier html ressemblera à ceci:
Lorsque le navigateur analyse le fichier html, il rencontre des balises contenant des liens vers des ressources tierces (
<link>, <script>, <img> et ainsi de suite) - au fur et à mesure de leur découverte, une demande de ces ressources se produit.
Ainsi, en envoyant une requête à l'adresse prescrite dans l'attribut href de la balise
<link rel = "stylessheet"> et après avoir reçu le fichier de styles css, le navigateur analyse ce fichier et crée le soi-disant
modèle d'objet CSS - CSSOM .
Imaginez que nous ayons une telle feuille de style:
body { font-size: 14px; } .wrapper { width: 960px; margin: 0 auto; } .wrapper .header h1 { font-size: 26px; } .wrapper p { color: red; } footer { padding: 20px 0; }
D'où nous obtenons ce
CSSOM :
Attention: ici un arbre est construit à partir des styles de notre fichier css. En outre, il existe également des styles d'agent utilisateur - styles de navigateur par défaut et styles en ligne - prescrits dans les balises html.
Vous pouvez en savoir plus sur l'algorithme d'analyse des styles CSS dans la
spécification .
Nous avons maintenant le
DOM et le
CSSOM - le premier répond à la question «quoi?», Le second répond à la question «comment?». Si vous pensez que la prochaine étape consiste à combiner le DOM et le CSSOM, alors vous avez absolument raison!
DOM + CSSOM = arbre de rendu.L'arbre de rendu est un arbre d'éléments visibles (!) Construits dans l'ordre dans lequel ils doivent être affichés sur la page. Veuillez noter que les éléments qui ont l'affichage de la règle css: aucun ou d'autres qui affectent négativement l'affichage ne seront pas dans l'
arborescence de rendu .
Le navigateur crée l'arborescence de rendu pour déterminer exactement ce dont il a besoin pour le rendu et dans quel ordre. La construction de l'arborescence de rendu est quelque chose comme ceci: à partir de l'élément racine (html), l'analyseur passe par tous les éléments visibles (lien de saut, script, méta, masqué par les éléments css) et pour chaque élément visible, il trouve la règle css correspondante de CSSOM.
Dans le moteur Firefox, les éléments de l'arborescence de rendu sont appelés cadres. Webkit utilise le terme rendu ou objet de rendu. L'objet de rendu sait comment se placer sur la page et contient également des informations sur ses enfants. Et pour les plus curieux, si vous regardez le code source du webkit, vous pouvez trouver une classe appelée
RenderObject .
Poursuivant notre exemple, nous obtenons un tel
arbre de rendu :
À l'heure actuelle, nous avons dans un certain état un arbre de rendu - un arbre contenant des informations sur quoi et comment dessiner. Le navigateur doit maintenant comprendre où et avec quelle taille l'élément sera affiché. Le processus de calcul de la position et de la taille est appelé
Disposition .
La mise en page est un processus récursif pour déterminer la position et la taille des éléments d'un arbre de rendu. Il commence à partir de l'objet de rendu racine, ce qu'il est, et passe récursivement sur une partie ou la totalité de la hiérarchie de l'arborescence, calculant les dimensions géométriques des objets de rendu enfant. L'élément racine a une position (0,0) et sa taille est égale à la taille de la partie visible de la fenêtre, c'est-à-dire la taille de la fenêtre.
Html utilise un modèle de disposition basé sur le flux, en d'autres termes, les dimensions géométriques des éléments peuvent dans certains cas être calculées en une seule passe (si les éléments qui apparaissent dans le flux ultérieurement n'affectent pas la position et la taille des éléments déjà passés).
La disposition peut être globale lorsqu'il est nécessaire de calculer la position des objets de rendu de l'arborescence entière et incrémentielle lorsqu'elle est requise pour calculer uniquement une partie de l'arborescence. La disposition globale se produit, par exemple, lors du changement de la taille de police ou lors de l'événement de redimensionnement. La disposition incrémentielle se produit uniquement pour les objets de rendu marqués comme sales.
Quelques mots sur le «système de bits sales» . Ce système est utilisé par les navigateurs pour optimiser le processus afin de ne pas recompter la mise en page entière. Lors de l'ajout d'un nouvel objet ou de la modification d'un objet de rendu existant, lui et ses enfants sont marqués du drapeau «sale». Si l'objet de rendu ne change pas, mais que ses enfants ont été modifiés ou ajoutés, cet objet de rendu est marqué comme «les enfants sont sales».
Vers la fin du processus de mise en page, chaque objet de rendu a sa propre position et taille.
Pour résumer: le navigateur sait quoi, comment et où dessiner. Par conséquent - il ne reste plus qu'à dessiner. Ce processus, curieusement, s'appelle
Paint .
Peinture - étape où le pixel du moniteur est rempli de la couleur spécifiée dans les propriétés de l'objet de rendu et l'écran blanc se transforme en une image conçue par l'auteur (développeur). Tout au long du chemin de rendu, c'est le processus le plus cher (pas que le précédent soit bon marché).
En plus du processus de mise en page, la peinture peut être globale - l'arborescence est entièrement redessinée et incrémentielle - l'arborescence est partiellement redessinée. Pour un nouveau dessin partiel, un objet de rendu marque son rectangle comme non valide. Le système d'exploitation considère cette zone comme nécessitant un nouveau dessin et déclenche l'événement de peinture. Dans le même temps, le navigateur est capable de combiner des zones afin d'effectuer un redessin à la fois pour tous les endroits où cela est nécessaire.
Le dimensionnement et le positionnement des éléments d'arbre (mise en page) et le redessin (peinture) sont des processus coûteux. Ils fonctionnent au niveau CPU. En développant des applications web dynamiques dans lesquelles ces processus seront lancés très souvent, nous ne réaliserons jamais d'animations fluides.
Donc, il doit y avoir quelque chose qui pourrait aider à créer des sites avec une animation riche, sans charger le CPU et dessiner chaque image en moins de 16,6 ms (60 ips). En effet, le navigateur effectue une autre étape qui permet d'optimiser la dynamique des sites -
Composite (composition).
Avant la composition, tous les éléments dessinés sont sur un seul calque (calque mémoire). C'est-à-dire que la modification des paramètres (par exemple, les dimensions géométriques ou la position) de certains éléments entraînera le recalcul des paramètres des éléments voisins. Mais si vous distribuez des éléments sur des couches composites - la modification des paramètres d'un élément entraînera un recalcul uniquement sur une couche spécifique, sans affecter les éléments sur d'autres couches. Ainsi, ce processus est le moins cher en termes de performances, vous devez donc essayer d'apporter des modifications qui ne provoquent que des composites.
Pour résumer ce qui précède, nous obtenons le processus suivant de rendu d'une page Web:
TLDRLe navigateur reçoit le fichier html, l'analyse et construit le DOM. Rencontrant les styles CSS, le navigateur les charge, les analyse, construit CSSOM et les combine avec le DOM, nous obtenons l'arbre de rendu. Reste à savoir où organiser les éléments de l'arbre de rendu - c'est la tâche de la mise en page. Après avoir organisé les éléments, vous pouvez commencer à les dessiner - c'est la tâche de peinture, l'étape à laquelle les pixels de l'écran sont remplis.
Dynamique
Que se passe-t-il lorsque la propriété css change? Ou, par exemple, un nouveau nœud dom est-il ajouté? En cas de modification des propriétés css, tout dépend de la propriété modifiée. Il n'y a que deux propriétés qui déclenchent la tâche
composite : l'
opacité et la
transformation . Seules ces deux propriétés sont les moins chères pour l'animation. Par exemple, la modification de l'arrière-plan entraînera la tâche de peinture (puis composite) et la modification de l'affichage provoquera d'abord la mise en page, puis la peinture, puis le composite. Une liste des tâches causées par les changements de style peut être consultée sur
csstriggers.com .
Lors de l'ajout d'un nouveau nœud à l'arborescence dom - le navigateur doit évidemment ajouter un nouvel objet à l'arborescence, calculer sa position sur la page, calculer les positions des autres éléments sur la page (s'ils ont été affectés par un nouvel élément), et finalement dessiner tout cela semble coûteux. Par conséquent, lorsque vous effectuez de telles opérations, vous devez garder à l'esprit les performances, car tous les utilisateurs d'Internet ne lancent pas votre application Web sur le dernier modèle d'appareil.
Pour résumer, nous avons examiné les composants du navigateur, comment ils interagissent entre eux et comment le moteur de rendu dessine la page pour l'utilisateur.
Vous pouvez voir ce qui précède dans les devtools de chrome, mais pour ne pas aller au-delà du titre de l'article, c'est tout pour le moment.