-
ID:6wlVgr さんの質問

【CSS3アニメーション】と【表示してある要素数】に関して

現在製作中のWEBサイトがあります。
その挙動について、ご質問があり記入させていただきます。

以下、詳細になります。

  1. ...1ページに画像100枚があるWEBサイト
  1. ...画像のclassに:hoverで、CSS3でアニメーション
  1. ...ページ最下部までスクロールすると、100枚の画像をappendします。（計200枚）
  1. ...この調子で、永遠に終わらないページを作ります。（どんどん画像が増える）
  1. ...画像が増えれば増えるほど、:hoverのCSS3アニメーションがカクついてしまいます。

コンテンツがどんどん追加されるので、高さも数万pxになりますし、画像の読み込みなどに負荷がかかるのは理解できるのですが、

:hoverしている要素は、1つなのに、その処理が恐ろしくカクツキ出します。

GPUやFPSも、ある程度チェックしてみましたが、遅くなりますが、その仕組みがわかりません、、

これは、もうデバイス自体の処理能力の問題でしょうか？

みんなの回答 5 件

ID:1cm8FM さんの回答

自分が質問するのに「ご質問があります」っておかしくね？
ID:t9rDNH さんの回答

DOMによってタダの平面的な絵ではない構造的な高機能が実現できているわけで、その要素が増えれば増えるほどhoverの実現のために必要な処理が増えるのは当たり前。DOM自身（ブラウザ自身）を実装する立場で考えたら分かるよね？
ID:6wlVgr

ご回答ありがとうございます。

確かに、そのとうりに思います。

噛み砕いて言うと、要素が増えれば増えるほど、どの要素がhoverされているかの判別に負担がかかる為、カクツクという理解で正しいでしょうか？

ID:t9rDNH

残念ながらこっち方面の専門じゃないから「正解」かどうかは断言しないけど、そういうことでしょ。ところで、複数ブラウザでの比較はやってないの？　ブラウザによってはうまいこと実装してて、それほど酷くならない可能性もあるわな。（もっと酷い可能性もあるけど）

ID:6wlVgr

もちろん、試しました。
多少バラツキはありますが、主要ブラウザ全体で、遅くなることは変わりませんでした。
コメ主さんがおっしゃってることが一番、しっくりきます。
FPS Meterでメモリの使用率もみたのですが、使用率は変わらないのですが、FPSはどんどん遅くなる、、という感じでした。謎です。
一番わからないのが、CSS3のアニメーションとjqueryのアニメーションでは、ブラウザのどの部分で処理されているのかということです。
ちょっと、別な方法を試してみたいと思います。

ID:t9rDNH

一般には計算量の多い重たい処理、とメモリの消費量、は直接の関連はないよ。だからメモリ消費は少なくて重い処理が存在することは謎じゃないよ。

ID:6wlVgr

なるほどですね。それは知りませんでした。ありがとうございます。
一応、対応としては、要素をどんどん追加するのではなく、ブラウザ外に出て行った画像は、どんどん表示内要素の下に移動していって、エンドレスのように見せるという感じで要素数を増やさないで対応しました。計算が大変でしたが、ひとまず、、。ありがとうございました。

ID:/ErgCb さんの回答

pinterestとか、どうやって処理してるんだろう。気にならない？Filterizrのプラグインとか。

Comparing jQuery Grid Plugins: Masonry vs Isotope vs Packery vs ...

http://www.fusioncharts.com/blog/2014/09/comparing-jquery-grid-plugins-masonry-vs-isotope-vs-packery-vs-gridster-vs-shapeshift-vs-shuffle-js/
ID:6wlVgr

ご回答ありがとうございます。
pintarestににているページです。ただ、pintarestのように、読み込んで表示すること自体は、問題なく、画像も1つ10KB以下の小さい画像なので、1Sもかからず、表示できるのです。
問題は、その1つをhoverした時の処理が、全体の画像数が増えると、一気に重くなってしまいます。

ID:kzRZrQ さんの回答

とりあえず、対処として考えられるのはこんなところか。

  • appendの処理をループ内でしていないかチェック。
  • scrollイベントを間引く。（何らかの処理が同時に走ったりすると重くなる）
  • GPU処理がかかってたら解除する。（GPU処理はアニメーションを滑らかにする効果がある反面、処理する要素が多いと逆に負担になる）
  • グラデーションやopacityはCSSの処理のなかでも重い部類なので、背景等で使ってたらやめる。
  • CSSアニメーションする要素（hoverでtransitionしてる場合はそっちも）にwill-changeを指定（対応ブラウザが少ないし、恐らく効果もおまじない程度）
  • developer toolsのTimelineでJSharpをチェック。
ID:kzRZrQ

単純に:hoverのときだけカクツクでのあれば、JS関連の項目は関係ないかも。

ID:6wlVgr

ご回答ありがとうございます。
私も、JSと干渉しているのかと思い、すべてのスクリプトを取って、ベタ打ちで、500枚画像を並べた場合と、1000枚並べた場合を試したのですが、やはり、1000枚並べた方が、圧倒的にhoverの処理がおそくなりました。

ID:kzRZrQ

じゃあ、この辺を一通り対処した状態でFPSを測ってみるべし。
.
- GPU処理がかかってたら解除する。（GPU処理はアニメーションを滑らかにする効果がある反面、処理する要素が多いと逆に負担になる）
- グラデーションやopacityはCSSの処理のなかでも重い部類なので、背景等で使ってたらやめる。
- CSSアニメーションする要素（hoverでtransitionしてる場合はそっちも）にwill-changeを指定（対応ブラウザが少ないし、恐らく効果もおまじない程度）

ID:6wlVgr

ありがとうございます。
一応、対応としては、要素をどんどん追加するのではなく、ブラウザ外に出て行った画像は、どんどん表示内要素の下に移動していって、エンドレスのように見せるという感じで要素数を増やさないで対応しました。
100個の画像は、同じものの繰り返しだったので。
ただひとつあたりのhover処理に関しては、いただいた部分を再度見直してみます。ありがとうございました。

ID:6BYocZ さんの回答

hoverのリスナー設置しすぎでのメモリ消費が原因なら
jsでtarget判定でクラス付与にしてみるとか
ID:6wlVgr

ご回答ありがとうございます。
私の認識不足ならすいません。現在、試してみたのは、すべてのJSを取って、手打ちで1000枚画像を並べた場合と、500枚の場合。同じクラスの画像にcssで:hoverを設定した時の処理が、やはり、圧倒的に1000枚が遅くなりました。対象の画像は、1枚でどちらも変わらないのですが。

ID:6BYocZ

ttp://un-tech.jp/performance-gpu/
このへんとか参考になるでしょうか
chromeの開発ツールのMore tools>Renderingで
FPS Meterチェック入れるとGPUメモリの使用率とかも見れます

ID:6wlVgr

GPUメモリはチェックしてみたのですが、使用率は変わらないのですが、FPSはどんどん遅くなりました。でも、いただいたサイトすごく参考になります。ありがとうございます。ちょっと、別な方法も試してみます。

最終更新日:2017-02-11 (2,677 views)

関連するトピックス

ページ上部に戻る