BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] JavaScriptでページのロードタイムを計算する

2023-06-25 16:22:59

質問

ロード開始時にインターバルを使ってタイマーを開始するようなウェブページを作ろうとしています。

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

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

たまに、0.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位を総ロード時間として警告します。

しかし、上記のような不正確な数値の問題はまだ存在します。なぜでしょうか？

どのように解決するのですか？

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

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

<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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します