javascript - JavaScriptを使用したページの読み込み時間

Question

ページがすべてのリソースを完全にロードするのにかかる時間をテストする適切な方法を探しています。私がこれまでに行ったことは、次のとおりです。

window.startTime = (new Date).getTime(); // after the title in my page

と

window.onload = function () {
    console.log((new Date).getTime() - window.startTime);
}
window.addEventListener('load',function () {
    console.log((new Date).getTime() - window.startTime);   
},false);

フッターを下に移動します。これは測定するのに良い方法ですか？読み込み時間と知覚される読み込み時間に違いはありますか？私が見ているものから、画像を含むすべてのリソースがロードされた後にイベントがトリガーされます。2つのイベントに違いはありますか？また、PageSpeedを使用してこれをテストできますか？（Chrome開発ツールで実行できることはわかっていますが、データを追跡できるようにスクリプトも必要です。）

score 43 · Accepted Answer

従来のブラウザで時間を測定するのは、これがほとんど唯一の方法です。しかし、救済のために、ほとんどのブラウザは、window.performance時間を取得するための非常に正確な方法を提供するオブジェクトを実装しています。

典型的なwindow.performance.timing出力：

connectEnd 1351036536696
connectStart 1351036536696 domComplete 1351036538277 domContentLoadedEventEnd 1351036538146 domContentLoadedEventStart 1351036538119
domInteractive 1351036538042
domLoading
1351036537552
domainLookupEnd
1351036536694
domainLookupStart
1351036536694
fetchStart
1351036536696
loadEventEnd
13510365

..これは完全なリストではありません。

score 32 · Accepted Answer

ローカルマシンでページの読み込み時間をデバッグしているだけの場合は、FirefoxのFirebug、Chromeデベロッパーツール、およびIEのF12デベロッパーツールが最新のページ読み込みタイミングを公開します。

サイトへの訪問者のページ読み込み時間を実際に取得するには、 Real User Monitoring（別名RUM）のページ読み込みメトリックを使用する必要があります。NavigationTimingの仕様を調べることをお勧めします。この仕様は、IE9 +、FF7 +、およびChrome6 +でサポートされており、ブラウザのDOMを介してページの読み込みタイミング（DNS、TCP接続、要求、応答、DOMのタイミングなど）を公開します。これにより、最新のブラウザでサイトにアクセスするすべての訪問者について、ミリ秒単位で正確なページの読み込みタイミングを取得できます。

タイムライン上でこれらすべてのメトリックを公開します。ここに画像の説明を入力してください

これらのメトリックが公開されたので、それらを使用する方法がいくつかあります。

DIYソリューションの場合、Boomerangはサードパーティのライブラリであり、最新のブラウザでNavigationTimingを使用して、このデータをデータセンターにpingで返します。古いブラウザの場合、サイト内のページ間のナビゲーションを監視して、ページの読み込みにかかる時間を判断するための優れたトリックがいくつかあります。

Boomerangのすべてを理解することに興味がない場合は、NavigationTiming（および同様の）データを使用してページ読み込みパフォーマンスデータをレポートする他のサービスプロバイダーがいくつかあります。たとえば、web.dev、Google Analytics、New Relic、Pingdom、SpeedcurveとSpeedrank。

score 3 · Accepted Answer

FirefoxのFirebugの使用を検討しています。

ここに画像の説明を入力してください

..またはChromeの開発者ツール（F12キーを押す）ここに画像の説明を入力してください

参照：

score 2 · Accepted Answer

ブラウザコンソールで次のように入力します。

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

score 0 · Accepted Answer

JavaScriptのアプローチは、Webブラウザに大きく依存しています。Firefox用のFireBug、Chrome用のDevTools、IE用のFirebugliteを試してみませんか。

それでもコードを記述したい場合は、window.performanceオブジェクトを使用してください。

ほとんどの場合、ブラウザごとに異なる読み込み時間が発生します。

score 0 · Accepted Answer

私は一般的に、FirebugのYSlow、PageSpeed、およびNetタブの組み合わせを使用して、ページの読み込み時間を測定し、潜在的な問題を診断しました。Firebugには、これをまだチェックアウトしていない場合に役立つ可能性のある多くの情報があります。

javascript - JavaScriptを使用したページの読み込み時間

6 に答える 6

Related

Reference