translate3d vs translate performance
Nous savons maintenant tous, en particulier par cet article de Nice , que nous devrions préférer les transformations css à l'animation de la position.
Mais nous avons eu le choix entre translate() et translate3d()...
Lequel est généralement plus rapide?
Ce site ci-dessous exécute des tests comparant translate(), translate3d() et quelques autres propriétés. Selon lui, translate3d() est plus rapide dans la plupart des navigateurs.
L'utilisation de translate3d pousse les animations CSS dans l'accélération matérielle. Même si vous cherchez à faire une traduction 2d de base, utilisez translate3d pour plus de puissance! Donc, 'T3d' est juste meilleur car il dit aux animations CSS de pousser les animations en 3D! C'est pourquoi c'est plus rapide. (La réponse de Cameron Little en est la preuve)
Comme l'a suggéré cameron translate3d devrait être plus rapide dans de nombreux navigateurs, principalement ceux qui utilisent l'accélération matérielle gfx pour accélérer le rendu. en particulier sur le webkit translate3d était le moyen préféré de forcer l'accélération matérielle sur les éléments de page.
bien que dans l'expérience mit parfois il y ait un inconvénient à utiliser les transformations 3D - dans certaines combinaisons versions de navigateur/os (osx + safari je vous regarde) le rendu accéléré par le matériel peut légèrement altérer le lissage des polices ainsi que l'interpolation provoquant ainsi un scintillement mineur ou brouiller. ces situations peuvent généralement être contournées mais doivent être gardées à l'esprit.