À propos de l'impact de la sélection des attributs CSS sur les performances de l'animation-tutoriel CSS-php.cn

À propos de l'impact de la sélection des attributs CSS sur les performances de l'animation

不言

Libérer： 2018-06-25 09:42:32

original

2091 Les gens l'ont consulté

L'article suivant vous apporte une compréhension approfondie de l'impact de la sélection des attributs CSS sur les performances de l'animation. Le contenu est assez bon, j'aimerais le partager avec vous maintenant et le donner comme référence.

De nos jours, la proportion de téléphones mobiles est de plus en plus élevée, et toutes sortes de pages sympas émergent les unes après les autres. Ces effets spéciaux sont indissociables de l'animation CSS. Lorsqu'il s'agit d'animation CSS, les situations dominantes ne sont rien d'autre que ces deux catégories : déplacement et déformation. Lorsque nous écrivons un effet spécial d’animation, comment pouvons-nous améliorer ses performances ? Bien sûr, nous devons d’abord comprendre les concepts de base, tels que le principe de fonctionnement du rendu du navigateur, etc. J’en ai une certaine compréhension après avoir lu des articles pertinents rédigés par plusieurs experts. Je n’entrerai pas dans les détails ici. allez le découvrir. Pour le dire simplement et grossièrement, le but de cet article est en fait de savoir quelles propriétés CSS nous devrions utiliser pour dessiner des animations, ce qui peut améliorer efficacement les performances du navigateur dans le processus de rendu et de dessin.

utilisé respectivement gauche et transformation pour traduire 500 pixels vers la droite en 2 secondes. Le code est le suivant :

<style>   
.box-ps,.box-tf{position:absolute;top:0;left:0;width:100px;height:100px;background-color:red;}   
.box-ps{-webkit-animation:box-ps 2s linear;}   
.box-tf{-webkit-animation:box-tf 2s linear;}   
@-webkit-keyframes box-ps{   
0%{   
left:0;   
}100%{   
left:500px;   
}   
}   
@-webkit-keyframes box-tf{   
0%{   
-webkit-transform:translate(0,0);   
}100%{   
-webkit-transform:translate(500px,0);   
}   
}   
</style>   
<body>   
<p class="box-ps"></p>   
<p class="box-tf"></p>   
</body>

Copier après la connexion

Ensuite, j'ai obtenu les résultats suivants sous chrome Le premier est une capture d'écran utilisant left, et le second est une capture d'écran utilisant transform :

Capture d'écran de la transformation

Évidemment, en mode frame, on peut voir que le nombre d'images gauches est inférieur à celui de la transformation, et en termes de temps de rendu et de dessin, la gauche est bien supérieure à la transformation. Après avoir vu cela, je pense que tout le monde est déjà parvenu à une conclusion.
Utilisons les rectangles de peinture de Chrome pour observer la différence entre les zones de rendu et de dessin pendant le processus d'animation. Le premier est une capture d'écran utilisant la gauche, et le second est une capture d'écran utilisant la transformation :

<.>

Capture d'écran de la transformation

Nous pouvons voir que tout le processus d'animation écrit en utilisant left , le navigateur a effectué un dessin traitement. Relativement parlant, lors de l'utilisation de la transformation, elle n'est dessinée qu'au début et à la fin de l'animation. Par conséquent, la transformation est meilleure pour les performances de l’animation. Quant à la raison, nous allons introduire ici un concept de déclenchement de la re-mise en page :

Lorsque nous modifions certains attributs, s'il s'agit d'attributs liés à la mise en page, la re-mise en page sera déclenchée, provoquant le temps nécessaire au rendu et le dessin pour augmenter sera plus long. Par conséquent, nous devons éviter ces attributs lors de l'écriture d'animations : width, height, margin, padding, border, display, top, right, bottom, left, position, float, overflow, etc.

Les attributs qui ne seront pas restructurés incluent : la transformation (traduire, faire pivoter, mettre à l'échelle entre eux), la couleur, l'arrière-plan, etc.

Par conséquent, lorsque nous écrivons habituellement des animations CSS, nous devons donner la priorité à l'utilisation d'attributs qui ne déclenchent pas de re-mise en page, afin que les effets d'animation que nous affichons soient plus fluides.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Instructions sur l'utilisation de l'effet d'animation CSS3 animé et introduction à la compatibilité du navigateur

À propos de l'utilisation du CSS de l'attribut background-attachment

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

À propos de l'impact de la sélection des attributs CSS sur les performances de l'animation