するするさせたい：サイボウズ採用情報のアニメーション（その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も高いのが気になる。
transform: translateX() をつかったアニメーションに差し替えると、するするした。
いちおう大丈夫っぽい。ただ格安スマホなどもっとしょぼい端末だと、CPUやGPUがこれ以上に専有されるかもしれない。
iPhoneはどうだろう。iOSデバイス持ってないので試せないのだけどiPhoneさまなら大丈夫だろうと勝手に思って眠ることにする（みんなは試そう）。
他のブラウザの開発者ツール
今回はChrome DevToolsを使った。アクティビティの詳細を見られるので説明に便利なのと、まあみんな使ってるんでしょということで。
ただChromeだけの最適化になってしまったらアレだ。他のブラウザはどうなのか。
FirefoxやSafariのDeveloper Tools/Web InspectorにもふつうにElementsパネルはある。h で要素も隠せる。
Paint flashingもどちらにもある。Firefoxではハケのアイコン、SafariはElementsパネルのパンくず右にあるブラシアイコンで同様のものが見られる。なおFirefoxは色相が常に変わり、Safariでは赤色のハイライトになる。
件のアニメーションはSafariでは真っ赤になった。赤いほうが問題っぽさが増していいかもしれない（Chromeも昔は赤色だったけれども）。
レイヤー表示。Safariの場合はPaint flashingアイコンの横にある四角が4つのアイコンを押すと表示される。
FirefoxではDeveloper Toolsからできない。about:config から layers.draw-borders を true にすればいける。ちょっと面倒。Bug 877567なのかな。
で、肝心なタイムライン。Firefox, SafariどちらにもあるんだけれどChromeほど高機能ではない。Chromeが強すぎるというのはある。
ただ今回くらいのレベルであれば、そんな問題はないかも。数秒ほど録る、繰り返しを見つける、時間を見てみる。これでそれなりにわかるかなあと。描画領域についてはとりあえず will-change: transform をコンソールからぶっこんでレイヤー作って確かめるとかね。いろんなサイトのタイムラインを録ってみて調べるうちに感覚が養えてくると思うので、いろいろ見てみてほしい。
EdgeはWindows環境が手元にないのでわからないのだけど、ドキュメンテーションを見る限りは結構強力そう。
Safariでするする
さて、Safariでもとのページのタイムラインを録ってみた。
スタイル計算と描画、タイマー発火が頻繁そうなことがわかる。
Layout & Renderingという行を押したら詳細が見られる。Paintではその領域を見られるけど、これはinvalidationなのかな。ちょっとわからない。
Web Inspectorに新しく入ったRendering Framesモードでも見てみた。
1フレーム目にタイマー、2フレーム目に計算・描画が行われてて面白い。
さてするするさせてみる。transform を使ったコードをぶっこんでまたタイムラインを録ってみる。
するするした。同じ方法が使えるようだ。
なお、CSSアニメーション版のレイヤーを見てみると謎の水色の枠がでてきた。
こいつはなんなんだろう…Web Inspectorはドキュメンテーションがあまりなく、さらには更新されてないのでけっこうつらい。ソース読むしかないのか……
Firefoxでするする？
Firefoxでもみてみる。Firefoxのタイムライン（Performance）ツールは複数のタイムラインを保持できるのがうれしい。
現行のサイトを録ってみた。
あら、そのままでも60FPSに近い。Composite Layersにけっこう時間をとられているね。
Paintもすこしかかっている。描画範囲わからないのかな。もうちょっと調べないといけない。
CSSアニメーションに置き換えたものがこちら。タイマーはなくなったけど、ちょっとところどころフレームが落ちてしまっている。Composite Layersの負荷が変わってないので、もともと負荷が高いのかな。
あとスタイル再計算も走っている。Restyle HintがCSSアニメーションとなっているので、Geckoだとスタイルの再計算が走ってしまうのかな。ふむー
ただ見た目をいうと、CSSアニメーションのほうがするするはしているんだよね。データには現れづらいところなのかな…ちょっと心残り。
もうちょっとなんか考えてた気がするんだけど、メモしてなかったのともう書き疲れたのでこのへんで。
みんなもするするさせるんだよ。
