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

第2回 Webの「Response(応答)/Idle(非実行)」を改善しよう

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

はじめに

人間は生活の中で,多くのアクションを起こし,多くのリアクションを受け取ります。それがどのようなカラクリで動いているのか知らなくても,期待するリアクションが起きれば,人間は満足するのです。

水道の蛇口は「ひねる」というアクションに対して「水がでる」というリアクションを起こします。そして,壁のスイッチは「押す」というアクションに対して「灯が点く」というリアクションを起こします。そこに人間は,何の不満も抱いたりはしないでしょう。

とはいえ,コンピュータはリアクションが起きるまでに,必ず遅延が発生してしまいます。コンピュータは,入力というアクションから出力というリアクションまでの間に,何かしらの処理を行わなくてはいけないからです。この処理が長引くほど,リアクションは遅れ,人間は違和感や不快感を持ちます。

Webのパフォーマンス基準であるRAILでは,こうしたリアクション,すなわち「Response(応答)⁠について,100ミリ秒未満であることを推奨しています。また,処理が完了するタイミング,すなわち「Idle(非実行)⁠となるまでの時間が,100ミリ秒未満になることを推奨しています。

何も難しいことはありません。この2つのキーワードは,本質的には同じことを意味しています。要はブラウザの仕組み上どうしても発生しがちな「ブロッキング」が,100ミリ秒未満で終わるようにすべきだ,と言っているだけのことです。

ブロッキングとは,あるタスクが動いているがために,別のタスクが動けなくなる状態のことです。ブラウザには,このような状態に陥るポイントが所々に存在し,最適化することが求められています。

シングルスレッドであるがゆに生じたブロッキング問題

まずはJavaScriptのシングルスレッド問題と,その対処方法を紹介します。そのためにまずはブラウザの仕組みを,ざっくりと把握してみましょう。

ブラウザは,通信処理や画面上への描画といった低レイヤーなもの以外は全て,1つのスレッドで動作します。HTMLやCSSのパース,レイアウト処理,JavaScriptの実行といった,あらゆる処理は同じ時間に1つだけ実行されるのです。ブラウザを取り巻く様々な技術は,この前提があるからこそ成り立っています。

図1 ブラウザの仕組み

図1ブラウザの仕組み

世の中にはブラウザのレンダリングエンジン以外にも,様々なエンジンが存在します。ゲームエンジンもそうですし,OSも広義ではエンジンと捉えることができます。そしてその全てに共通して言えることですが,リアルタイムにデバイスからのフィードバックを必要としないような,それこそ,ブラウザのようなUIのイベントやレンダリングを中核とするようなエンジンは,シングルスレッドで動くにようにするのが一番シンプルになります。

それは,ブラウザが持つ機能をシンプルに,そして直感的なものにするため,開発者である我々も幸せになれます。ただ,当然ですがそこには弊害もあります。

たとえば,JavaScriptで非常に重い処理を行っているとします。その処理が完了するのには時間がかかります。同じ時間の中で実行できるタスクは1つであり,完了するまで他のタスクは処理されないため,他のタスクには長い待ちが生じます。ユーザのイベントを受け付けて別の処理を行ったり,レイアウトを変更して再描画するといった処理は行えません。

また,JavaScriptで処理を続けている間,ユーザは何のリアクションも受け取れません。古いWindowsだと,ウィンドウ内が真っ白になることもあります。そうでなくても,反応までに時間がかかると,ユーザはアクションが成功しているのかがわからず不安となり,再びボタンを押してみるなどのリトライを試みます。

ではこの重いJavaScriptの処理を,どのように扱えば良いのでしょうか。100ミリ秒未満に抑えるには,どのような対策が必要でしょうか。

著者プロフィール

川田寛(かわだひろし)

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

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

コメント

コメントの記入