モバイル時代を生き抜くためのWebパフォーマンスモデル「RAIL」 ~Response,Animation,Idle,Loadから来る「速さの目安」を知って改善しよう!~

第5回(最終回) Webの「Animation(動き)」を改善しよう

この記事を読むのに必要な時間:およそ 3 分

最終回である今回は,Webの「Animation(動き)⁠の改善方法について紹介します。

そもそもAnimationとは

まず,そもそもAnimationとはどのように実現するのか考えてみましょう。

多くの人は,テレビや映画がどのようにして映像を実現しているのかを理解しているはずです。一言でいえば「目の錯覚」⁠静止画を短い期間で何度も差し替えると,画上の物体が動いているように目が錯覚するのです。そしてこれを,現実世界の動きに似せたいのであれば,差し替える期間を短くしなくてはいけません。

WebのパフォーマンスモデルRAILでは,この動き(Animation)について,約16.67秒で切り替えることを推奨しています。これは一秒間あたり,60回の切り替えが起きる(60fps)ことを意味します。テレビは30fps弱で,ゲームセンターの古い専用機は約50fpsですが,デスクトップPCのディスプレイは約60fpsであり,少なくともコンピューターという枠の中ではデファクト標準です。

ディスプレイ上に何かしらの絵を描画を行っていくうえで,その仕組みは,ゲームであったり業務系のようなアプリであったりと,用途により考え方は異なってきます。エンジニアの方であれば,ダブルバッファリングやら画家アルゴリズムやら,色んな言葉を耳にしたことがあるでしょう。ただこれらは,WebGLであったりCanvasといったディープな技術を使わない限り,隠蔽されていると考えると良いでしょう。

ブラウザは一部の手続きを除いて,基本はシングルスレッドです。最近はパフォーマンス改善により並列化のアプローチが進んでいますが,基本的な部分は変わっていません。その手続は,まるで一本の川のように実行されていきます。⁠JavaScriptの実行」によりDOMの変更があれば,⁠レイアウト」が決定され「ペイント」されます。

ただ,レイアウトやペイントに関係しない処理が多くの時間を奪うと,RAILのI(Idle)やR(Response)に影響が出るため,Chromeブラウザでは描画に関わるタスクを優先させるなどの対策が行われています。実際には一本の川のようにはならないこともあるわけです。なんにせよ,ブラウザはレイアウトを決定してペイント(描画)するというこの一連の流れが起きないことには,ブラウザ上に表示されている内容は変化しません。

では実際に,どのような実現方法があるかについても触れていきましょう。

setTimeout/setIntervalとrequestAnimationFrame(rAF)

最も古典的な手法としては,ブラウザ内のタイマーを使う方法です。代表的なものとしては,setIntarvalなんかを活用して,一秒間に60回のDOM操作を行い,アニメーションを実現するという方法です。この方法では,実際のハードウェアとのリフレッシュレートと同期できないことがあるため,のちのちrequestAnimationFrame(略してrAF)と呼ばれるAPIが考案されました。

古典的なやり方で,CSSのleftを約1秒間で50pxに変える例

var cnt = 0;
function move() {
    cnt ++;
    document.querySelector("hoge").style.left = 50*(cnt/60)+"px";
    if ( cnt < 60 ) {
        setTimeout(move,1000/60); // もしくはrequestAnimationFrame(move)
    }
}

この方法は,古いjQuery/jQuery Mobileのanimateメソッドで活用されていた方法です。animateメソッド自体の呼び出しは一度だけですが,内部的には1/60秒ごとにイベントが実行され,DOM APIを使ってレイアウトを変更し,アニメーションを実現しました。

しかしこの方法,モバイルが主流の時代にはなかなか受け入れられません。

著者プロフィール

川田寛(かわだひろし)

元NTTグループのSE。現在はピクシブ株式会社にて,テクノロジーで世の中のクリエーターをハッピーにする方法を模索しています。「ふろしき」の愛称で,「html5jパフォーマンス部」「日本Cordovaユーザーグループ」といったコミュニティを立ち上げたり,「東京 Web パフォーマンス」というコアなエンジニア向けの勉強会を主催したり,Webの標準化(W3C)の議論にほんの少しだけ横槍を入れてみたり。

Microsoft MVP 2014/2015受賞。HTML5 Experts.jpエキスパート。Developers Summit(翔泳社)ステアリングコミッティー。「Web標準技術ではじめる,Webのパフォーマンス改善(Software Design 2014年5~7月号)」他,多数の技術雑誌への寄稿も行う。

コメント

コメントの記入