Chrome DevTools À Jour Du Calendrier De La Couche De L'Arbre De L'Événement

Je suis en train de construire et d'animation de transition lourds application web avec beaucoup de contenu. Il ya beaucoup de la composition des couches de l'application, puisque tout ce qui est déplacé et d'animation à l'aide de css transforme. Je suis en train de déboguer l'application, à savoir le rendu des goulets d'étranglement et j'ai remarqué que beaucoup de "mise à Jour de la Couche de l'Arbre d'événements" en Chrome DevTools -> Calendrier -> Images de mode comme:
Chrome DevTools À Jour Du Calendrier De La Couche De L'Arbre De L'Événement

Quelqu'un a une idée de ce que pourrait être la cause? Que signifie "mise à Jour de la Couche de l'Arbre" exactement défendre?

InformationsquelleAutor Aleksandar Mirilovic | 2014-09-08
  1. 50

    Vous devez d'abord comprendre ce qu'est un Render Layer est. Le Render Layer est les navigateurs représentation de la façon de rendre ce nœud et comment il se rapporte à d'autres nœuds avec le même espace de coordonnées de traiter avec des choses comme le chevauchement du contenu, de la peinture etc. Le Update Layer Tree puisse se faire à partir d'un certain nombre de choses différentes. Par exemple, si vous utilisez javascript pour définir un style à un élément de la Layer Tree devront être calculées et mises à jour. Ou peut-être qu'il a pour synchroniser le Layer Tree entre les compositeurs fil ( où les textures sont chargées pour le GPU ) et le thread principal ( où le javascript s'exécute ).

    Dans votre cas, je deviner que vous êtes le déclenchement fondamental de la couche d'invalidation qui est en l'obligeant à mettre à jour un calque en haut de la hiérarchie de l'arbre qui est ensuite goutte à goutte vers le bas de l'arbre et en faisant que chacun de ces couches à être mis à jour. Même si c'est difficile à dire sans regarder votre code.

    De toute façon si ce long Update Layer Tree est systématiquement qui se passe avant la Layout est recalculé, c'est très certainement lié à cela.

    Voici quelques ressources pour vous aider à démarrer.

    Lire Ce HTML5 Rocks article sur les navigateurs Couches. Rendu accéléré dans Chrome

    ou cet autre HTML5 Rocks article à propos de la composition. Haute Performance Des Animations

    Et si vous voulez une compréhension profonde de la façon dont google chrome rend une page et utilise le GPU dans ce processus. Il y a un excellent article sur le Chrome blog à ce sujet. Grâce à l'Accélération GPU de Compositing dans Chrome

    Bonne chance.

    • C'est en fait la "Composition", pas "le Compostage". Dans les deux endroits.
    InformationsquelleAutor Alexander J. Ray