Subscribed unsubscribe Subscribe Subscribe

するするさせたい:サイボウズ採用情報のアニメーション(その3)

Performance Developer Tools Chrome Safari Firefox

サイボウズ採用情報のアニメーションがするするしてないので調べた件、今回は雑記。

  • その1 ― 何が起こっているのか調べる
  • その2 ― 調べながら直しながらするするさせる
  • その3 ― ちょっとしたことや他のブラウザでもするするさせる

描画領域とPaint Flashing

その1でPaint flashingを見たときにはアイコンの周りに枠がついていたのに、その2で描画領域を見たら文書全体で起こっていたたのをふしぎに思ったひとがいるかもしれない。

これはPaint flashingの説明 Hightlights areas of the page that need to be repainted というのをよく読むといいかも。緑色になったところは「再描画が必要になったところ」、paint invalidationを指している。なので変化していない箇所は緑色にならなかったわけだ。

Chromeにおける“Paint”が何を指すかは、Stack Overflowにある回答が詳しい。

モバイルはどうなのか

今回使ったのはふだん使ってるMacBook Air。2011年モデルだしAirだしMacとしてはだいぶしょぼい。それでもなんとかするするさせられた。

ではもっとしょぼい環境はどうなるか。というわけでNexus 5を繋いでリモートデバッグしてみた。 以下通常状態。MacBook Airと比べてCPUの使用率が高い。描画も引き続き高いけど、Scriptingも高いのが気になる。

f:id:myakura:20160515162406p:plain

transform: translateX() をつかったアニメーションに差し替えると、するするした。

f:id:myakura:20160515162413p:plain

いちおう大丈夫っぽい。ただ格安スマホなどもっとしょぼい端末だと、CPUやGPUがこれ以上に専有されるかもしれない。

iPhoneはどうだろう。iOSデバイス持ってないので試せないのだけどiPhoneさまなら大丈夫だろうと勝手に思って眠ることにする(みんなは試そう)。

他のブラウザの開発者ツール

今回はChrome DevToolsを使った。アクティビティの詳細を見られるので説明に便利なのと、まあみんな使ってるんでしょということで。
ただChromeだけの最適化になってしまったらアレだ。他のブラウザはどうなのか。

FirefoxSafariのDeveloper Tools/Web InspectorにもふつうにElementsパネルはある。h で要素も隠せる。

Paint flashingもどちらにもある。FirefoxではハケのアイコンSafariはElementsパネルのパンくず右にあるブラシアイコンで同様のものが見られる。なおFirefoxは色相が常に変わり、Safariでは赤色のハイライトになる。

f:id:myakura:20160515163120p:plain

件のアニメーションはSafariでは真っ赤になった。赤いほうが問題っぽさが増していいかもしれない(Chromeも昔は赤色だったけれども)。

レイヤー表示。Safariの場合はPaint flashingアイコンの横にある四角が4つのアイコンを押すと表示される。

f:id:myakura:20160516063926p:plain

FirefoxではDeveloper Toolsからできない。about:config から layers.draw-borderstrue にすればいける。ちょっと面倒。Bug 877567なのかな。

で、肝心なタイムライン。Firefox, SafariどちらにもあるんだけれどChromeほど高機能ではない。Chromeが強すぎるというのはある。

ただ今回くらいのレベルであれば、そんな問題はないかも。数秒ほど録る、繰り返しを見つける、時間を見てみる。これでそれなりにわかるかなあと。描画領域についてはとりあえず will-change: transform をコンソールからぶっこんでレイヤー作って確かめるとかね。いろんなサイトのタイムラインを録ってみて調べるうちに感覚が養えてくると思うので、いろいろ見てみてほしい。

EdgeはWindows環境が手元にないのでわからないのだけど、ドキュメンテーションを見る限りは結構強力そう。

Safariでするする

さて、Safariでもとのページのタイムラインを録ってみた。

f:id:myakura:20160515172624p:plain

スタイル計算と描画、タイマー発火が頻繁そうなことがわかる。

f:id:myakura:20160515172649p:plain

Layout & Renderingというカラムを押したら詳細が見られる。Paintではその領域を見られるけど、これはinvalidationなのかな。ちょっとわからない。

Web Inspectorに新しく入ったRendering Framesモードでも見てみた。

f:id:myakura:20160515172657p:plain

1フレーム目にタイマー、2フレーム目に計算・描画が行われてて面白い。

さてするするさせてみる。transform を使ったコードをぶっこんでまたタイムラインを録ってみる。

f:id:myakura:20160515173631p:plain

するするした。同じ方法が使えるようだ。

なお、CSSアニメーション版のレイヤーを見てみると謎の水色の枠がでてきた。

f:id:myakura:20160516063943p:plain

こいつはなんなんだろう…Web Inspectorはドキュメンテーションがあまりなく、さらには更新されてないのでけっこうつらい。ソース読むしかないのか……

Firefoxでするする?

Firefoxでもみてみる。Firefoxのタイムライン(Performance)ツール複数のタイムラインを保持できるのがうれしい。
現行のサイトを録ってみた。

f:id:myakura:20160516064037p:plain

あら、そのままでも60FPSに近い。Composite Layersにけっこう時間をとられているね。

f:id:myakura:20160516064046p:plain

Paintもすこしかかっている。描画範囲わからないのかな。もうちょっと調べないといけない。

f:id:myakura:20160516064106p:plain

CSSアニメーションに置き換えたものがこちら。タイマーはなくなったけど、ちょっとところどころフレームが落ちてしまっている。Composite Layersの負荷が変わってないので、もともと負荷が高いのかな。

f:id:myakura:20160516064127p:plain

あとスタイル再計算も走っている。Restyle HintがCSSアニメーションとなっているので、Geckoだとスタイルの再計算が走ってしまうのかな。ふむー

ただ見た目をいうと、CSSアニメーションのほうがするするはしているんだよね。データには現れづらいところなのかな…ちょっと心残り。


もうちょっとなんか考えてた気がするんだけど、メモしてなかったのともう書き疲れたのでこのへんで。
みんなもするするさせるんだよ。