Jqueryでのページの読み込み時間
https://stackoverflow.com/questions/1211414
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
ページの読み込み時間を計算したい。これは、ページ全体がロードされるときに、2番目の0（小さなjqueryスニペットがロードされた）から2番目のxまでを意味します。
私は誰かがそれを使った経験があるのだろうか、それを正しく実装する方法のアイデアも説明されます。
拡張機能は必要ありません。すでにfirebugがあります。jsソリューションが必要です
ありがとう：）
解決
他の人が述べたように、これはそれほど正確ではありません。しかし、これは合理的に機能するはずです。
<head>で、つまりできるだけ早く：
<script>
var startTime = (new Date()).getTime();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(window).load(function () {
var endTime = (new Date()).getTime();
var millisecondsLoading = endTime - startTime;
// Put millisecondsLoading in a hidden form field
// or Ajax it back to the server or whatever.
});
</script>
重要なのはこの動作です。 jQueryドキュメントから：
ウィンドウ要素にバインドされると、 ユーザーエージェントが 内のすべてのコンテンツのロードを終了します ウィンドウ、フレーム、 オブジェクトと画像。
他のヒント
スクリプトは解析されるとすぐに実行されるため、1つのスクリプトタグをヘッダー内に配置し、jQueryをロードした後にページロードイベントをフックするスクリプトを追加することをお勧めします。
<html>
<head>
<script>
// Capture start time
</script>
...
<script src="jquery.js" />
<script>
$(window).load(function() {
// Capture end time
});
</script>
...
そのようにして、できるだけ多くのページ読み込み時間をキャッチできるはずです。
ブラウザプラグインを使用した方が良いでしょうか？ JavaScriptを使用した計算では、ページの読み込み時間を過小評価する必要があります。jQueryスニペットの読み込み時間は含まれず、ブラウザーがリクエストを送信してからWebサーバーが応答するまでの時間も含まれないためです。
Firefox用の Load Time Analyzer プラグインがあります。
最適化のためにこれを行う場合は、 Yslow 。これは、Firebug-Firefox拡張機能です。ページの読み込み時間やその他の多くの有用な情報を表示できます。
注目すべき：
たとえば、次のスクリプトは、 ページを完全にロードするのにかかる時間：
<html>
<head>
<script type="text/javascript">
var start = new Date().getTime();
function onLoad() {
var now = new Date().getTime();
var latency = now - start;
alert("page loading time: " + latency);
}
</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
スクリプトは、ページの読み込みにかかる時間を計算します 頭のJavaScriptの最初のビットが実行されますが、 からページを取得するのにかかる時間に関する情報 サーバー。
ユーザーエクスペリエンスに関する完全な情報の必要性に対処するには、これ このドキュメントでは、PerformanceTimingインターフェースを紹介しています。このインターフェース JavaScriptメカニズムが完全なクライアント側レイテンシーを提供できるようにします アプリケーション内の測定。提案されたインターフェースでは、 前の例を修正して、ユーザーの知覚ページを測定できます ロード時間。
次のスクリプトは、ページをロードする時間を計算します 最新のナビゲーション。
<html>
<head>
<script type="text/javascript">
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
alert("User-perceived page loading time: " + page_load_time);
}
</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
