Explication détaillée des propriétés d'animation CSS

• Les propriétés d'animation CSS déclencheront le réarrangement de la page entière, le redessinage, la recomposite de la réorganisation

• La peinture est généralement la plus chère d'entre elles, autant que possible Évitez d'utiliser des propriétés d'animation CSS qui déclenchent la peinture. C'est pourquoi nous recommandons d'utiliser webkit-transform: translateX(3em)  au lieu de left: 3em  dans les animations CSS, car left déclenchera en plus la mise en page et la peinture, tandis que webkit-transform ne déclenchera que la composition entière de la page <.>

div {   -webkit-animation-duration: 5s;   -webkit-animation-name: move;   -webkit-animation-iteration-count: infinite;   -webkit-animation-direction: alternate;   width: 200px;   height: 200px;   margin: 100px;   background-color: #808080;   position: absolute; }

div {

-webkit-animation-durée : 5s;

-webkit-animation-nom : déplacer; span >

-kit web-animation-itération-compte  : infini; -webkit - animation-direction : alternatif;

largeur : 200px;

hauteur : 200px;

marge : 100px;

fond-couleur : #808080; span >

position : absolu;

}

 

 

 

@-webkit-keyframes move{     from {         left: 100px;     }     to {         left: 200px;     } }

@-webkit-images clés déplacer{

    de {

        gauche : 100px; span>

}

    à {

        gauche : 200px;

    }

}

 

left

 

 

 

 

@-webkit-keyframes move{     from {         -webkit-transform: translateX(100px);     }     to {         -webkit-transform: translateX(200px);     } }

如下图使用将持续触发页面重绘，表现为红色边框:  

@-webkit-images clés déplacer{     de {         -kit Web-transformer : translateX(100px); span>     }     à { span>         -webkit-transformation : translateX(200px);     } }

Pièce jointe : "[Han Shunping] gère facilement la conception Web ( html+css+js)》

Utilisez -webkit-transform comme indiqué ci-dessous. La page sera uniquement réorganisée, affichant une bordure orange :

<.>
• Tableau de comportement des propriétés CSS dans l'animation CSS

Animation CSS3 haute performance

Web mobile haute performance des scénarios doivent être envisagés par rapport au PC. Les facteurs sont relativement de plus en plus complexes. Nous les résumons dans les points suivants : trafic, consommation électrique et fluidité. À l'ère du PC, nous sommes plus préoccupés par la fluidité de l'expérience, mais dans les scénarios riches du côté mobile, nous devons accorder une attention particulière à l'utilisation du trafic réseau des stations de base des utilisateurs et à la consommation électrique de l'équipement.

Concernant la fluidité, elle se reflète principalement dans l'animation front-end. Dans le système d'animation front-end existant, il existe généralement deux modes : l'animation JS et l'animation CSS3. L'animation JS est une solution qui utilise JS pour réécrire dynamiquement les styles afin d'obtenir des capacités d'animation. C'est une solution recommandée pour les PC compatibles avec les navigateurs bas de gamme. Côté mobile, on choisit l'implémentation native du navigateur avec de meilleures performances : l'animation CSS3.

Cependant, les animations CSS3 seront confrontées à plus de problèmes de performances que les PC dans les scénarios d'appareils mobiles multi-terminaux, principalement reflétés dans le bégaiement et le scintillement des animations.

Il existe actuellement plusieurs façons principales d'améliorer l'expérience d'animation CSS3 sur les terminaux mobiles :

Utiliser autant de capacités matérielles que possible, comme l'utilisation de la déformation 3D pour activer l'accélération GPU

tableau>

 

 

 

如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：

-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

-webkit -transformation : translate3d -sy ">(0, 0, 0) ; span>

-moz-transform : translate3d(0, 0, 0 ); span>

-ms-transform : translate3d( 0, 0, 0);

transformation : translate3d(0, 0, 0 ); span>

 

-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;

-webkit-face arrière-visibilité : caché;

-moz-face arrière-visibilité : caché;

-ms-face arrière-visibilité : cachée ;

face arrière-visibilité : caché;

 

-webkit-perspective : 1000;

-moz-perspective : 1000;

-ms-perspective : 1 000;

perspective : 1 000;

 

 

 

 

 

如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性：

 

tr>

 

#ball-1 {   transition: -webkit-transform .5s ease;   -webkit-transform: translate3d(0, 0, 0); } #ball-1.slidein {   -webkit-transform: translate3d(500px, 0, 0); }     #ball-2 {   transition: left .5s ease;   left: 0; } #ball-2.slidein {   left: 500px; }

#ball -1 {

  transition : -webkit- transformer .5s facilité;

  -webkit-transformation : translate3d(0, 0, 0); span>

}

#ball-1.slidein {

  -webkit-transform : translate3d(500px, 0, 0);

}

 

 

#ball -2 {

  transition : gauche . -cn">5s facilité;

  gauche : 0;

}

#ball-2.slidein {

  gauche : 500px;

}

Remarque : la déformation 3D consommera plus de mémoire et d'énergie. Elle ne doit être utilisée qu'en cas de réels problèmes de performances. C'est également un compromis entre

utiliser le moins possible. box-shadows et gradients

box-shadows et gradients sont souvent des tueurs de performances de page, surtout lorsqu'ils sont utilisés dans un élément en même temps, alors adoptez le design plat.

Gardez autant que possible les éléments animés hors du flux de documents pour réduire la redistribution

position : fixé;

position: fixed; position: absolute;

position : absolu;

 

 

优化 Disposition DOM

我们从实例开始描述这个主题：

 

var newWidth = aDiv.offsetWidth + 10;

var newWidth = aDiv.offsetWidth + 10; aDiv.style.width = newWidth + 'px'; var newHeight = aDiv.offsetHeight + 10; aDiv.style.height = newHeight + 'px';   var newWidth = aDiv.offsetWidth + 10; var newHeight = aDiv.offsetHeight + 10; aDiv.style.width = newWidth + 'px'; aDiv.style.height = newHeight + 'px';

aDiv.style.largeur = newWidth + 'px';

var newHeight = aDiv.offsetHeight + 10;

aDiv.style.hauteur = newHeight + 'px';

 

var newWidth = aDiv.offsetWidth + 10;

var newHeight -o">= aDiv.offsetHeight + 10 ;

aDiv.style.largeur = newWidth + 'px';

aDiv.style. hauteur = nouvelleHauteur + 'px'; span>

Ce sont deux morceaux de code qui sont complètement équivalents dans La différence explicite, comme nous pouvons le voir, réside uniquement dans l’ordre d’exécution. Mais est-ce vraiment le cas ? Voici une version commentée du code, qui illustre d'autres différences :

//Déclencher la mise en page deux fois var newWidth = aDiv.offsetWidth + 10; // Lire aDiv.style. width = newWidth + 'px'; // Écrire var newHeight = aDiv.offsetHeight + 10; // Lire aDiv.style.hauteur = nouvelleHauteur + 'px'; // Écrire // Disposition du déclencheur uniquement var newWidth = aDiv.offsetWidth + 10; // Lire var newHeight = aDiv.offsetHeight + 10; // Lire aDiv.style.width = newWidth + 'px'; // Écrire aDiv.style.hauteur = nouvelleHauteur + 'px';   // Écrire

Peut être trouvé dans commentaires En règle générale, la lecture continue des propriétés offsetWidth/Height et la définition continue des propriétés width/height peuvent déclencher la mise en page une fois de moins que la lecture et la définition d'une seule propriété séparément.

D'après la conclusion, cela semble être lié à la file d'attente d'exécution. Oui, c'est la stratégie d'optimisation du navigateur. Toutes les opérations pouvant déclencher la mise en page seront temporairement placées dans layout-queue. Lorsqu'elles doivent être mises à jour, les résultats de toutes les opérations dans l'ensemble de la file d'attente seront calculés. De cette manière, la mise en page ne peut être effectuée qu'une seule fois, améliorant ainsi les performances.

La clé est l'opération qui peut déclencher layout Sous quelles opérations la mise en page sera-t-elle mise à jour (également appelée reflow ou relayout) ?

Nous partons de l'implémentation du code source du navigateur, en prenant comme exemple le open source Webkit/Blink Pour mettre à jour la mise en page, Webkit utilise principalement deux méthodes : Document::updateLayout et Document::updateLayoutIgnorePendingStylesheets :

void Document::updateLayout() {  ASSERT(isMainThread());  FrameView* frameView = vue();  if (frameView && frameView ->isInLayout()) {  ASSERT_NOT_REACHED();  retour;  }  si (Élément* oe = ownerElement())  oe->document()- > updateLayout();     updateStyleIfNeeded();       StackStats::LayoutCheckPoint layoutCheckPoint;       if (frameView && rendu() && (frameView->layoutPending() || rendu()->needsLayout()))         frameView->mise en page ();       si (m_focusedNode && !m_didPostCheckFocusedNodeTask) {         postTask(CheckFocusedNodeTask::créer());         m_didPostCheckFocusedNodeTask = true;     } }   void Document::updateLayoutIgnorePendingStylesheets() {     bool oldIgnore = m_ignorePendingStylesheets;       if (!haveStylesheetsLoaded()) {         m_ignorePendingStylesheets = true;           HTMLElement* bodyElement = body();         si (bodyElement && !bodyElement->rendu() && m_endingSheetLayout == NoLayoutWithPendingSheets) {             m_endingSheetLayout = DidLayoutWithPendingSheets;             styleResolverChanged(RecalcStyleImmediately);         } else if (m_hasNodesWithPlaceholderStyle )             recalcStyle(Forcer);     }       updateLayout();       m_ignorePendingStylesheets = oldIgnore; }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

从 updateLayoutIgnorePendingStylesheets 方法的内部实现可知，其也是对 updateLayout 方法的扩展，并且在现有的 layout 更新模式中，大部分场景都是调用 updateLayoutIgnorePendingStylesheets 来进行layout的更新。