Damien Flandrin

Tutoriels, astuces et conseils sur le développement web par un développeur web

Améliorer la fluidité de votre navigateur avec l'accélération matérielle

il y a 2 ans · 2 MIN DE LECTURE
#CSS 

Il est possible d’améliorer la fluidité de votre navigateur avec l’accélération matérielle de votre ordinateur, c'est-à-dire de déléguer certaines modifications d’une propriété à votre carte graphique afin d’améliorer la fluidité. En effet, peut-être l’avez-vous déjà remarqué et c’est particulièrement frappant sur les appareils mobiles. Lors de grandes animations sur un élément. On peut noter une perte de fluidité ! Sachez qu’il existe deux propriétés qui permettent de forcer l'utilisation de votre carte graphique. transform et will-change. L'avantage de déléguer les animations à votre carte graphique est double, non seulement la carte graphique est mieux disposée à réaliser des animations que votre CPU mais aussi, votre CPU pourra alors se concentrer sur le chargement de votre page ou l'exécution de votre code Javascript, les requêtes externe et interne, ....

Transform

Avec cette méthode, il n’est pas forcément question de transformer notre élément pour forcer l’utilisation de votre carte graphique. En réalité il y a deux méthodes avec transform qui active l'accélération matériel de nos appareils. translateZ ou translate3D. Il suffit simplement de déclarer l’une des deux sans pour autant modifier l'apparence de notre élément pour activer l’accélération matériel.

//Méthode translateZ
.element {
    transform: translateZ(0);
}
//Méthode translate3D
.element {
    transform: translate3D(0,0,0);
}

Will-change

will-change est plus récent et la façon officielle de déléguer des animations à notre carte graphique mais le problème c’est qu’elle est beaucoup moins supporté par nos navigateurs, seulement les navigateurs les plus récents pourront en bénéficier ( plutôt ironique quand on sait que les navigateurs les plus récents sont sur les appareils les plus récents ).

.element {
    transform: scale(2) translate(100,200);
    opacity(0.50);
    will-change: transform, opacity;
}

Cette propriété a pour effet de prévenir votre navigateur que certains éléments auront besoin d'optimisation et d'allouer des ressources à l'avance afin d’être près à réaliser certaine animations.

Attention, cette propriété est à utiliser avec parcimonie. De base votre navigateur optimisé certaines tâches. Si vous utilisez trop souvent cette propriété vous risquez de ralentir votre navigateur plutôt que de l’optimiser.

Compatibilité de will-change

Internet Explorer Edge Firefox Chrome Safari iOS Safari Android
Aucune version Aucune version à partir de la version 50 à partir de la 49 à partir de la version 10 à partir de la version 9.3 à partir d’Android 5

···

Damien Flandrin

Je suis développeur web pour l'agence Carredas, je fais principalement du PHP avec Laravel et Prestashop.

Développeur Web - Damien Flandrin