進化したページ
ソーシャル・ボタン用、およびサイド・ウィジェット用の各スクリプトは、onload のブロック時間を最小にするために、"Frame in Frame 法" で非同期に読み込んでいます。さらに jsfiddle と disqus は、onload 後に読み込む、遅延読み込みとしています。
ナビゲーション・タイミング
Navigation Timing による DOM ready (≒domContentLoadedEventEnd) と onload (≒loadEventEnd) の観測結果は以下の通りです（対応ブラウザは、ブラウザの互換性 を参照）。
このページの特徴
ページが完全に表示されるまでにかかる時間は、原理的に「従来ページ」より増えるはずですが、ソーシャル・ボタンやサイド・ウィジェットの到着を待たずに、主コンテンツの読み込みが完了し次第 onload が発生します。
そのため見かけ上、ページの体感速度が向上する可能性があります。
このページの問題点
"Frame in Frame 法" を任意の 3rd パーティー製スクリプトに適用するには、HTTP リクエストの追加と <iframe> 生成のコストを払う必要があります。
Onloadの意義
ユーザーにとって window.onload はただの通過点でしかありません。
ただし、それを制御する手段が手に入れば、「ユーザーが最初に目にする範囲の表示が完了する時点」の計画的な設定が可能となり、フロントエンドにおける設計上の意義を、より明確にすることが出来るのではないかと思います。
コメント
comments powered by Disqus