web-dev-qa-db-ja.com

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

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

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開発ツールでそれを実行できることを知っていますが、データを追跡できるようにスクリプトも必要です。）

javascriptpage-load-time
23
andrei

レガシーブラウザで時間を測定するのは、ほぼonlyの方法です。しかし、救済のために、ほとんどのブラウザは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 1351036538295
loadEventStart 1351036538277
navigationStart 1351036536696

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

40
jAndy

ローカルマシン、FirefoxのFirebug、Chrome開発者ツール、 IEのF12開発者ツールは、最新のページ読み込みタイミングを公開します。

サイトへの訪問者のページ読み込み時間を実世界で取得するには、Real User Monitoring（aka[〜＃〜] rum [〜＃〜]）ページ負荷メトリック。 NavigationTiming spec を確認することをお勧めします。この仕様 サポートされている IE9 +、FF7 +、およびChrome6 +では、ブラウザーのDOMを通じてページの読み込みタイミング（例：DNS、TCP接続、要求、応答、DOMタイミング））を公開します。これにより、最新のブラウザーでサイトにアクセスするすべての訪問者について、ミリ秒単位の正確なページ読み込みタイミングを取得できます。

タイムライン上のこれらのメトリックすべてを公開します。 enter image description here

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

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

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

27
NicJ

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

enter image description here

..またはChrome（F12を押す）の開発者ツール enter image description here

以下も参照してください。

2
MonsJovis

これをブラウザコンソールに入力します。

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

JavaScriptのアプローチは、Webブラウザーに大きく依存しています。 firefoxにはFireBug、ChromeにはDevTools、IEにはFirebug liteをお試しください。

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

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

0
Sandeep

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

0
AGB