</p>

<p>5分でわかる
bxスライダー5つ動かしたらiPhoneでピカピカちらついたんだけど
transform:translate3d(0,0,0)をちらつく箇所に指定したら直った
なぜだ</p>

<p>答えは
tranlate3dを指定するとGPUで処理するようになるからだった</p>

<p>説明
CPUで処理をするアニメーションとGPUで処理をするアニメーションの違い</p>

<p>CPU(GGO)
position:absolut
left:0</p>

<p>こちらは例えるなら画用紙に書いては背景で塗りつぶして書いては移動
ぺらぺら漫画に一枚背景の真っ白な一枚を挟んで移動しているようなもの</p>

<p>GPU(GGO)
transform:transtlate
opacitiyのフェードイン</p>

<p>GPUアクセラーレーションが有効になる=アニメーションのレンダリングをソフトではなくハード(グラフィックチップスが担当になる)</p>

<p>photoshopの背景レイヤーの上にある描画されているレイヤーが移動するようなもの</p>

<p>Android OSが2.3以下はGPUアクセラーレーションが利かない</p>

<p>レンダリング時の負荷によるアニメーションの遅れが一枚真っ白な背景がピカピカの原因</p>

<p>パフォーマンスの違い
css、animationだけで移動
javascriptだけで移動</p>

<p>css、translatetransform
javascriptでtransform</p>

<p>パフォーマンス
ほかのGPUに演算させるプロパティは??</p>

<p>ここで注意
GPUをbodyに指定するとよくないよ
GPUは画像処理にすぐれているのでそのほかの演算がある要素やコンテンツに指定すると結果
パフォーマンス落ちますよ
ブラウザのバージョンによって異なる不要で無駄かもしれないレイヤーを形成しない</p>

<p>・再描画されている箇所に的確に指定</p>

<p>スクロールは??
再描画されているのでは?</p>

<p>GIFアニメーションは?</p>

<p>確かめる方法は?
開発ツールのrectangle</p>

<p>今後のGPUの行方
WebCLでWebデベロッパもGPUやCPUのマルチコアをブラウザ内で有効利用(==並列処理)できるようになる
http://jp.techcrunch.com/2014/03/20/20140319webcl-will-soon-let-web-developers-harness-the-power-of-multi-core-gpus-and-cpus-from-the-browser/</p>

<p>CSS will-changeプロパティについて知っておくべきこと
https://dev.opera.com/articles/ja/css-will-change-property/</p>

<p>transform: translate3d(0, 0, 0);
こうした方法でハードウェア・アクセラレーションを行うと、
合成レイヤーとして知られているものが生成されます。
これは、GPUにアップロードされGPUによって合成されるレイヤーです。
しかし、CSSハックを用いたレイヤー生成は、パフォーマンス・ボトルネックの解消に必ずしも役立ちません。
レイヤーを作らせることでページ表示速度は速くなるかも知れませんが、コストがかかります。
RAMやGPUのメモリ使用量が多くなり(特にモバイル端末では)、
レイヤーをたくさん抱えると悪影響が及びます(特にモバイル端末では)。
ですから、ハックを使うときは慎重に扱わなければなりません。
ハードウェア・アクセラレーションの実行によって本当にページ表示が最適化されるのか、
そしてその操作で新たなパフォーマンス・ボトルネックが起きていないことを確認した上で、
これらのテクニックを使うようにしなければなりません。</p>

<p>transform:transform3dは
cssハックだった!</p>

<p>なぜ3次元の処理を2次元のアニメーションに指定しているのか!!
ブラウザをだましてレイヤー生成を促すCSSハック!</p>

<p>null transoin</p>

<p>まとめ
GPUちゃんと使おうGPU</p>

<p>参考</p>

<p>GPUの可視化
Visualizing WebKit's hardware acceleration</p>

<p>Web制作にGPU処理を取り入れる
https://w3g.jp/blog/studies/web_gpu_adopt</p>

<p>Mobile Safariで2Dアニメーションを実行する時に、本当にtranslate3dを使用すべきなのか検証してみました
http://blog.bluearrowslab.com/smartphone/topicks/663/</p>

<p>&lt;/div&gt;</p>

<p>chromeデベロッパーツール
パフォーマンスの調べ方を完全にマスター</p>

<p>will-changeプロパティ
要素に変更を加える前に前もってブラウザに知らせておけるプロパティ
だが
上述したスタックコンテキストや包含ブロックを生じるような場合以外に、will-changeが要素に直接的な影響を与えることはありません。
レクタングルの操作</p>

<p>例えば、clip-pathとopacityプロパティはいずれも、デフォルト値以外の値を指定した時、対象となる要素にスタックコンテキストを生成します。
包含ブロック</p>

<p>パフォーマンス・ヒットとクラッシュ

(Visited 1 times, 1 visits today)

コメントを残す

メールアドレスが公開されることはありません。