小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


JavaScriptでページのレンダリング時間をミリ秒単位で簡易計測する

Webページのレンダリング時間を計測する方法を調べていたら、JavaScriptで簡単に計測する方法を見つけました。

ページ構築(bodyタグ内)のレンダリング(ページの表示時間)を計測するには、ページ構築前のミリ秒を変数に入れます。ページが構築し終わったら onLoadイベントが発生するので、その時点でのミリ秒と構築前のミリ秒の差分を取ればページのレンダリング時間を求めることができます。
(中略)
いくらかの誤差が発生します。また、ブラウザのキャッシュ状況によっても異なりますので、計測する場合にはキャッシュなどを消しておくなどの対処が必要です。
ページ構築にかかる時間を計測する はてなブックマーク - ページ構築にかかる時間を計測する

JavaScriptでページのレンダリング時間を計測する

こんな感じで、スクリプトが読み込まれたらそのときの時間をグローバル変数startに入れます。そして、document.bodyがロードされたら、そのときの時間を変数endに入れて、差分の時間を計算します。

var start = new Date();
function d() {
  var end = new Date();
  var diff = end.getTime() - start.getTime();
  alert(diff);
}

<body onload="d()">
window.onloadとdocument.body.onloadの違い

window.onloadでも良いのではと思ったのですが、window.onloadとdocument.body.onloadは微妙に違うみたいです。

そもそも window と document.body が別の世界の存在だと考えたほうがよさげ.
window はブラウザのウインドウそのもので,JavaScript の処理系が生きてる限り存在する (たぶん).
一方,document.body は html から生成された DOM のオブジェクト.

以上 2 点からも,ページの遷移とかのブラウザの制御のようなことは window.onload に,
ページ内に表示する何かは document.body.onload に,という使い分けがあるのだと思われます.
window.onload と の違い はてなブックマーク - window.onload と <body onLoad> の違い