Optimisation des performances d'animation dans WebKit sous Linux

Question

Comment optimiser la compilation d'un navigateur WebKit pour tirer le meilleur parti du GPU?

Arrière-plan

Mon équipe et moi-même travaillons sur la configuration d'une machine sous Linux (CentOS) pour l'affichage plein écran, HTML avec douceur, CSS animations. La boîte est plus que suffisant GPU et CPU de puissance, et est capable de lire ces animations facilement dans Chrome.

Cependant, nous essayons de l'utiliser pur WebKit pour le rendu de ces animations à la fois par l'utilisation de WebKitGTK+ en Python et en compilant WebKit à une simple navigateur à partir de la source.

Statut Actuel

Dans les deux "pure" webkit applications, les animations sont beaucoup plus lent que sur Chrome, qui a fait de nous gratter la tête pour répondre à ce que exactement qui est différent entre les deux. Nous comprenons Chrome utilise Blink, un fork de WebKit, et nous croyons que la différence de performance est due au fait que le Chrome, Safari et d'autres basé sur WebKit navigateurs chaque utilisation de leurs propres graphiques composant distinct de WebKit et Web de Base lui-même, basé sur ce que nous avons lus.

Ce serait génial si on pouvait personnaliser notre WebKit construction même à la moitié de la specs de ce que nous voyons dans Chrome, mais nous ne savez pas par où commencer.

Je me demandais...

1. Est notre hypothèse sur le graphique composant correct?
2. Quelles sont les options disponibles pour nous, pour optimiser les animations CSS performance dans un "pur" navigateur WebKit comme le nôtre?

Answer 1

Je ne suis pas sûr si je peux vous aider avec votre Projet, mais l'une des choses que j'ai appris dernièrement que nous pouvons matériel accélérer graphiques CSS caractéristiques en les déchargeant de la GPU pour de meilleures performances de rendu dans le navigateur.

Pour l'instant la plupart des navigateurs modernes sont livrés avec l'accélération matérielle. Ils le feront quand ils voir que les DOM bénéficient. Un bon indicateur est la transformation 3D.

Disons que vous voulez placer votre DOM avec une position absolue et de l'élever au-dessus du conteneur parent. Au lieu de cela, vous pouvez utiliser -webkit-transform: translate3d(10px,10px,10px); Qui permettra de résoudre dans un rendu 3D, même si nous n'avons pas d'animer les éléments à tous. Même si vous définissez des valeurs nulles, il va encore déclencher le Graphique de l'Accélération.

ASTUCE Si vous voyez un scintillement puis essayez d'ajouter -webkit-backface-visibility: hidden; et -webkit-perspective: 1000;

Maintenant, laisse parler les bases de CSS

Vous devriez savoir que la chose la plus importante à propos de la manière dont les navigateurs LIRE vos sélecteurs CSS, c'est qu'ils les lisent de la droite vers la gauche. Cela signifie que dans le sélecteur ul > li img[alt="test.png"] la première chose est interprété img[alt="test.png"]. La première partie est aussi désigné comme le "sélecteur à clé".

Donc, tout d'abord, les Id sont les plus efficaces, en laissant des universaux, le moins. De sorte que vous pouvez réécrire votre code CSS remplacement de l'mondiales (lorsque ne sont pas vraiment nécessaire) avec les Identifiants.

Une autre façon de ralentir votre navigateur bas se fait par l'ajout du sélecteur global initial. (div#mon-div), quelque Chose que Chrome est en train de faire par défaut sur les inspecter mode. Qui va CONSIDÉRABLEMENT ralentir votre navigateur.

De loin le pire des cas est le Descendant des sélecteurs. Même un sélecteur qui échoue (lorsque le sélecteur ne correspond pas à quoi que ce soit) est mieux que html body div ul li a { }

Une chose de plus, qui est extrêmement utile et propre, c'est les sélecteurs CSS3 (:dernier enfant). Même si ces sélecteurs de nous aider et de rendre notre vie plus facile, ils rip votre Navigateur vers le bas. Vous risquez de ne pas voir la différence de performance sur une petite échelle, mais quand vous les présenter dans les Applications d'Entreprise, vous remarquerez qu'ils ralentissent votre Rendu.

Donc, pour résumer. Je viens de vous dire que le remplacement de tous vos sélecteurs avec des Id et appliquer le style sur chaque élément par son ID fera de votre application super rapide, mais d'un autre côté, il va être un peu bête. Il serait extrêmement difficile à maintenir et non sémantique. Ainsi, vous devriez envisager de remplacer la plupart des sélecteurs d'Id, mais ne sacrifiez pas la sémantique et la maintenabilité pour efficace CSS

Aussi, vous pouvez vérifier un test intéressant ici.

Maintenant que j'y pense, je devrais commencer par le CSS. Eh bien, j'espère que je vous ai aidé, même un peu avec votre Projet. Cheers

Answer 2

Selon Guil Hernandez's article les animations CSS, les transforme et les transitions ne sont pas automatiquement l'accélération GPU, et, au lieu de s'exécuter à partir du navigateur est plus lent logiciel de moteur de rendu. Donc exactement ce force le navigateur à changer de mode GPU? De nombreux navigateurs fournir l'accélération GPU, par le biais de certaines règles CSS.

Exemple:

.cube {
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}