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

2011年11月22日

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

(1) Mark Knichel - Google+ - Hi everyone! I’m an engineer on the Google+ infrastructure…

最新の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+のページで読んでみてください。

あわせて読みたい

JavaScript Web技術 Google




タグクラウド

クラウド
AWS / Azure / Google Cloud
クラウドネイティブ / サーバレス
クラウドのシェア / クラウドの障害

コンテナ型仮想化

プログラミング言語
JavaScript / Java / .NET
WebAssembly / Web標準
開発ツール / テスト・品質

アジャイル開発 / スクラム / DevOps

データベース / 機械学習・AI
RDB / NoSQL

ネットワーク / セキュリティ
HTTP / QUIC

OS / Windows / Linux / 仮想化
サーバ / ストレージ / ハードウェア

ITエンジニアの給与・年収 / 働き方

殿堂入り / おもしろ / 編集後記

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本