Tester si L'accélération matérielle a été activée pour une animation CSS?

Question

Tester si L'accélération matérielle a été activée pour une animation CSS?

Comment puis-je savoir (à des fins de test) Si L'accélération matérielle a été activée pour une animation CSS?

J'ai le code suivant qui agrandit essentiellement un élément et le rend plein écran (sans utiliser L'API fullscreen HTML5). Il fonctionne comme une tortue asthmatique bégaiement sur la plupart des mobiles lors de l'utilisation d'une animation jQuery, donc j'ai utilisé CSS3 à la place.

Voici l'exemple jsFiddle:

$("#makeFullscreen").on("click", function() {        
			
    var map = $("#map"),
        mapTop = map.offset().top,
        mapLeft = map.offset().left;
    
    $("#map").css({
        "position": "fixed",
        "top": mapTop,
        "left": mapLeft,
        "width": map.outerWidth(true),
        "height": map.outerHeight(true)
    });
    
    setTimeout(function(){map.addClass("fullscreen")},1);
    
    return false;        
});

.mapContainer {    
    width: 150px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}

.map {  
    background: #00f;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}
.fullscreen {
    -webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    top: 0 !important;
    left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

#makeFullscreen {
    margin-top: 20px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mapContainer">
    <div id="map" class="map">
        <button id="makeFullscreen">Make Fullscreen</button> 
    </div>
</div>

Cela ajoute une classe et l'élément transitions d'un état à l'autre à l'aide d'une transition CSS. C'est plus rapide que jQuery mais il est toujours stuttery sur iOS et android.

Mais j'ai lu ici {[18] } que vous pouvez forcer la transition à être accélérée en utilisant le GPU en spécifiant une transformation 3d qui ne fait essentiellement rien, comme ceci:

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

Cependant, après avoir ajouté cela à mon CSS, Je ne vois aucune amélioration visuelle.

La Question Alors...

Est-il un moyen de voir si l'accélération matérielle a été activé via les outils de développement dans n'importe quel navigateur? Je n'ai pas besoin de détecter cela avec un script, je veux juste savoir à des fins de test.

25

css css-animations css3 hardware-acceleration jquery

demandé sur Chris Spittles 2014-10-14 13:07:30

1 réponses

score 69 · Answer 1

Vue d'ensemble

Une transition de propriété CSS sur un élément est accélérée par le matériel si toutes ces conditions sont remplies:

la composition de couche accélérée par le matériel est activée dans le navigateur
la propriété CSS en cours de transition est accélérable
L'élément a reçu sa propre couche de composition

Généralement, les exigences pour ces conditions sont:

les options d'accélération matérielle pertinentes doivent être activées, et les pilotes GPU et graphiques de l'appareil ne doivent pas être mis sur la liste noire
Seulement la composition des propriétés CSS (opacity, transform: translate / scale / rotate, etc) sont acceleratable
chaque navigateur a des raisons spécifiques pour décider de donner à un élément sa propre couche de composition (ou il peut être forcé en utilisant un hack" go faster " comme transform: translate3d)

Composition de couche accélérée par le matériel

Pour savoir si cette option est activée:

Chrome

1. Général accélération

aller à chrome://settings
Cliquez sur le bouton+ afficher les paramètres avancés
Dans le Système section, inspecter l'état de la Utiliser l'accélération matérielle si disponible case

Si l'accélération est activée, alors:

2. Composition accélérée

aller à chrome://gpu
Dans le Fonction Graphique Statut section, inspecter la valeur de Compositing. Ce sera l'une des opérations suivantes:
- accélération Matérielle
- Logiciel uniquement, accélération matérielle indisponible

Plus de détails sur le logiciel compositeur de la docs :

Dans certaines situations, la composition matérielle est irréalisable, par exemple si les graphiques de l'appareil les pilotes sont sur la liste noire ou le périphérique n'a pas entièrement de GPU. Pour ces situations est une implémentation alternative au moteur de rendu GL appelé le SoftwareRenderer

(Note: Chrome a également un Legacy software Rendering Path , qui est " toujours persistante à partir de mai 2014, mais sera bientôt supprimé entièrement en Blink.")

Voici un excellent article avec plus d'informations: rendu accéléré dans Chrome .

Firefox

1. Accélération générale

allez dans les préférences de Firefox
accédez à l'ongletavancé
aller au général sous-onglet
Vérifiez l'état de la case à cocherutiliser l'accélération matérielle lorsqu'elle est disponible

Si l'accélération est activée, alors:

2. Accélération de couche

aller à about:config
rechercher layers.acceleration.disabled

Si l'accélération du calque est activée (si la valeur est false), alors:

3. Windows accéléré par GPU

aller à about:support
Dans le Graphiques section, inspecter la valeur de GPU Fenêtres Accélérées

Si elle ne commence pas par 0/, et une API de rendu est affichée (par exemple. OpenGL, Direct3D), puis l'accélération GPU est active.

Safari

activez le menu de débogage de Safari en exécutant cette commande dans le Terminal:
defaults write com.apple.Safari IncludeInternalDebugMenu 1
ouvrir (ou redémarrer) Safari
Dans Safari Debug menu, inspecter l'état de la Désactiver l'Accélération de Compositing option dans le Dessin/Compositing Drapeaux sous-menu

Propriétés CSS Accélérables

Les seules transitions de propriétés CSS qui peuvent être accélérées par le matériel sont celles qui se produisent dans l'étape compositing du processus de rendu. Par exemple:

opacity
transform: translate et ses amis: translateX, translateY, translateZ, translate3d
transform: scale et ses amis: scaleX, scaleY, scaleZ, scale3d
transform: rotate et ses amis: rotateX, rotateY, rotateZ, rotate3d

Pour bénéficier pleinement de l'accélération, aucune propriété non compositing ne doit être transitionnée. Par exemple:

une transition sur juste {[3] } peut bénéficier pleinement de l'accélération (car la couche de l'élément peut simplement être recomposée par le GPU).
une transition sur transform: translate et widthne recevra presque aucun avantage de l'accélération (car une transition surwidth provoque la repeinte de la couche de l'élément par le CPU pour chaque image d'animation).

Couches de composition et bordures colorées

Le moteur de rendu du navigateur décide (en fonction des préférences de l'Utilisateur, des styles CSS, etc.) de donner ou non à un élément sa propre couche de composition.

Par exemple, Chrome a cette liste de raisons, et a aussi cette option dans chrome://flags:

La Composition de calques de rendu, avec des transitions
En activant cette option, les RenderLayers avec une transition sur opacity, transform ou filter auront leur propre couche composée.

Si un élément n'a pas reçu sa propre couche, aucune transition CSS sur cet élément ne sera accélérée.

transform: translate3d (le hack "go faster") force généralement un élément de disposer de son propre calque.

Mais même si un élément a reçu sa propre couche, les transitions sur les propriétés non-compositing(width, height, left, top, etc) ne peut toujours pas être accéléré , car ils se produisent avant l'étape de composition (par exemple. dans les étapes de mise en page ou de peinture). @ChrisSpittles c'est pourquoi vous n'avez vu aucune amélioration visuelle après avoir ajouté transform: translate3d.

La plupart des navigateurs peuvent afficher des bordures colorées autour des couches composées, pour les rendre faciles à identifier pour le développement/débogage:

Chrome

L'affichage des bordures des calques composés peut se faire de l'une des deux façons suivantes:

pour toutes les pages - allez dans chrome://flags et activez les bordures de calque de rendu composites ("rend une bordure autour des calques de rendu composites pour aider au débogage et à l'étude de la composition de calque"). Vous aurez besoin de relancer Chrome pour que cela prenne effet.
pour les pages individuelles - ouvrez les outils de développement, puis Dans le tiroir, sélectionnez L'onglet rendu et activez afficher les bordures de calque composées . Maintenant, l'ouverture des outils de développement sur n'importe quelle page entraînera l'affichage des bordures de couche sur cette page.

Déclenchez maintenant la transition CSS sur l'élément. S'il a une bordure colorée, alors il a sa propre couche de composition.

Les couleurs de bordure et leur signification sont définies dans debug_colors.cc. Plus de détails ici et ici.

Firefox

À dessine les bordures des calques composés:

aller à about:config
recherchez layers.draw-borders et activez-le

Déclenchez maintenant la transition CSS sur l'élément. S'il a une bordure colorée, alors il a sa propre couche de composition.

Les couleurs de bordure et leur signification sont définies dans Compositor::DrawDiagnosticsInternal.

Safari

(Cela ne fonctionne pas pour moi avec Safari 7.0.3, mais il semble que cela ne fonctionne que pour certaines personnes, récemment en année.)

Lancez Safari depuis le Terminal avec la variable d'environnement booléenne CA_COLOR_OPAQUE définie:

$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari

Méthode Alternative:

$ export CA_COLOR_OPAQUE=1 
$ /Applications/Safari.app/Contents/MacOS/Safari

Apparemment, les couches accélérées par le matériel devraient être colorées en rouge. Plus de détails ici et ici.

mise à Jour:

Voici une autre méthode qui fonctionne pour moi dans Safari 7.0.3 (crédit à David Calhoun):

dans le menu Debug de Safari, activer afficher les bordures de composition dans le sous-menu drapeaux de dessin/composition

Déclenchez maintenant la transition CSS sur l'élément. S'il a une bordure colorée, alors il a sa propre couche de composition.

Références

Pour plus de détails, consultez ces excellents articles:

Las etiquetas más populares

Tester si L'accélération matérielle a été activée pour une animation CSS?

La Question Alors...

1 réponses

Vue d'ensemble

Composition de couche accélérée par le matériel

Chrome

1. Général accélération

2. Composition accélérée

Firefox

1. Accélération générale

2. Accélération de couche

3. Windows accéléré par GPU

Safari

Propriétés CSS Accélérables

Couches de composition et bordures colorées

Chrome

Firefox

Safari

mise à Jour:

Références