Sur le processus de rendu Chrome (sous)

Le processus de rendu Chrome dans un (e) nous avons introduit le pipeline de rendu génération DOM , le style de calcul et la mise en page de trois étapes. Aujourd'hui, nous sommes préoccupés par l'arrière de la scène de pipeline de rendu.

Stratified

Après avoir généré la mise en page générée par la mise en page de l'arbre, l'emplacement spécifique de chaque élément d'information est calculé, puis la page suivante ne démarre pas l'élaboration?

La réponse est toujours non.

Parce qu'il ya beaucoup de pages complexes en effet, comme une transformation complexe 3D, défilement de page ou de faire usage du tri z-indexation axe z. Pour la réalisation de ces effets plus facilement, le moteur de rendu nécessaire pour générer spécifique pour une couche de nœud particulier, et générer un arbre de couche correspondant (LayerThree) . couches mentionnées, nous devons d' abord penser à un logiciel PS. PS Les couches sont très courantes, telles que l'image devient arrière - plan transparent, vous devez copier une couche est sorti, effacer les parties non souhaitées de la couche avec un bouchon, puis appliqué à l'image originale, vous pouvez générer une image avec un arrière - plan transparent.

Pour comprendre ce qui est la couche de manière intuitive, par les « outils de développement » Chrome et sélectionnez l'onglet « Layers », vous pouvez visualiser la page de stratification, comme indiqué ci-dessous:

Si aucune étiquette « Layers », voir le schéma ci - dessous:

Comme on le voit de ce qui précède le premier graphique, les points au moteur de rendu des pages de nombreuses couches, ces couches dans un certain ordre pliés ensemble, pour former la dernière page.

Maintenant que vous connaissez la page du navigateur est en fait divisé en plusieurs couches, ces couches superposées synthèse après la dernière page. Ensuite , la relation entre ces couches et la disposition des nœuds d'arbre est comme? S'il vous plaît se référer au schéma: En

règle générale, chaque nœud de l'arbre contient la mise en page n'est pas une couche, si un nœud ne correspond pas à la couche, la couche subordonnée au nœud du nœud parent . Par exemple, la figure ci - dessus la balise span sera pas de couches exclusives, ils sont subordonnés à leur couche mère. Dans tous les cas, une dernière couche de chaque noeud dépendant directement ou indirectement.

Le navigateur va créer une couche pour les nœuds individuels qui répondent aux conditions suivantes:

1. L'élément d'attribut de contexte a un stratifié promu à une seule couche.

La page est un plan à deux dimensions, mais le contexte permet aux éléments HTML stratifié ayant une conception en trois dimensions, ces éléments HTML en fonction de l'attribut de priorité lui - même pour la distribution de l'axe z perpendiculaire au plan à deux dimensions.
Ceci est une vue schématique d'un contexte stratifié.

contexte stratifié ont généralement les propriétés suivantes:

• élément racine du document (html).
• postion est absolue (positionnement absolu - par rapport à l'élément parent) ou relative (positionnement relatif) et z-index ne sont pas auto-éléments.
• La valeur de position fixe (positionné de manière fixe - par rapport à la totalité du document) ou des éléments collant (visqueux) de positionnement.
• Elément flexible de l'enfant (FlexBox) du récipient, et la valeur z-index est pas automatique.
• grille de l'élément enfant de la cuve, et la valeur z-index est pas automatique.
• opacité valeur de propriété de l'élément inférieur à 1.
• mix-mode de mélange valeur d'attribut est pas un élément normal.
• transformer / filtre / perspective / clip-path / masque / masque image / masque frontière valeur d'attribut est pas un élément à pas.
• La valeur d'attribut de l'isolat d'isolation d'élément.
• élément tactile -webkit-overflow-scrolling valeur d'attribut.
• valeur de changement est réglé sur l'une quelconque de l'attribut de l'attribut est créé dans le contexte de l'élément stratifié valeur non initial.
• Contenir le plan de la valeur d'attribut, de la peinture ou une valeur synthétique de l'un d'eux: l'élément (par exemple, contenir le contenu / strict) a.

2. La nécessité de placer coupe (clip) sera créé en tant que couche

Mais vous devez d'abord comprendre ce qui est coupé, combiné avec le code HTML suivant:

<style>
      div {
            width: 200;
            height: 200;
            overflow:auto;
            background: gray;
        } 
</style>
<body>
    <div>
        <p>所以元素有了层叠上下文的属性或者需要被剪裁，那么就会被提升成为单独一层，你可以参看下图：</p>
        <p>从上图我们可以看到，document层上有A和B层，而B层之上又有两个图层。这些图层组织在一起也是一颗树状结构。</p>
        <p>图层树是基于布局树来创建的，为了找出哪些元素需要在哪些层中，渲染引擎会遍历布局树来创建层树（Update LayerTree）。</p> 
    </div>
</body>

nous définissons ici div taille de 200 * 200 pixels, tandis que le div dans le texte plus contenu, la zone de texte affiché dépassera certainement une superficie de 200 * 200, cette fois produit un ruban de coupe, le moteur de rendu sera couper du texte partie div pour la zone d' affichage, les résultats finaux comme ci - dessous: par

conséquent, l'élément stratifié avec les attributs de contexte doivent être coupés ou, dans laquelle tout point de vue, une couche séparée sera encouragée.

Nous pouvons également voir à travers la page Calques nous écrivons l'arbre de couche correspondant, afin de minimiser la profondeur de la couche de l'arbre, à optimiser davantage notre code de la page Web.

Le dessin de la couche

Après l'achèvement de la construction de la couche de l'arbre, le moteur de rendu de la couche d'arbre sera établi dans chaque couche, il est comment y parvenir dessiné?

moteur de rendu le rendu sera divisé chaque couche dans l' enseignement de nombreux petits dessin et la composition de ces instructions dans l'ordre d'une liste à, comme indiqué ci - dessous:

Comme on le voit sur la figure, la liste des commandes de dessin est très simple, il est permis d'effectuer une opération de dessin simple, comme le dessin d' une des lignes de la matrice rose ou noir. éléments puisés nécessitent généralement une bonne instructions peu de dessin, parce que chaque élément d'arrière - plan, de premier plan, des frontières et nécessite une commande séparée pour dessiner. Ainsi , l' étape de dessin couche, le contenu de la sortie à tirer est que ces listes.

De même, nous pouvons la voir en cliquant sur la couche correspondante instruction de dessin dans les « couches » dans.

Rasterized

Dessiner la liste , sauf une liste d'instructions de dessin et de l'ordre de dessin de l' enregistrement, et l'opération est effectivement tirée par le moteur de rendu pour compléter la synthèse du fil.
La figure ci - dessus illustre la relation entre le fil principal de rendu et du fil synthétique. Lorsque vous êtes prêt à dresser une liste de couches, le thread principal établira la liste soumise à (commit) à fil synthétique.

On parle du concept sous la fenêtre:

Habituellement, une page peut être très grande, mais l'utilisateur ne peut voir une partie de celui-ci, nous pouvons voir la section utilisateur est appelée la fenêtre.

Les utilisateurs ne peuvent voir à travers la partie de la fenêtre de la page, dans ce cas, pour en tirer tout le contenu de la couche, il aurait de frais généraux, mais il est pas nécessaire.

Pour cette raison, la couche de fil synthétique sera divisé en tuiles (tuiles) , la taille de ces tuiles sont généralement 256 * 256 ou 512 * 512.
Ensuite , synthétisé selon le voisinage du fil de la carte de bits du bloc de la fenêtre de priorité est générée, l'opération est générée par la carte de bits pixellisée effectuée. Les moyens de tramage soi-disant convertit le bitmap en tuiles . Bloc de grille est la plus petite unité d'exécution. Le processus de rendu maintient une grille de pool de threads, tout le tramage de la tuile est réalisée dans le pool de threads, le mode géré comme indiqué ci - dessous:

En général, le processus de tramage utilise le GPU pour accélérer la formation, en utilisant la GPU pour générer bitmap le processus tramage est appelé tramage rapide ou GPU, le bitmap résultant est stocké dans la mémoire GPU.

opération de GPU est exécuté sur le processus de GPU, si le pixellisées utilisant le GPU, puis les opérations de bitmap généré finales sont effectuées dans le processeur graphique, ce qui implique un fonctionnement inter-processus.

Comme on le voit sur la figure, le processus de rendu pour générer un mode d' envoi tuile à la GPU, et ensuite effectuer les tuiles bitmap produites dans le GPU, le GPU et stockées dans la mémoire.

Synthèse et affichage

Une fois toutes les tuiles sont pixellisés, fil synthétique va générer une commande pour dessiner une tuile - « DrawQuad », puis soumettre la commande au processus du navigateur.

Il existe un processus de navigateur appelé composants à savoir, le fil synthétique DrawQuad pour recevoir des commandes envoyées sur, puis en fonction de commande DrawQuad, tirent leur contenu de la page dans la mémoire, la mémoire d'affichage final sur l'écran.

Ici, à travers une série d'étapes, écrire un bon HTML, CSS, JavaScript et d'autres documents via le navigateur affiche une belle page.

Résumé du pipeline de rendu

Après l'introduction de deux articles, j'ai une impression générale du processus de rendu barre de navigateur. Permettez-moi de résumer: de HTML à DOM calculate, le style, la mise en page, arbre de la couche, le dessin, la pixellisation, la synthèse et l'affichage. Comme indiqué ci-dessous:

1. Le processus de rendu du contenu HTML dans le navigateur peut lire l' arborescence DOM structure.
2. Le moteur de rendu feuille de style CSS dans un navigateur peut comprendre styleSheets , noeud DOM style calculé.
3. Créer un arbre de mise en page , et calcule layout éléments d'information.
4. Hiérarchique mise en page des arbres, et génère un arbre hiérarchique .
5. Générée pour chaque couche liste d'étirage et de le soumettre au fil synthétique.
6. Synthèse de la couche de fils en tuiles , et la piscine de fil de tramage dans un bitmap dans le bloc.
7. fil synthétique envoie une instruction de dessin DrawQuad au processus du navigateur.
8. processus de navigateur selon des messages DrawQuad pages générées et affichées sur le moniteur.