javascript - javascriptで画像の読み込み/レンダリング時間を計算するには?

Question

javascript/jqueryを使用してWebページで画像の読み込み/レンダリング時間を見つける方法はありますか?

Answer 1

ここでの正しい答えは、Chrome や Firefox/Firebug などのブラウザーに組み込まれている開発ツールを使用して、ページ内のすべてのリソースの読み込みにかかる時間を教えてくれることです。これらのツールは、純粋な JavaScript がアクセスできるより多くの情報にアクセスできます。

JavaScript を使用すると、JavaScript で指定された画像の読み込み時間を正確に計ることができます。画像の読み込みが開始された瞬間に JavaScript の時間測定を開始する正確な方法がないため、JavaScript を使用して HTML で指定された画像の読み込み時間を正確に計ることはできません。

JavaScript で指定された画像の時間を計測するには:

var startTime = new Date().getTime();
var img = new Image();
img.onload = function() {
    var loadtime = new Date().getTime() - startTime;
    console.log("image took " + loadtime + "ms to load");
};
img.src = "http://www.whatever.com/testimg.jpg";

HTML で指定された画像に対してできる最善の方法は次のとおりです。

<script>
var startTime = new Date().getTime();
function doneLoading() {
    var loadtime = new Date().getTime() - startTime;
    console.log("image took " + loadtime + "ms to load");
};    
</script>
<img src="http://www.whatever.com/testimg.jpg" onload="doneLoading()">

前の例の<script>タグは、タグの直前にある必要があります<img>。

しかし、真剣に、Chrome または Firebug の開発ツールを使用すると、すべてのページ リソースの読み込みにかかる時間を正確に確認できます。