Qu'est-ce qui cause ce cycle excessif "Couches composites", "Recalculer le style" et "Mettre à jour l'arbre des couches"?
Je suis très intrigué par le nombre excessif d'événements "couches composites", "recalculer le style" puis "actualiser l'arborescence des couches" dans l'une de nos applications Web. Je me demande ce qui les cause ici.
Si vous dirigez votre Chrome vers l'un de nos flux en mouvement rapide, dites https://choir.io/player/beachmonks/github , et allumez votre «compteur FPS», vous pouvez voir que l'application peut atteindre environ 60fps la plupart du temps quand nous sommes au top.
Cependant, dès que je fais défiler quelques messages et que je laisse l’écran tel quel, le taux de FPS tombe considérablement à environ 10 ou même moins. Ce que le code fait ici, c'est qu'il restitue chaque message entrant, l'ajoute au début et fait défiler la liste vers le haut, jusqu'à Npx, qui correspond à la hauteur du nouveau message, afin de conserver la position de la fenêtre d'affichage intacte.
(Je comprends que scrollTop invalide l'écran, mais j'ai soigneusement ordonné les opérations pour éviter les contorsions de la mise en page. Je suis également conscient du repeinte synchrone qui se produit toutes les secondes, cela est causé par la jquery.sparkline mais ce n'est pas pertinent pour cette discussion.)
Voici ce que je vois quand j'ai essayé de le profiler. 
.
Que pensez-vous pourrait être à l'origine du grand nombre d'opérations sur les couches?
La propriété CSS will-change: transform sur tous les éléments nécessitant un repeint a résolu le problème avec trop de couches composites pour moi.
J'ai eu le même problème. Je l'ai corrigé en réduisant la taille des images.
Il y avait quelques vignettes dans la liste déroulante. La taille de chaque vignette était de 3000x1800 mais elles ont été redimensionnées par CSS à 62x44. L'utilisation d'images 62x44 réduit le temps consommé pour les "couches composites".
Quelques informations sur le Composite Layers qui peuvent aider
de ce que je vois ici il dit
événement: couches composites
Description: calques d'image composites du moteur de rendu de Chrome.
pour la signification du mot composite de wikipedia
La composition consiste à combiner des éléments visuels provenant de sources distinctes en images uniques, souvent pour créer l’illusion que tous ces éléments font partie de la même scène.
c'est donc le processus de création de la page que nous voyons réellement en prenant la sortie du codage/redimensionnement des images, en analysant le code HTML et en analysant le CSS pour créer la page finale affichée.