推定ページ読み込み時間を計算する

ページの推定読み込み時間を計算するのにjQuery/Javascriptを使用できますか？推定ページ読み込み時間を計算する

私は200で私はオンラインのどこかで見つかった以下のが、各リロードに時間増分を試みたし、それが6000に到達したときに、それは私があればそれがプリローダーを使用していたバック0

var perfData = window.performance.timing, 
    EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart), 
    time = parseInt((EstimatedTime/1000)%60)*100; 

if (time >= 700) { 
    $(window).load(function() { 
     // Do something 
    }); 
} else { 
    // Do something else 
}

にリセットされます推定ページロード時間は700ms以上です。

出典

2017-12-04 Tiago Valente

ロードするのにかかる時間を測定し、読み込みに要する時間を測定してください（平均値で） 'toLoad/100kb * timeItTook' –

プログラムでこれを行う理由はありますか？ほとんどのブラウザのコンソールでこの情報を見ることができるので私は尋ねます。 –

@ RoryMcCrossan単純に異なる人のページ速度が異なるため、誰かが超高速ダウンロード速度を持っている場合、奇妙に見えるスプリット秒のプリローダーが表示され、逆の場合は –

ページの最後にはどのような負荷がありますか？ window.onload？

var first= new Date(); 

$(window).load(function() { 
    $('body').html(new Date() - first); 
});

出典

2017-12-04 17:48:21

ありがとうございますが、これは私が意図したものではありませんでした。ページの長さを予測したいロードが完了する前にロードされます。だから、ページの読み込み時間が2.3秒になると見積もったら、何かしたいのですが、400ミリ秒になると見積もったら、何かをしてください –

performance Interfaceがうまくいきます。ブラウザ互換です。

ここで説明する動作は、あなたがそれをうまく使用しないと確信しています。

「リロードごとに200ずつ増加する」は、perfData.loadEventEndがゼロに等しいことを示しています。それであなたの計算は何も意味しません。あなたはperfData.navigationStartしか持っていません。これはUnixの整数です。

今、あなたはtimeの数学を完全に削除します。 EstimatedTimeはすでにミリ秒単位です。

次に、ページが完全に読み込まれると、スクリプトはtiming属性を読み取る必要があります。それ以外の場合は、perfData.loadEventEndは必ずゼロになります。

loadイベントハンドラでは、loadイベントが終了した後にスクリプトが実行されるように、setTimeout()を使用してください。

var loadTime = function(){ 
    setTimeout(function(){ 
    var perfData = window.performance.timing; 
    var EstimatedTime = (perfData.loadEventEnd - perfData.navigationStart); 

    if(EstimatedTime>700){ 
     // Something for load time more than 700 ms 
    }else{ 
     // Something for faster load time 
    } 
    },10); // Executes 10 ms after load has ended 
};

とマークアップで：

<body onload="loadTime();">

はCodePenにそれで遊ぶようにしてください。

問題が再現されたのはCodePenです。

出典

2017-12-04 18:22:24

本当ですが、これは正しい値を返します。素晴らしいですが、プリロードが必要かどうかを判断するためにページロードが終了する前に、これをどのように実装することができるのか分かりません。この場合は、パフォーマンスAPIの理解を深めるのに役立ちましたので、私はあなたに投票します。 –

私はあなたがその測定を*前に取ることができないと思う。しかし、あなたのランディングページでそれを一度行うと、他のすべてのページについて*スピード*を差し引くことができます。私はその測定値を他のページの[localStorage]（https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage）に置いておきます。ここで、 'load'が出る前にデータが利用可能になります。終了しました。 –

他のいくつかのトーン：** 1）**その測定は***最初の***負荷で効率的です。 2番目の読み込みでは読み込み時間の高速化のためにキャッシングが使用されるため、この値は低くなるはずです。 ** 2）**私は、特定の画像の読み込み時間を 'body'の代わりに測定します...あなたのロゴをヘッダに入れてください。そのため、あなたのページのいずれかで測定を行うことができます。 ** 3）**あなたのロゴが小さすぎる場合...隠された大きな画像を使用してください！ ** 4）**最後に、値が既にlocalStorageにある場合は、更新しないでください。最初の測定を維持してください。 ;） –

推定ページ読み込み時間を計算する

答えて

関連する問題