競争の激しいインターネット サービスの世界において、Google は何億人ものユーザーへのコンテンツ配信を高速化する方法を求め続けています。
今週ニューヨークで開催されたO'Reilly Velocityカンファレンスで、Googleのエンジニア2名が、ウェブページやアプリケーションの配信を高速化するためのヒントや研究成果を発表しました。こうした知識は、製品のレスポンシブ化を目指す他のウェブ開発者にとって役立つかもしれません。
Google の開発者アドボケイトでありパフォーマンス エキスパートでもある Colt McAnlis 氏が、今日のモバイル Web 開発者にとって最も厄介な問題の 1 つである JavaScript パフォーマンスに取り組みました。
WebベースのJavaScriptアプリケーションは、特にモバイルクライアントにおいてパフォーマンスの問題に悩まされる可能性があります。これは、JavaScript解析エンジンがメモリ管理にガベージコレクション（GC）を使用するためです。「ガベージコレクターに頼るべきではありません」とマカンリス氏はWeb開発者の聴衆に語りました。
GCは、プログラムが不要になったメモリをオペレーティングシステムに自動的に返却することで、プログラマーを支援します。しかし、CやC++などの低水準言語でメモリ管理のコードを書くのは大変な作業であり、そもそもブラウザはそのような言語をネイティブにサポートしていません。
多くのJavaScriptウェブアプリの問題は、JavaScriptエンジンがガベージコレクションルーチンを一見ランダムなタイミングで起動するため、アプリケーションの動作が一時的に低下することです。例えば、ビデオアプリケーションのフレームレートが低下する可能性があります。また、アプリケーションが操作を実行する時間が、通常の3～5ミリ秒から20ミリ秒にまで大幅に長くなることもあります。
一般的に、GCがユーザーに気づかれずに動作するには、システムメモリは使用メモリ量の6倍必要だと、マカンリス氏は有名な研究を引用して述べた。モバイルデバイスのメモリ容量が限られていること、そしてそこで実行されるメモリを大量に消費するアプリケーションの数を考えると、これは厳しい要件となる可能性がある。
この問題に加えて、ローカルで定義された変数の可用性を高めるプログラマーフレンドリーな手法であるクロージャの使用が増加しています。例えば、jQueryは広く使用されているJavaScriptライブラリですが、クロージャに依存しているため、メモリ割り当てに多くの浪費が生じます。
「クロージャは怖い」とマカンリス氏は言い、消費するメモリ量に関してクロージャがいかに予測不可能であるかに言及した。
パフォーマンスを向上させる方法
パフォーマンスを向上させ、メモリをより適切に管理するために、開発者は、高性能 HTML5 Web ゲームの構築に使用されているミドルウェア ライブラリ Emscripten で使用されるアプローチと同様のアプローチを使用する必要があります。
EmscriptenはCまたはC++で書かれたコードをJavaScriptに変換し、アプリケーション内部からメモリ管理を可能にします。Emscriptenベースのプログラムは、システムからメモリブロックを事前に割り当てます。プログラマーとEmscripten自身は、メモリが不要になったタイミングを判断し、Emscriptenは未使用のメモリを内部利用可能なメモリプールに戻します。JavaScriptエンジンはプログラムに対してガベージコレクションを行わないため、プログラムのパフォーマンスには影響しません。
一般的に、この技術で書かれたプログラムは、典型的な JavaScript プログラムよりも 2 ～ 4 倍高速に実行でき、GC 操作によって時々発生するパフォーマンスの遅延に悩まされることもない、と McAnlis 氏は言う。
ブラウザテクニック
Google のウェブ パフォーマンス エンジニアである Steve Soulders 氏による別の Google プレゼンテーションでは、ユーザーがリクエストする前でもウェブページを取得する新しいブラウザ技術がいくつか紹介されました。
ソウルダーズ氏の説明によると、そのアイデアは、ユーザーがページを要求する前であっても、ブラウザがユーザーが見たいと思う次のページを予測できるようにするというものだ。
「ユーザーの次のステップは分かりませんが、ユーザーが今まさに求めているページでの意図について、より多くの手がかりを得ることができます」とソウルダーズ氏は述べ、この知識を活用するためのいくつかのテクニックを説明した。
開発者は、ページのハイパーリンクにHTMLのdns-prefetch、pre-fetch、pre-renderタグを追加できます。ページが読み込まれると、これらのタグはブラウザに、ユーザーがリクエストする前であっても、元のページからリンクされているページのコンテンツの一部を取得するよう指示します。
スティーブ・ソウルダーズdns-pre-fetch タグはブラウザにウェブページリンクのドメイン名を検索するよう指示します。pre-fetch タグはブラウザにページ全体を取得するよう指示し、pre-render タグはブラウザにページ全体を構築するよう指示します。これは、ページを非表示のタブに表示しているかのように動作します。
これら 3 つのタグを展開すると、Web ページを要求してからその Web ページが表示されるまでの期間を短縮できます。
ソウルダーズ氏は、こうしたタグは帯域幅とプロセッサの使用率を増大させる可能性があるため、開発者は慎重に使用すべきだと警告した。しかし、ログインページや検索結果ページなど、多くの場合、ユーザーが表示されたページ内のリンクのいずれかをクリックする可能性はかなり高い。
これらのタグに対するブラウザのサポートはさまざまですが、ほとんどのブラウザメーカーは、新しいバージョンや今後のバージョンでこれらのタグのサポートを追加するようです。
ブラウザ自体にも、DNS事前解決やTCP事前接続など、ページ配信を高速化するための様々なプロセスが備わっています。DNS事前解決により、ブラウザはユーザーがナビゲーションバーに入力し始める文字を監視したり、ユーザーが最も頻繁に訪れるウェブサイトのIPアドレスを定期的に取得したりすることで、次に訪問するサイトのドメイン名を予測することができます。
TCP事前接続は、同様の方法でユーザーの次の行動を予測します。ソウルダーズ氏によると、ポートを開き、最終的なリクエストに備えてすべてのプロトコルを設定することで、サイトへの接続を「ウォームアップ」します。
