Maison > interface Web > tutoriel CSS > Utilisez CSS pour activer un exemple de code d'accélération matérielle sur ordinateur et mobile

Utilisez CSS pour activer un exemple de code d'accélération matérielle sur ordinateur et mobile

零下一度
Libérer: 2017-04-22 13:10:29
original
2310 Les gens l'ont consulté

Saviez-vous que nous pouvons utiliser CSS pour activer l'accélération matérielle dans le navigateur afin de permettre au GPU (Graphics Processing Unit) de fonctionner, améliorant ainsi les performances ?

La plupart des cartes graphiques d'ordinateur prennent désormais en charge l'accélération matérielle. Compte tenu de cela, nous pouvons utiliser la puissance du GPU pour rendre notre site Web ou notre application plus fluide.

Activer l'accélération matérielle avec CSS sur ordinateur et mobile

Les animations, transformations et transitions CSS n'activent pas automatiquement l'accélération GPU, mais sont effectuées par le lent moteur de rendu logiciel du navigateur. Alors comment passer en mode GPU ? De nombreux navigateurs proposent certaines règles CSS déclenchées.

Désormais, Chrome, FireFox, Safari, IE9+ et la dernière version d'Opera prennent tous en charge l'accélération matérielle, qui sera activée lorsqu'ils détecteront que certaines règles CSS sont appliquées à un élément DOM de la page, notamment Transformation 3D de l'élément caractéristique.

Par exemple :

.cube
 {
   -webkit-transform:
 translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5,0.5,0.5);
}
Copier après la connexion

Mais dans certains cas, nous n'avons pas besoin d'appliquer des effets de transformation 3D aux éléments, alors que devons-nous faire ? À ce stade, nous pouvons utiliser une petite astuce pour « tromper » le navigateur afin d'activer l'accélération matérielle.

Même si nous ne souhaitons pas appliquer de transformations 3D aux éléments, nous pouvons toujours activer le moteur 3D. Par exemple, nous pouvons utiliser transform: translateZ(0); pour activer l'accélération matérielle.

.cube
 {
   -webkit-transform:
 translateZ(0);
   -moz-transform:
 translateZ(0);
   -ms-transform:
 translateZ(0);
   -o-transform:
 translateZ(0);
   transform:
 translateZ(0);
   /*
 Other transform properties here */
Copier après la connexion

}

Dans Chrome et Safari, lorsque nous utilisons des transformations ou des animations CSS, la page peut scintiller. Le code suivant peut résoudre cette situation :

.cube
 {
   -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
   -ms-backface-visibility:hidden;
   backface-visibility:hidden;
 
   -webkit-perspective:1000;
   -moz-perspective:1000;
   -ms-perspective:1000;
   perspective:1000;
   /*
 Other transform properties here */
}
Copier après la connexion
<🎜. >Dans les navigateurs basés sur des kits Web, une autre méthode efficace est

.cube
 {
   -webkit-transform:
 translate3d(0,0,0);
   -moz-transform:
 translate3d(0,0,0);
   -ms-transform:
 translate3d(0,0,0);
   transform:
 translate3d(0,0,0);
  /*
 Other transform properties here */
}
Copier après la connexion
Les étudiants qui ont besoin d'apprendre le CSS, veuillez faire attention au site Web php chinois

Tutoriel vidéo CSS De nombreux didacticiels vidéo CSS en ligne peuvent. à regarder gratuitement !  

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal