サイボウズの採用情報ページを見ていた。

• サイボウズ | 採用情報（新卒・キャリア）

といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。

Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。

というわけで、何が起こっているのかを調べてみようかと。

アニメーションの実装を調べる

あとのことを考えて、Chrome DevToolsを使う。

まず、該当の流れるアイコンのところで右クリックしてinspectする。するとElementsパネルで、<div class="icon"> という要素がハイライトされる。div.icon には style 属性がついていて、そこにセットされた background-position の値が絶えず変化しているのが見える。

というわけで、背景画像の位置をJavaScriptで逐次書き換えるっていう、クラシックなアニメーションの実装方法なのがわかる。

使われているJavaScriptファイルのソースを見てみる。.icon で検索すると見つかった。

var loopIcon = function(){
  $(this).css({backgroundPosition:'0'});
  $('.kintone .icon').animate({backgroundPosition:'-1680px'}, 1680*36, 'linear', loopIcon);
}

どうやらjQueryでやっているみたい。で、こういうJavaScriptで逐次CSSを書き換えていくアニメーションにはたいてい描画絡みの問題がある。

描画されている箇所をみてみる

描画について見てみる。

DevToolsを開いた状態でエスケープキーを押すと、下からコンソールのタブがついたパネルが出てくる。そのコンソールタブ左にある三点メニューから「Rendering」をチェックするとRenderingタブが増える。そのタブの中にある「Enable paint flashing」をチェックすると、描画の変化する箇所に緑色の枠がつく。

ずっと枠がついたままなので、この箇所が絶えず描画されているのがわかる。

タイムラインをとってみる

こいつがパフォーマンスにどれくらい影響しているのか、もうちょっと見てみる。
Timelineパネルを開いて、左上にある黒丸を押して2〜3秒ほど録る。

以下はMacBook Air 11" （mid-2011モデル、メモリ4GB）上のChrome Canary (M52)、ちょこちょこブラウザやエディタを開いた状態で録ったもの。記録する際に、PaintとScreenshotのみをチェックした。

とれたけどいろいろ情報が多いので、まず上のオーバービューと呼ばれる箇所を見る。その下のフレームチャートなどはあとから見よう。

オーバービューは、フレームとFPS、CPUのアクティビティ、スクリーンショットを見せて大まかなところを把握するためのところ。

フレームのところにあるがたがたした緑色の領域はFPSで、上端が60FPS。その上に見られる赤い線は60FPSを切ったフレームで、いわゆる「フレーム落ち」を指している。“jank” と呼ばれるやつね。
これを見るとかなりのところでジャンクが発生している。環境によってはほとんど赤いものを見ないかもしれないけど、今回はこうなった。

さて、フレームの下、CPUのアクティビティを見る。緑色の山にちょこちょこと紫や緑が見られる。
FPSと違って、こちらは山が低い方がいい。高いところではなにがおこっているか。

フレームチャートを見る

CPUアクティビティのところで、ちょっとパターンが見られる箇所があった。

ここを詳しく見てみよう。オーバービューのところで範囲選択すると、オーバービューの下にあるフレームチャートが該当する範囲のものに切り替わる。

一番下のペーンに、アクティビティごとにかかった時間が円グラフで記されている。見ると“Painting”と“Other”が多い。後者はさておいて、描画関連の処理に1割弱の時間をもってかれていることになる。

本当にそこなのか、隠してみる

さて、タイムラインをとってみてなんとなく、アイコン周りの描画の負荷が高くてフレームが落ちているように感じるものの、それが直接の原因なのか確かめていなかった。どうすればいいか。

隠せばいい。もういちどElementsパネルに戻って、div.icon を選択し、h キーを押す。そうするとアイコンがぱっと消えてしまう。

変なclassがついたけど、中身は visibility: hidden を指定しているだけ。こうすると描画関連の処理が行われなくなる。ではこの状態でタイムラインを録ってみよう。

全体的にいろいろ薄くなった。ジャンクな赤色も見えない。FPSもなくなっているのはアイドル状態になったから。つまりは活動しなくてもよくなったから。

---

というわけで、アイコンが描画に負担をかけてるのがわかった。では負担をかけない、するするするアニメーションにはどう作り変えていけばいいだろうか。そいつは長くなったので次回に。