81

読み込み開始時に Interval を使用してタイマーを開始する 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;

したがって、基本的には、10 ミリ秒 (.01 秒) ごとに '1' ずつ増加する 100 番目のタイマーと呼ばれる変数を作成します。

次に、この数が 1000 (1 秒) に達すると、secondsplace と呼ばれる変数が 1 増加します。

次に、合計ロード時間として秒位、小数点、および 100 分の 1 をアラートします。

しかし、上記の間違った番号の問題は依然として存在します。なんで？

4

5 に答える 5

239

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

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.

ブラウザのサポート

より詳しい情報

于 2013-02-14T15:40:01.107 に答える
85

時間測定に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>
于 2013-01-15T17:16:43.337 に答える
2

performance.dominteractive の計算が間違っているため、適切なタイミングを作るのは困難です (タイミング開発者にとって興味深いリンクです)。

dom が解析されると、遅延スクリプトが読み込まれて実行される場合があります。また、CSS を待機しているインライン スクリプト (CSS ブロック DOM) もDOMContentloadedまでロードする必要があります。それで、まだ解析されていませんか？

そして、「loaded」と「interactive」の間のどこかで発生する「dom is parsed」が残念ながら欠落しているreadyStateを確認できるreadystatechangeイベントがあります。

Timing API が DOM が HTML の解析を停止し、The Endプロセスを開始するのを停止した時間を提供しない場合でも、すべてが問題になります。この標準は、最初のポイントは、「インタラクティブ」が dom が解析された後に正確に起動することであると言います! Chrome と FF の両方は、ドキュメントが解析された後、ドキュメントの読み込みが終了したときにそれを実装しています。彼らは、実行された遅延スクリプトを超えて解析が続行されるため、標準を (誤解して) 解釈しているように見えますが、人々は DOMContentLoaded を、遅延実行の後ではなく、遅延実行の前に起こる何かと誤解しています。ともかく...

Navigation Timing API について読むことをお勧めします。または、簡単な方法でこれらのワンライナーを選択するか、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() 減算の代わりに、コードにマークを設定してマーク間を測定するUser Timing APIによってコードが少し短くなります。

于 2019-04-23T02:30:48.987 に答える