CSSアニメーションでハードウェアアクセラレーションが有効になっているかどうかをテストしますか？

Question

CSSアニメーションでハードウェアアクセラレーションが有効になっているかどうかを（テスト目的で）に確認するにはどうすればよいですか？

要素を本質的に拡大してフルスクリーンにする次のコードがあります（HTML5フルスクリーンAPIを使用せずに）。 jQueryアニメーションを使用する場合、ほとんどの携帯電話で喘ぎカメのように動作するため、代わりにCSS3を使用しました。

ここに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>

これにより、クラスが追加され、要素はCSS遷移を使用してある状態から次の状態に遷移します。これはjQueryよりも高速ですが、iOSとAndroidではまだ途切れ途切れです。

しかし、私は here を読みました。このように、本質的に何もしない3D変換を指定することで、GPUを使用して遷移を強制的に加速できます。

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

しかし、それを私のCSSに追加した後、視覚的な改善は見られません。

次に質問...

ブラウザーの開発ツールでハードウェアアクセラレーションが有効になっているかどうかを確認する方法はありますか？スクリプトでこれを検出する必要はありません。テスト目的で知りたいだけです。

Answer 1

概観

要素のCSSプロパティ遷移は、次のすべての条件が満たされている場合、ハードウェアアクセラレーションになります。

1. ブラウザーでハードウェアアクセラレーションレイヤー合成が有効になっている
2. 移行中のCSSプロパティは高速です
3. 要素には独自の合成レイヤーが与えられています

一般に、これらの条件の要件は次のとおりです。

1. 関連するハードウェアアクセラレーションオプションを有効にし、デバイスのGPUおよびグラフィックスドライバーをブラックリストに登録しないでください。
2. 合成可能なCSSプロパティ（opacity、transform: translate/scale/rotateなど）のみが高速化可能です
3. 各ブラウザーには、要素に独自の合成レイヤーを与えるかどうかを決定する特定の理由があります（またはtransform: translate3dのような「高速化」ハックを使用して強制することができます）

---

ハードウェアアクセラレーションによるレイヤー合成

これが有効になっているかどうかを確認するには：

Chrome

1.一般的な加速

• chrome://settingsに移動
• +詳細設定を表示ボタンをクリックします
• システムセクションで、使用可能な場合にハードウェアアクセラレーションを使用するチェックボックスのステータスを確認します。

アクセラレーションが有効な場合、次のようになります。

2.高速合成

• chrome://gpuに移動
• Graphics Feature Statusセクションで、Compositingの値を調べます。これは次のいずれかになります。
  • ハードウェアアクセラレーション
  • ソフトウェアのみ、ハードウェアアクセラレーションは利用できません

docs のSoftware Compositorの詳細：

一部の状況では、ハードウェア合成は実行不可能です。デバイスのグラフィックスドライバーが ブラックリスト であるか、デバイスにGPUが完全に不足している場合。これらの状況では、GLレンダラーと呼ばれるSoftwareRendererの代替実装です。

（注：Chromeには レガシーソフトウェアレンダリングパス もあります。これは「2014年5月の時点ではまだ残っていますが、まもなく完全にBlinkから削除されます。」）

詳細は次の記事をご覧ください： Chromeでの高速レンダリング 。

Firefox

1.一般的な加速

• Firefoxの設定に移動します
• Advancedタブに移動します
• Generalサブタブに移動します
• 可能な場合はハードウェアアクセラレーションを使用するチェックボックスのステータスを確認する

アクセラレーションが有効な場合、次のようになります。

2.レイヤーアクセラレーション

• about:configに移動
• layers.acceleration.disabledを検索

レイヤーアクセラレーションが有効な場合（値がfalseの場合）、次のようになります。

3. GPUアクセラレーションウィンドウ

• about:supportに移動
• Graphicsセクションで、GPU Accelerated Windowsの値を確認します

0/で始まらず、レンダリングAPIが表示されている場合（OpenGL、Direct3Dなど）、GPUアクセラレーションはアクティブです。

サファリ

• ターミナルで次のコマンドを実行して、Safariのデバッグメニューを有効にします。
  defaults write com.Apple.Safari IncludeInternalDebugMenu 1
• Safariを開く（または再起動する）
• Safariのデバッグメニューで、描画/合成フラグサブメニューの加速合成を無効にするオプションのステータスを調べます。

---

高速化可能なCSSプロパティ

ハードウェアアクセラレーションが可能な唯一のCSSプロパティの遷移は、レンダリングプロセスの合成ステージで発生するものです。例えば：

• opacity
• transform: translate およびその友達： translateX 、 translateY 、 translateZ 、 translate3d
• transform: scale およびその友達： scaleX 、 scaleY 、 scaleZ 、 scale3d
• transform: rotate およびその友達： rotateX 、 rotateY 、 rotateZ 、 rotate3d

アクセラレーションを最大限に活用するには、非合成プロパティを移行する必要はありません。例えば：

• transform: translateだけでのトランジションは、加速のメリットをすべて享受できます（要素のレイヤーはGPUによって単純に再合成できるため）。
• transform: translateとwidthの両方のトランジションは、アクセラレーションからほとんど利益を得ません（widthのトランジションは要素のレイヤーを引き起こすため）アニメーションフレームごとにCPUによって再描画されます）。

---

合成レイヤーと色付きボーダー

ブラウザのレンダリングエンジンは、要素に独自の合成レイヤーを与えるかどうかを（ユーザー設定、CSSスタイルなどに基づいて）決定します。

たとえば、Chromeには この理由のリスト があり、chrome://flagsにもこのオプションがあります。

トランジション付きのRenderLayersの合成
このオプションを有効にすると、不透明度、変換、またはフィルターに遷移するRenderLayersに独自の合成レイヤーが作成されます。

要素に独自のレイヤーが与えられていない場合、その要素のCSS遷移は加速されません。

transform: translate3d（ 「もっと速く」ハック ）は通常、要素に独自のレイヤーを強制的に適用します。

ただし、要素に独自のレイヤーが指定されている場合でも、非合成プロパティ（width、height、left、topなど）への遷移まだ加速することはできません。これは、合成段階の前に発生するためです（たとえば、レイアウト段階またはペイント段階）。 @ChrisSpittlesこれが、transform: translate3dを追加した後に視覚的な改善が見られなかった理由です。

ほとんどのブラウザーは、複合レイヤーの周りに色付きの境界線を表示して、開発/デバッグのためにそれらを簡単に識別できるようにすることができます。

Chrome

合成レイヤーの境界線の表示は、次の2つの方法のいずれかで実行できます。

• すべてのページ— chrome://flagsに移動し、合成レンダーレイヤーの境界線を有効にします（「レイヤー合成のデバッグと調査に役立つように、合成レンダーレイヤーの周囲に境界線をレンダリングします」 ）。これを有効にするには、Chromeを再起動する必要があります。
• 個々のページの場合—開発者ツールを開いてからドロワーを開き、[レンダリング]タブを選択して、複合レイヤーの境界線を表示を有効にします。ここで、任意のページで開発者ツールを開くと、レイヤーの境界線がそのページに表示されます。

次に、要素のCSS遷移をトリガーします。色付きの境界線がある場合は、独自の合成レイヤーがあります。

境界線の色とその意味は debug_colors.cc で定義されています。詳細 ここ および ここ 。

Firefox

合成レイヤーの境界線を描くには：

• about:configに移動
• layers.draw-bordersを検索して有効にします

次に、要素のCSS遷移をトリガーします。色付きの境界線がある場合は、独自の合成レイヤーがあります。

境界線の色とその意味は Compositor::DrawDiagnosticsInternal で定義されています。

サファリ

（これはSafari 7.0.3では私には機能しませんが、一部の人には機能したようです 最近のように 。）

CA_COLOR_OPAQUEブール環境変数を設定して、ターミナルからSafariを起動します。

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

代替方法：

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

どうやら、ハードウェアアクセラレーションレイヤーは赤に着色する必要があります。詳細 ここ および ここ 。

更新：

Safari 7.0.3で機能する別の方法を次に示します（クレジット David Calhoun ）：

• Safariのデバッグメニューで、描画/合成フラグサブメニューの合成境界線の表示を有効にします。

次に、要素のCSS遷移をトリガーします。色付きの境界線がある場合は、独自の合成レイヤーがあります。

---

参考文献

詳細については、次の優れた記事をご覧ください。

• http://blogs.Adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/
• http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
• http://www.html5rocks.com/en/mobile/optimization-and-performance/
• http://ariya.blogspot.co.uk/2011/07/fluid-animation-with-accelerated.html