Pourquoi l'activation de l'accélération matérielle dans CSS3 ralentit-elle les performances?
Je déplace 6000 petits éléments div dans une expérience CSS3 en utilisant une transition de top: 0 à top: 145px pour tester les performances.
En utilisant no l'accélération matérielle se déroule sans encombre sur Google Chrome.
Si j'active l'accélération matérielle via translateZ(0), les performances deviennent horribles.
Pourquoi est-ce si?
Voici mon exemple de code: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html
Mise à jour (2014-11-13): Depuis que cette question attire toujours l'attention tiens à souligner que le problème lui-même semble toujours exister bien que le bégaiement mentionné puisse ne plus être visible dans la démo fournie sur du matériel moderne . Les appareils plus anciens peuvent toujours rencontrer des problèmes de performances.
J'ajoute toujours:
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
Lorsque vous travaillez avec 3d transform. Même "faux" 3D transforme. L’expérience me dit que ces deux lignes améliorent toujours les performances, en particulier sur iPad mais aussi sur Chrome.
J'ai testé sur votre exemple et, autant que je sache, cela fonctionne.
Quant à la partie "pourquoi" de votre question ... je ne sais pas. La transformation 3D étant une norme récente, la mise en œuvre est instable. C'est pourquoi c'est une propriété préfixée: pour les tests bêta. Quelqu'un pourrait remplir un rapport de bogue ou une question et laisser l'équipe enquêter.
Edit par 19 Août 201:
Il y a une activité régulière sur cette réponse, et je viens de perdre une heure à constater que IE10 en a également besoin. Alors n'oublie pas:
backface-visibility: hidden;
perspective: 1000;
La raison pour laquelle l’animation était plus lente lorsque vous avez ajouté le transformation de type null (translateZ(0)) est que chaque transformation 3D nulle crée un nouveau calque. Lorsque le nombre de couches est trop important, les performances de rendu en pâtissent car le navigateur doit envoyer de nombreuses textures au GPU.
Le problème a été remarqué en 2013 sur la page d'accueil d'Apple, qui a abusé du piratage de transformation nul. Voir http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/
Le PO a également correctement noté l’explication dans son commentaire :
Le déplacement de quelques gros objets est plus performant que le déplacement de petits objets avec l'accélération 3D, car tous les calques accélérés 3D doivent être transférés vers le GPU et inversement. Ainsi, même si le processeur graphique fonctionne bien, le transfert de nombreux objets peut poser problème, de sorte que l’accélération par GPU n’en vaut peut-être pas la peine.
Intéressant. J'ai essayé de jouer avec quelques options dans about:flags, En particulier celles-ci:
composition GPU sur toutes les pages Utilise la composition accélérée par le GPU sur toutes les pages, pas seulement celles qui incluent des couches accélérées par le GPU.
Dessin accéléré par GP Activer le dessin accéléré par GPU du contenu de la page lorsque la composition est activée.
2D accéléré sur le GP Permet d'améliorer les performances des balises de type canvas avec un contexte 2D en effectuant un rendu à l'aide d'un matériel GPU (Graphics Processor Unit).
Activé ceux-ci, essayé et échoué lamentablement avec la case à cocher activée (comme vous l'avez fait). Mais alors j'ai remarqué une autre option:
compteur FPS Affiche la fréquence d'images réelle d'une page, en images par seconde, lorsque l'accélération matérielle est active .
Étant donné les points forts de la description du drapeau, je suppose que l'accélération matérielle était en fait active pour moi, même sans la case à cocher cochée, puisque j'ai vu le compteur FPS avec les options ci-dessus activées!
TL; DR: l'accélération matérielle est finalement une préférence de l'utilisateur; le forcer avec la fonction factice translateZ(0) introduira une surcharge de traitement redondant donnant l’apparence de performances inférieures.
Vérifiez chrome: // flags in chrome. Ça dit
"Lorsque la composition par fil de discussion est activée, des animations CSS accélérées sont exécutées sur le fil de composition. Toutefois, des gains de performances peuvent s'exécuter si vous exécutez des animations CSS accélérées, même sans le fil de composition."
Mon expérience est que les GPU ne sont généralement pas plus rapides pour tous les types de graphiques. Pour des graphiques très "basiques", ils peuvent être plus lents.
Vous auriez peut-être obtenu un résultat différent si vous faisiez pivoter une image - c'est le genre de chose que les GPU sont bons à
Notez également que translateZ (0) est une opération en 3 dimensions, tandis que changer en haut ou à gauche est une opération en 2 dimensions