連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。

ユーザーの体感速度を高めるためのJavaScriptチューニング（後編）

前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。

ユーザーの操作を阻害しない

JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという警告がでることもあります。それほどひどくなくても、ページのスクロールが途中でつっかかったり、アニメーションがとぎれとぎれになったりといったことは、皆さん経験があるのではないでしょうか。こういった状態は、ブラウザのユーザーインターフェース周りの処理とJavaScriptが同じシングルスレッドで動作していることに原因があります。このようなブラウザにおけるシングルスレッドとイベントループという仕組みを先に簡単に解説しておきましょう。

シングルスレッドとイベントループ

通常、ほとんどのブラウザはシングルスレッドで動作しており、JavaScriptのコードや画面の描画、ユーザーの操作（ページのスクロールやマウス操作など）を同時に処理することはできません。そのため、JavaScriptの処理に時間が掛かってしまうと、その間は画面の描画も、ユーザーの操作も止まってしまいます。これらの処理は、イベントループと呼ばれる仕組みで動作しています。

イベントループのイメージ図

イベントループは、イベントを監視する無限ループを持ち、イベント（またはそのコールバック）が発生すると、発生順にそのイベントを処理していきます。ここでいうイベントには、JavaScriptのイベントに加えて、ブラウザのレイアウトイベントや描画イベントなども含まれています。そのため、JavaScriptの実行に時間がかかると、その間に発生した描画イベントなどの他のイベントが実行キューに登録され、いつまでも処理されないということになります。根本的な対応方法は各処理を短くすることですが、このイベントループの仕組みうまく利用すれば、大きな処理を細かく分割することもできます。

setTimeout関数などによる擬似的な並列処理

イベントループの仕組みを考えると、JavaScriptの処理に時間がかかる場合は、その処理をいったん終了させて、別のイベントで続きを実行すれば処理を分割できることになります。この分割した処理の間に、ブラウザの描画イベントなどが発生すれば、正常に画面が更新されることになります。

例えば、JavaScriptで時間のかかる処理の前に、先に見た目を更新するという方法（前回の「ユーザーに素早くインタラクションを返す」）を挙げましたが、次のようなコードでは画面がすぐには更新されず、JavaScriptの実行が終わるまで反映されません。

:javascript:
// id属性に"output"を指定した要素にメッセージを表示するコード
var output = document.querySelector('#output');
output.textContent = 'メッセージ';

// ~なんらかの時間がかかる処理~

これを、メッセージがすぐに画面に反映されてから、時間がかかる処理をするように変更するには、次のように記述します。

:javascript:
// id属性に"output"を指定した要素にメッセージを表示するコード
var output = document.querySelector('#output');
output.textContent = 'メッセージ';

setTimeout(function(){

  // ~なんらかの時間がかかる処理~
}, 0);

setTimeout関数を利用して、時間のかかる処理を実行しています。setTimeout関数は、一定時間後に指定したメソッドを実行する関数ですが、ここでは0ミリ秒後に指定しています。これは、実際にはすぐに実行されるわけではなく、イベントループの実行キューに登録されることになります。そのため、上で表示しているメッセージの描画イベントが先に実行され、その後にsetTimeout関数で指定した処理が実行されます。

このようにして、setTimeout関数を使って、明示的に大きな処理を分割し、擬似的な並列処理を実現することができます。あまり多用するとコードの可読性やメンテンナンス性などが落ちるので注意が必要です。また、setTimeout関数以外でもイベントやコールバックであれば良いので、XMLHttpRequestやその他のイベントハンドラでも同様のことができます。JavaScriptでは、もともとそういった記述が多いので、意図的ではなくても自然とそういったコードになっていることが多いと思います。しかしながら、こういった仕組みを知っておくことでうまく問題が解決できることもありますので、覚えておくと良いでしょう。

実は、このsetTimeout関数を使った特定の処理を実行キューの最後にスタックする方法は、setImmediate関数として標準化が議論されています（仕様はこちら）。現在は、IE9以降で実装されています。

バックグラウンドでJavaScriptを実行する「Web Workers」

HTML5には、setTimeout関数などによる擬似的な並列処理ではなく、本当の並列処理を行うためのWeb Workersという仕様があります。このWeb Workersでは、JavaScriptの処理をブラウザのメインスレッドとは別に、バックグラウンドで処理することができるようになります。そのため、画面の描画やユーザー操作を阻害せずに、時間のかかるJavaScriptを実行することができます。

早速、Web Workersの利用方法を見ていきましょう。Web Workersを利用する場合、バックグラウンドで処理するためのJavaScriptファイルを別に用意します。ここでは、表示するページで読み込むmain.js、バックグラウンドで動作するworker.jsの2つに分けています。それぞれのファイルの内容は、次の通りです。

main.js

:javascript:
// ワーカーの作成
var worker = new Worker('worker.js');

// メッセージ受信イベントの登録
worker.addEventListener('message', function(e){
  console.log(e.data);
});

// メッセージ送信
var message = 'test';
worker.postMessage(message);

main.jsでは、バックグラウンドで動作するWorkerオブジェクト（以下、ワーカー）を引数にworker.jsを指定して作成します。そして、ワーカーとのデータの送受信には、お互いにメッセージをやり取りして行います。ワーカーのpostMessage()メソッドで加工するデータなどを送信し、messageイベントでワーカーから戻ってきたデータを受信します（データはコピー渡しとなります）。送受信できるデータは、基本的な型やオブジェクトなどが可能ですが、Errorオブジェクトや関数（Functionオブジェクト）、DOMノードなどはエラーとなります。

worker.js

:javascript:
self.addEventListener('message', function(e){

  // メッセージを受信して、そのまま返す
  self.postMessage(e.data);
});

worker.jsでは、main.jsと同じようにmessageイベントとpostMessage()メソッドを利用してメッセージをやり取りします。ここでは、messageイベントでデータを受け取り、受け取ったデータをpostMessage()メソッドでそのまま返しています。例えば何らかの処理をする際には、ここでデータを加工して送り返すといったように変更すると良いでしょう。ワーカー自身にアクセスするには、self変数を利用します。また、ワーカー内では、windowオブジェクトやページのDOMツリーにアクセスすることができませんので注意してください。

このようにして、main.jsでは基本的にユーザーインターフェースの作成やワーカーでの処理結果を反映するだけにとどめ、ワーカーで実際の処理をバックグラウンドで行うようにすると、ユーザーの操作を阻害しないような作り込みができます。また、Web Workersを利用することで、自然とビジネスロジックなどのコードを切り分けることできるので、MVCモデルのような構成を取りやすいこともメリットのひとつでしょう。是非、チャレンジしてみてください。

以降は、Web Workersの対応状況や制限事項などを載せておきますので、参考にしてください。

Web Workersの対応状況

デスクトップ向けであれば、IE9を除くすべてのモダンブラウザ（IEはバージョン10より対応）で利用することができます。モバイル向けでは、iOSは対応していますが、残念ながらAndroidの標準ブラウザが未対応です。そのため、Androidに対応するためにはfakeworker-jsなどのPolyfillを利用しましょう。

メッセージで交換できるデータの種類

メッセージで交換できるデータについては、Boolean、Number、Stringオブジェクトなどの基本的な型に加え、Date、RegExp、ImageData、File、Blob、FileList、Array、Objectオブジェクトなども可能です。逆に扱えないデータとしては、Error、FunctionなどのオブジェクトとDOMノード、RegExpオブジェクトのlastIndexプロパティなどです。また、setterやgetter、prototypeなどはコピーされません。詳しくは、Structured Cloneというアルゴリズムで定義されています。

ワーカー内で利用できる機能

ワーカー内では、DOMツリーやwindowオブジェクト、doucmentオブジェクト、parentオブジェクトにアクセスすることができません。ワーカー内で利用できる機能としては、navigatorオブジェクトやlocationオブジェクト（読み取り専用）、XMLHttpRequest、setTimeoutとsetInterval関数、Application Cacheなどです。また、さらに他のワーカーを作成することもできます。ワーカーで利用できる独自の機能には、外部スクリプトをインポートすることができるimportScripts関数などがあります。

おわりに

前編と後編にわたって、ユーザーの体感速度を向上させるJavaScriptのチューニング方法について詳しく解説しました。次回からは、引き続きJavaScriptの高速化をテーマに、DOM操作の最適化について解説していく予定です。お楽しみに！

★「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」を読む★

連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。

ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）

今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。

ユーザーの体感速度を向上させる

一概にJavaScriptの高速化といっても、大きく分けて2つの手法があります。ひとつ目は、実行されるJavaScriptコードを最適化して、個々のコードを高速化することです。大きなボトルネックとなるコードがあれば、効果が高いこともありますが、基本的には数ミリ秒の最適化を積み重ねるものです。

そして、もうひとつは、ユーザーの体感速度を向上させる方法です。JavaScriptの実行速度自体は大きく変わりませんが、ユーザーから見るとあたかもページが早く表示されているように感じます。この方法では、ちょっとしたコードの修正や、基本的な設計変更がWebサイト・アプリの速度を劇的に改善する可能性があります。そのため、まずはユーザーの体感速度を向上させる方法を検討してみると良いでしょう。ユーザーの体感速度を向上させるには、例えば次の3つのものが挙げられます。

• ページを素早く表示する
• ユーザーに素早くインタラクションを返す
• ユーザーの操作を阻害しない（次回で解説します）

以降は、それぞれについて詳しく解説していきます。

ページを素早く表示する

あたり前のことですが、ページを素早く表示することはとても大事です。最初にページにアクセスした際に、ずっと真っ白い画面のままの場合と、少しずつでもコンテンツが表示される場合とでは、ユーザーの体感速度は大きく違います。実は、これにはJavaScriptのコードが大きく影響していることがあります。次のコードを見てみましょう。

:html:
<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- … -->
    <script src="1.js"></script>
    <script src="2.js"></script>
    <script src="3.js"></script>
</head>
<body>
    <!-- コンテンツ -->
</body>
</html>

このコードでは、head要素にscript要素で3つのJavaScriptファイルを読み込んでいます。この場合、すべてのJavaScriptの実行が終わるまで画面の描画が行われず、これらのJavaScriptの実行に時間が掛ると、その分だけ何もコンテンツが表示されない時間が長くなります。このコードを実行した結果をChromeのデベロッパーツールで解析してみると次のようになります。

Chromeのデベロッパーツールで解析したタイムライン（Timelineパネルで記録）

図を見るとわかる通り、1.js～3.jsの読込みと実行が順番に行われ、それが終わるまでの間は、body要素以下の表示が行われません。これは、JavaScript内でdocument.write()メソッドによってHTMLの内容が書き換わる可能性があるため、JavaScriptの実行が終わるまでページの表示がブロックされるためです。では、どのようにして素早くページを表示させるのかというと、次のような位置にscript要素を記述します。

:html:
<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- … -->
</head>
<body>
    <!-- コンテンツ -->
    <script src="1.js"></script>
    <script src="2.js"></script>
    <script src="3.js"></script>
</body>
</html>

よく利用されるテクニックですが、このようにbody要素の最後にscript要素を記述すると、先に表示できるコンテンツを表示し、コンテンツの表示が終わったあとにJavaScriptを実行するようになります。このようにして、ページがすぐに閲覧できるようになり、ユーザーの体感速度を向上することができます。ただし、これらのJavaScriptでユーザーのクリック動作などを設定している場合は、コンテンツが表示されているのにクリックしても反応がない時間などができてしまうので、状況に合わせて使い分けていきましょう。

その他の方法として、script要素にdefer属性とHTML5で追加されたasync属性というものを利用する方法もあります（defer属性は、HTML4で標準化されています）。まずは、先ほどのコードとまったく同じ効果を持つdefer属性について解説します。defer属性は次のように記述します。

:html:
<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- … -->
    <script src="1.js" defer></script>
    <script src="2.js" defer></script>
    <script src="3.js" defer></script>
</head>
<body>
    <!-- コンテンツ -->
</body>
</html>

script要素にdefer属性をつけると、コンテンツの表示が終わったあとに、そのJavaScriptを実行するようになります（正確にはDOMContentLoadedイベントの前になります）。そのため、body要素の最後にscript要素を記述したコードとほぼ同じ結果になりますが、ファイルの読込みは非同期で行われるため、こちらのほうが若干早くなる可能性があります。このdefer属性は、すべてのモダンブラウザ（Chrome、Safari、Opera、Firefox、IEなど）で利用することができます。元々は、IEの独自実装であったため、IEはバージョン4の時代から利用できます。

また、もうひとつのasync属性では、JavaScriptの実行でページの表示をブロックせずに、JavaScriptを非同期で実行することができるようになります。script要素にasync属性をつけると、そのままscript要素以降のコンテンツが表示されていきますが、JavaScriptファイルのダウンロードが終わり次第、そのJavaScriptが実行されます。注意として、async属性をつけたscript要素は、実行順序が保障されていないため、他のJavaScriptと依存関係がないものに限って利用する必要があります。また、実行タイミングも保障されないため、まだ読み込まれていない要素に対するDOM操作をしてしまう可能性もありますので注意しましょう（その場合、onloadイベントなどを利用しましょう）。もし、サンプルで利用している1.js～3.jsがお互いに依存していない場合は、次のように記述することができます。

:html:
<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- … -->
    <script src="1.js" async></script>
    <script src="2.js" async></script>
    <script src="3.js" async></script>
</head>
<body>
    <!-- コンテンツ -->
</body>
</html>

1.js～3.jsはasync属性によって、同時にダウンロードが始まり（ブラウザの同時接続数などにもよります）、完了次第実行されます。そのため、高速に動作するのですが、実行される順番がバラバラになる可能性があります。依存関係があるJavaScript要素には、script要素をそのままで利用するか、defer属性を使いましょう。例えば、2.jsと3.jsに依存関係がある場合には、1.jsにのみasync属性を追加するようにします。async属性は、すべてのモダンブラウザ利用することができますが、IEは9以降の対応となります。といっても、async属性が無視されたとしてもJavaScriptはそのまま実行されるので、非対応のブラウザについてそれほど気にする必要はないでしょう。

async属性とdefer属性を付けたscript要素では、document.write()メソッドが利用できないことと、インライン（script要素に中に直接記述する）でJavaScriptを記述することができませんので注意しましょう。これらの、script要素の位置やasync属性、defer属性などを利用して、なるべくすばやくページが表示されるように気をつけてみましょう。

ユーザーに素早くインタラクションを返す

ユーザーの体感速度を向上させるには、ユーザーの行動に対して、素早く何らかのインタラクションを返すことが重要です。例えば、Gmailのメールスレッドにスターを付けるインターフェースを見てみましょう。

Gmailのスター

Gmailでは、メールスレッドにあるブランクのスターをクリックした瞬間にスターが黄色くなるようになっています。実際にスターを付ける処理は、バックグラウンドで非同期に実行されます。このように、他の操作に影響が少ない部分であれば、素早くレスポンスを表示することでアプリがサクサク動いているように見せることができます（もちろん、エラーがあった場合には、適切な通知を行うことが必要です）。

この例では、ユーザーの行動に対して先に結果を表示するというものでしたが、処理に時間がかかるものであれば、プログレスバーやローディングアイコンを表示することも、当然ユーザーに素早くインタラクションを返す一例になります。これは、ユーザーに何もレスポンスがないという状態をなるべく減らすということです。基本的な設計に関わる部分なのでユースケースに合わせて考えてみましょう。

次回の内容について

今回は、ユーザーの体感速度を向上させるための手法として「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」の2つを解説しました。次回は、残りのひとつ「ユーザーの操作を阻害しない」について、JavaScriptのシングルスレッドやイベントループを絡めつつ、HTML5のWeb Workersなどについても解説していきます。

[注]　defer属性は、HTML5ではなくHTML4で標準化されているというご指摘を受け、2013/7/22に修正しました。

「Webサイト・アプリ高速化テクニック徹底解説 （第1回 Webサイト・アプリの高速化ファーストステップ）」を読む