Pourquoi ne l'activation de l'accélération matérielle en CSS3 ralentir les performances?

Question

Je suis passer de 6000 petits éléments div dans un css3 expérience à l'aide d'une transition de l' top: 0 de top: 145px pour le test de performance.

Utilisant pas de matériel pistes d'accélération en douceur sur Google Chrome.

Si j'ai activer l'accélération matérielle via translateZ(0) de la performance devient horrible.

Pourquoi donc?

Voici mon exemple de code: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

Answer 1

J'ajoute toujours :

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Lorsque vous travaillez avec de transformation 3d. Même "faux" transformations 3D. L'expérience me dit que ces deux lignes de toujours améliorer les performances, en particulier sur l'iPad, mais aussi sur Chrome.

J'ai fait le test sur votre exemple, et, autant que je peux dire, il fonctionne.

Comme pour le "pourquoi" de la partie de votre question... je ne sais pas. Transformation 3D sont un jeune standard, de sorte que la mise en œuvre est saccadée. C'est pourquoi il est un préfixe de la propriété : pour les tests bêta. Quelqu'un pourrait remplir un rapport de bug ou de poser une question et avoir l'équipe d'enquête.

L'édition par 19 août 2013:

Il y a une activité régulière sur cette réponse, et je viens de perdre une heure à chercher que IE10 aussi besoin de ce. Alors n'oubliez pas :

backface-visibility: hidden;
perspective: 1000;

Answer 2

Intéressant. J'ai essayé de jouer avec quelques options en about:flags, spécifiquement ceux-ci:

Composition GPU sur toutes les pages Utilise l'accélération GPU de la composition sur tous les pages, et pas seulement ceux qui comprennent l'accélération GPU de couches.

Grâce à l'Accélération GPU Dessin Activer l'accélération GPU dessin de la page contenu lorsque la composition est activé.

Grâce à l'Accélération GPU Canvas 2D Permet de meilleures performances de toile tags avec un contexte 2D par le rendu à l'aide de Processeur Graphique (GPU) matériel.

Permis à ces, il a essayé et a échoué lamentablement avec la case à cocher activé (juste comme vous l'avez fait). Mais ensuite, j'ai remarqué encore une autre option:

Compteur de FPS Montre une page de la cadence réelle, en images par seconde, lorsque l'accélération matérielle est active.

Compte tenu de la mise en évidence dans le drapeau de la description, j'avais spéculer que l'accélération matérielle est, en fait, pour moi, même sans la case cochée depuis que j'ai vu le compteur de FPS avec les options ci-dessus allumé!

TL;DR: l'accélération matérielle est, en fin de compte, une préférence de l'utilisateur; la forçant avec mannequin translateZ(0) introduira redondant de traitement donnant l'apparence d'une baisse des performances.

Answer 3

Mon expericence est que les Gpu ne sont pas généralement plus rapide pour tous les types de graphiques. Pour les très "basic" graphiques, ils peuvent être plus lentes.

Vous pourriez avoir obtenu des résultats différents si vous avez été la rotation d'une image - c'est le genre de chose que les Gpu sont bons à

Considèrent également que translateZ(0) est une opération en 3 dimensions, tout en changeant de haut ou de gauche à 2 dimensions opération

Answer 4

Vérifier chrome://flags dans google chrome. Il dit

"Quand filetée de composition est activé, accéléré les animations CSS exécuter sur la composition du fil. Cependant, il peut y avoir des gains de performance en cours d'exécution avec accéléré les animations CSS, même sans le compositeur fil."

Answer 5

Je vous ai vu deux démo， je pense que je sais la raison pour laquelle vous confus：

1. L'animation des éléments N'utilisez pas de gauche ou en haut pour changer l'emplacement, essayez d'utiliser l'-webkit-transform;
2. Tous les éléments enfants ont besoin pour activer l'accélération matérielle, tels que l'utilisation translateZ () ou translate3D;
3. FPS mesure de la fluidité de l'animation, de votre démo FPS en moyenne que de 20FPS.

Ci-dessus, seulement un avis personnel, je vous remercie!