Gmailチームが明かすHTMLアプリケーション起動の高速化テクニック

Google JavaScript

　などという煽り気味なタイトルをついつけてしまいたくなる記事がGoogleCodeBlogに掲載されていました。

　最初のほうはごく普通にJavaScriptを使ったRIAアプリケーションはどうしても起動が遅くなるため、それをどう減らすか、というテーマにそって書かれています。
　方法として挙げられているのは、最初にすべてを読み込まず、モジュール単位で分割して遅延ローディングすること。ただし、それだけだと回線速度が遅く不安定なモバイル環境では問題が生じるためHTML5のキャッシュ機能を利用するといいとのこと。
　遅延ローディングのためのさまざまな手法の得失や、例えばユーザーデータを読み込むときには動的ロードしない、というようにユーザーの操作を妨害しないよう留意することなどについても述べられていてそれだけでもノウハウとして十分に有意義なのですが、決め手として最後に出てくる方法がすごいです。

　その方法というのは

  • scriptタグの下に、コメントアウトした形でモジュールのコードを全部書いておく
  • 必要に応じて、そのscriptタグに含まれるコメントを取得してEval

　コードで書くとこうなるそうです。

<html>
...
<script id="lazy">
/*
ここにコードを書く
*/
</script>

<script>
function lazyLoad() {
    var lazyElement = document.getElementById('lazy');
    var lazyElementBody = lazyElement.innerHTML;
    var jsCode = stripOutCommentBlock(lazyElementBody);
    eval(jsCode);
  }
function  stripOutCommentBlock(code) {
    return code.replace(/^[\s\xA0]+\/\*|\*\/[\s\xA0]+$/g, "")//コメントアウトを解除
}
</script>
<body>
<div onclick=lazyLoad()> Lazy Load </div>
</body>
</html>

　起動時のパフォーマンスから考えるとHTMLに直接イベント呼び出しを書いてしまうというのは一つの手かな？　とは考えていましたが、ここまでの方法は思いつきませんでした。執念を感じさせますね。