描画終了までの処理速度の計測について

0   名前： アラムナイ ： 2007/02/27（火） 01:14  ID:DZeoSkXp sub-t1
あるサイトをみようとするユーザの待ち時間を計測しようとおもうと、
クリックしてから描画終了までの時間になるかとおもいます。
現在、描画をするのに時間のかかるプログラムがあるんですが、そのプログラムにさらに機能追加をしようとしており、
それによりどの程度処理時間が延びるかを計測したいと思っています。
プログラム単体での処理時間は計測できても描画を含めた時間となるとどうやってはかってよいか不明です。
たとえばAというプログラムの処理時間を100とすると
Bという機能を追加したABというプログラムは120になる、などという計測ができればよいです。

どなたかご教授いただければと思います。




【何をしたいのか】
→ Javascript単体のプログラムの処理速度だけでなく、描画（ブラウザのレンダリング時間）も含めた処理速度を検証したいと思っています。

【現在の状況】【何をしてみたのか】
→ プログラムのはじめにサーバの時間を取得し、プログラムの終了時にもサーバの時間を取得し、計測
△これだとプログラムの速度のみになる。
→window.onload時の時間を計測し、はじめの時間との差分を計測
×描画の時間は含まれず、単にプログラムの始まりからダウンロード終わりまでの計測になってしまう。

計測に関しては下記のサイトを参照

http://www.openspc2.org/reibun/javascript/special/023/index.html
http://d.hatena.ne.jp/amachang/20060906/1157571938

【備考】
というか、そもそも描画終了のイベントを取得できるんでしょうか？？？


もちろん、クライアントマシンのスペックで差が出ることも、ブラウザによって違いがでることもわかっていますので
相対値で処理にかかる時間がわかれよいです。

みなさん、そういうのを知りたいときどうしていますか？
よろしくお願いします。
1   名前： 元帥 ： 2007/02/27（火） 01:14  ［URL］  ID:qQtritd0 sub-bK
諸処での実行タイミングが分かれば良いので、簡単なテストプログラミング

script:
<script type="text/javascript">
<!--
var time_body,time_img,time_head;
time_head=new Date;

function func_body(){
time_body=new Date;
}

function func_img(){
time_img = new Date;
}

function func_rs(){
alert(
time_body.getSeconds()+":"+time_body.getMilliseconds()+"\n"+
time_img.getSeconds()+":"+time_img.getMilliseconds()+"\n"+
time_head.getSeconds()+":"+time_head.getMilliseconds()
);
}
//-->
</script>


HTML:
<body onload="func_body()">
<input type="button" value="result" onclick="func_rs()">
<img src="適当な画像ファイル" alt="" onload="func_img()">

HTMLが記述されたファイルのダウンロード時間まで含めるなら、ちょっと厄介になってきますが、極端に大容量になるケースは少ないでしょうし、問題ないでしょう。
2   名前： 匿名 ： 2007/02/27（火） 01:14  ID:9jO6XtAy sub-kJ
>>0
window/document に対する load イベントは、全ての外部リソースの取得後に fire すると思ってたけど。ページの先頭から、load イベント終了時までの時間を計ってみては？（レンダリング時間ではないけど）

IE、Safari なら document.readState プロパティを持つ。IE の通知するタイミングがおかしかった記憶はあるが。

Firefox、Opera なら DOMContentLoaded イベントを持つ。これは外部リソースのダウンロードを待たずに発動する。
3   名前： アラムナイ  ： 2007/02/27（火） 01:14  ID:ROb5ATQv sub-t1
>1
返信ありがとうございます。

諸所の実行タイミングだと描画終了時をどうやって取得できるのでしょうか？
すいません、考えてみましたがよく理解できていません。

これは実行時の時間を取得できるというものですよね？
ブラウザのレンダリング処理終了も取得できるのでしょうか？？


ちなみに

現状、２つのタイミングのみ計測しています。
・プログラム処理終了
・ダウンロード終了時

以上のタイミングで計測しているため、描画終了はそのあとになっており、計測できません。
ご参考までに下記のようなコードです。
 
var TimeBegin;
var TimeFinish;
var dummy;
//処理開始時間を取得する
TimeBegin=new Date();

//===処理内容ここから===





//===処理内容ここまで===


//プログラム単体の処理時間
PTimeFinish=new Date();
Pdummy = (parseFloat(PTimeFinish.getMinutes())*60000
+ parseFloat(PTimeFinish.getSeconds()*1000)
+ parseFloat(PTimeFinish.getMilliseconds()) )
-( parseFloat(PTimeBegin.getMinutes())*60000
+ parseFloat(PTimeBegin.getSeconds()*1000)
+ parseFloat(PTimeBegin.getMilliseconds()) )
PSyoriJikan = Math.round(Pdummy);
document.write(PSyoriJikan);
document.write(" ミリ秒でプログラムの処理完了");

window.onload = function (){
//ダウンロードを含めた処理完了時間を取得する
TimeFinish=new Date();
dummy = (parseFloat(TimeFinish.getMinutes())*60000
+ parseFloat(TimeFinish.getSeconds()*1000)
+ parseFloat(TimeFinish.getMilliseconds()) )
-( parseFloat(TimeBegin.getMinutes())*60000
+ parseFloat(TimeBegin.getSeconds()*1000)
+ parseFloat(TimeBegin.getMilliseconds()) )
SyoriJikan = Math.round(dummy);
//出力する
alert("描画を含む全体処理時間"+SyoriJikan+"ミリ秒");
}
4   名前： アラムナイ ： 2007/02/27（火） 01:14  ID:ROb5ATQv sub-t1
>>2

返信ありがとうございます。

＞load イベント終了時までの時間を計ってみては？（レンダリング時間ではないけど）

そうですね、上記にコードを記載しましたが読み込み完了時のイベントで時間を計測はしています。
ただ、できれば描画のレンダリング時間も含めた処理時間が計測したいんです。

どうしたらよいのでしょう。
うーん、javascriptでは無理なのでしょうかね。
5   名前： 匿名 ： 2007/02/27（火） 01:14  ID:9jO6XtAy sub-kJ
個人的に、出力（DOM ツリーの修正）は別処理にすることが多い。部分木の挿入・修正にかかった時間をレンダリング時間と見なすことにしている（画像などの外部リソースは取得済とする）。

> うーん、javascriptでは無理なのでしょうかね。

JavaScript の問題ではなく、（>>0 にもあるように）ブラウザがそういうイベントを通知するかどうかの問題だと思うが。

とりあえず、document.readState == 'complete' は駄目だったのかな。
6   名前： アラムナイ ： 2007/02/27（火） 01:14  ID:YkQdnkwf sub-.G
>>5

返信ありがとうございます。
調べているうちに返信が遅くなりました。


＞個人的に、出力（DOM ツリーの修正）は別処理にすることが多い。部分木の挿入・修正にかかった時間をレンダリング時間と見なすことにしている（画像などの外部リソースは取得済とする）。

なるほど。それが正しいのかもしれないですね。


あと、document.readState == 'complete'でいけるかも、ですね。

試そうと思い、いろいろ調べてるんですが、いまいち使い方が不明（記述の仕方と実際に描画終了イベントが取得できてるのかの確認）ですので、もうすこし調べてみます。

もしおわかりでしたらどう記述するとよいか、助言いただけると幸いです。
7   名前： 匿名 ： 2007/02/27（火） 01:14  ID:dNetjyhh sub-kJ
ごめんなさい。>>5 でスペルミスしてた（document.readyState）。これのせいで検索できなかったのだとしたら、誠に申し訳ない。
function listener () {
     switch (document.readyState) {
     case 'uninitialized' :
         // 初期化されていない
         break;
     case 'loading':
         // 読み込み中
         break;
     case 'loaded':
         // 読み込み完了
         break;
     case 'interactive':
         // 読み込み中だが操作可能
         break;
     case 'complete':
         // 初期化完了
         break;
     default :
         ;
     }
}

// IE
document.attachEvent ('onreadystatechange', listener);

// Opera
document.addEventListener ('readystatechange', listener, false);

// Safari
setInterval (listener, 10); // 適当なタイミングで止める

http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onreadystatechange.asp
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp

初期化がレンダリングを含むのか確認していないので、何か分かったら教えて下さい。
一覧へ戻る