J'ai une mise en page fluide sur mon site, avec un élément animé et une transition au survol. Le problème principal est que sur les écrans plus larges (disons, plus larges que 1600px environ), la transition CSS3 au survol devient visiblement hachée, et commence à dévorer de la mémoire. L'utilisation de jQuery pour réaliser cette transition rendrait-elle l'effet plus rapide sur les grands écrans ?
Réponses
Trop de publicités?
EDITAR: Regarde ça test de vitesse d'animation qui vous donne une comparaison en direct de la Plate-forme d'animation GreenSock Les performances de l'application sont comparées à celles d'une poignée d'autres bibliothèques capables de réaliser des animations (dont jQuery). Les performances de TweenLite (GreenSock) sont en fait assez impressionnantes, surtout par rapport aux animations CSS3 de Zepto.
--
En termes de performances, les animations CSS3 sont beaucoup plus rapides que les animations jQuery. ( Source : )
L'énorme différence de performances s'explique par le fait que le processeur CSS du navigateur est écrit en C++ et que le code natif s'exécute très rapidement, alors que jQuery (JavaScript) est un langage interprété et que le navigateur ne peut pas prévoir JavaScript à l'avance, c'est-à-dire savoir quel événement se produira ensuite.
Toutefois, comme indiqué dans l'article, jQuery est bien meilleur en matière de compatibilité avec les navigateurs, car les transitions CSS3 ne sont pas prises en charge par IE<=9
Cesar Canassa
Points
3579
CSS3 est beaucoup plus rapide. Il utilise des animations natives du navigateur au lieu d'une minuterie javascript. Les animations CSS3 peuvent également être accélérées par le GPU.
Mais ce n'est pas une solution miracle. Si votre page est lente, vous devez l'optimiser. L'onglet "timeline" dans Chrome Dev Tools fournit de bons indices sur ce qui cause la lenteur. Vous pouvez également activer l'option "Bordures des couches de rendu composées" sous chrome://flags. Cette option montre quel élément est accéléré par le GPU.
Il est possible que votre transition de survol déclenche l'accélération du GPU dans l'ensemble du site Web, ce qui cause la lenteur. Si c'est le cas, un z-index bien placé pourrait éviter le problème.
