web-dev-qa-db-ja.com

JavaScriptでのページ読み込み時間の計算

ロードを開始すると、間隔を使用してタイマーを開始するWebページを作成しようとしています。

ページが完全に読み込まれると、タイマーが停止し、

しかし、99％の時間がかかっても、0.00または0.01の時間測定値が得られます。

時折、.28または3.10のようなより意味のあることを言うことがあります。

これが役立つ場合のコードは次のとおりです。

var hundredthstimer = 0;
var secondplace = 0;

function addinc(){

    hundredthstimer += 1;
    if (inctimer == 100){
        hundredthstimer = 0;
        secondplace += 1;
    }

}

var clockint = setInterval(addinc, 10);

function init(){
    var bconv1 = document.getElementById("bconverter1");
    var bconv2 = document.getElementById("bconverter2");

    $(bconv2).hide();

    clearInterval(clockint);

    if (inctimer.len !== 2){
        inctimer = "0" + inctimer;
    }
    alert(secondplace + "." + inctimer);
}
onload = init;

そのため、基本的には、100thstimerと呼ばれる変数を作成します。この変数は、10ミリ秒（.01秒）ごとに「1」ずつ増加します。

次に、この数値が1000（1フル秒）に達すると、secondsplaceと呼ばれる変数が1ずつ増加します。これは、実行されたフル秒数です。

次に、合計ロード時間として、secondsplace、小数点、および100分の1を警告します。

しかし、上記の不正確な数値の問題は依然として存在します。どうして？

javascriptloadsetinterval
60
zingzing45

時間測定にsetIntervalまたはsetTimeout関数を使用しないでください！これらは信頼性が低く、ドキュメントの解析および表示中のJS実行スケジューリングが遅れる可能性が非常に高くなります。

代わりに、 Date object を使用して、ページの読み込みが開始されたときにタイムスタンプを作成し、ページが完全に読み込まれたときとの差を計算します。

<doctype html>
<html>
    <head>
        <script type="text/javascript">
            var timerStart = Date.now();
        </script>
        <!-- do all the stuff you need to do -->
    </head>
    <body>
        <!-- put everything you need in here -->

        <script type="text/javascript">
             $(document).ready(function() {
                 console.log("Time until DOMready: ", Date.now()-timerStart);
             });
             $(window).load(function() {
                 console.log("Time until everything loaded: ", Date.now()-timerStart);
             });
        </script>
    </body>
</html>
67
Bergi

なぜそんなに複雑なのですか？できるとき：

var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;

さらに時間が必要な場合は、window.performanceオブジェクトを確認してください。

console.log(window.performance);

タイミングオブジェクトが表示されます。

connectEnd                 Time when server connection is finished.
connectStart               Time just before server connection begins.
domComplete                Time just before document readiness completes.
domContentLoadedEventEnd   Time after DOMContentLoaded event completes.
domContentLoadedEventStart Time just before DOMContentLoaded starts.
domInteractive             Time just before readiness set to interactive.
domLoading                 Time just before readiness set to loading.
domainLookupEnd            Time after domain name lookup.
domainLookupStart          Time just before domain name lookup.
fetchStart                 Time when the resource starts being fetched.
loadEventEnd               Time when the load event is complete.
loadEventStart             Time just before the load event is fired.
navigationStart            Time after the previous document begins unload.
redirectCount              Number of redirects since the last non-redirect.
redirectEnd                Time after last redirect response ends.
redirectStart              Time of fetch that initiated a redirect.
requestStart               Time just before a server request.
responseEnd                Time after the end of a response or connection.
responseStart              Time just before the start of a response.
timing                     Reference to a performance timing object.
navigation                 Reference to performance navigation object.
performance                Reference to performance object for a window.
type                       Type of the last non-redirect navigation event.
unloadEventEnd             Time after the previous document is unloaded.
unloadEventStart           Time just before the unload event is fired.

ブラウザサポート

詳細

186
HaNdTriX

@HaNdTriXによる回答は素晴らしいですが、DOMが以下のコードで完全にロードされているかどうかはわかりません。

var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;

これは、onloadを次のように使用すると完全に機能します。

window.onload = function () {
    var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
    console.log('Page load time is '+ loadTime);
}

編集1：回答するコンテキストを追加

注：loadTimeはミリ秒単位です。@ nycynikで言及されているように、1000で割って秒を取得できます

31
Samdeesh

performance.dominteractiveが調整されている （とにかくタイミング開発者にとって興味深いリンク）であるため、適切なタイミングを作成することは困難です。

Domが解析されるとき、遅延スクリプトをロードして実行する可能性があります。また、css（cssブロッキングdom）を待機しているインラインスクリプトは、 DOMContentloaded になるまでロードする必要があります。まだ解析されていませんか？

そして、 readystatechange を見ることができるイベント readyState があります。残念ながら、「ロード」と「インタラクティブ」の間のどこかで発生する「domが解析されます」が欠落しています。

タイミングAPIが、domがHTMLの解析と The End プロセスの開始を停止する時間を与えない場合でも、すべてが問題になります。この標準では、最初のポイントは、domparsedの後に正確に「インタラクティブ」に起動する必要があるということです。 ChromeとFFの両方は、 ドキュメントの終了loading が解析された後、実装されました。 DOMContentLoadedを、実行を延期する前ではなく、延期するものとして誤解している間、解析は実行された遅延スクリプトを超えて継続するため、標準を（誤って）解釈するようです。とにかく...

Navigation Timing API について読むことをお勧めします。または、簡単な方法でこれらの1つのライナーを選択するか、3つすべてを実行してブラウザーコンソールを調べてください...

  document.addEventListener('readystatechange', function() { console.log("Fiered '" + document.readyState + "' after " + performance.now() + " ms"); });

  document.addEventListener('DOMContentLoaded', function() { console.log("Fiered DOMContentLoaded after " + performance.now() + " ms"); }, false);

  window.addEventListener('load', function() { console.log("Fiered load after " + performance.now() + " ms"); }, false);

ドキュメントが開始されてからの時間はミリ秒単位です。 Navigation Timing API で検証しました。

var ti = performance.now()を行った時点から試験の秒数を取得するには、parseInt(performance.now() - ti) / 1000を実行します

そのようなperformance.now（）減算の代わりに、コードで ser Timing API を設定し、コードで marks と measure を設定することにより、コードが少し短くなりますマーク間。

0
Pauli Sudarshan Terho