開発者が語る、Google+で使ったJavaScriptテクニック

Google+チームに所属するエンジニアのMark Knichel氏が、Google+の高速性を実現するためにどのようなテクニックを使ったのかについて、Google+のページで解説しています。

最新のWebサービスでどのようなJavaScriptのテクニックが使われているのかを垣間見ることができる説明になっていますので、見出しを中心に紹介しましょう。

1) We <3 Closure
私たちはClosureが大好きだ（<3は横向きのハートマーク）

Closure（クロージャ）とは、オライリーの書籍「初めてのJavaScript」の解説を借りれば、関数の「入れ子（nesting）」です。（追記、このクロージャじゃなくて、こちらのクロージャのようでした）

グーグルでは「Closure Tools」というツールを提供しています。

Closure templates can be used in both Java and JavaScript to render pages server-side and in the browser. This way, content always appears right away, and we can load JavaScript in the background

クロージャテンプレートはサーバサイドとブラウザでページをレンダリングするために、JavaとJavaScriptの両方で使われている。このやり方だと、コンテンツはいつもすぐに表示され、バックグラウンドでJavaScriptをロードできる。

2) The right JavaScript, at the right time
適切なJavaScriptを適切なときに使う

Google+ではJavaScriptはモジュールに分かれ、非同期にロードされるとのこと。

we split our code into modules that can be loaded asynchronously from each other. You will only download the minimum amount of Javascript necessary.

私たちはコードをモジュールに分割することで、それぞれが非同期にロードできるようにした。これで必要最小限のコードをロードすることで済むようになる。

3) Navigating between pages, without refreshing the page
ページ間のナビゲーションをページの再描画なしに行う

これは次の4のテクニックと合わせてよく使われるアプローチですね。

We install a global event listener that listens for clicks on anchor tags.

私たちはグローバルイベントリスナーをページに導入し、アンカータグのクリックを見ている。

4) Flushing chunks (of HTML)
（HTMLの）部分書き換え

We also flush HTML chunks to the client to make the page become visible as soon as the data comes back, without waiting for the whole page to load.

データがやってきたらすぐに表示されるように、HTMLの部分書き換えを行っている。

5) iFrame is our friend
iFrameは友達だ

これはコードが複雑になるけれども、高速化のためにやっているそうです。

To load our Javascript in parallel and avoid browser blocking behavior (http://goo.gl/lzGq8), we load our Javascript in an iframe at the top of the body tag.

JavaScriptを並列にロードしブロッキングを防ぐために、Bodyタグの先頭でiframeを用いてJavaScriptをロードしている。

説明を読むと、基本的にはこれまでの高速化テクニックを統合し完成度を高めた、という印象を持ちます。FacebookやTwitterでも同様のことはやっているはずです。詳細はぜひGoogle+のページで読んでみてください。