開発者が語る、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+のページで読んでみてください。

このエントリーをはてなブックマークに追加
follow us in feedly


関連タグ JavaScript / Web技術 / Google



タグクラウド(β版)

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

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

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

最新記事10本