2

コードを変更できない既存の単一ページ Web アプリケーションがあります。一部のユーザーは、アプリケーションのパフォーマンスがあまり良くないと不満を漏らしています。

この方法で読み込み時間を監視したいと思います。

  1. ページのクリックのタイム スタンプを記録する
  2. ajax リクエストやその他の JavaScript マジックが実行された後、ページのレンダリングが完了したときのタイムスタンプを記録します。
  3. 2 つのタイム スタンプの差を計算し、それをサーバーにポストします。

ステップ 1 と 3 は jQuery で簡単に実行できますが、ステップ 2 にアプローチする最善の方法がわかりません。

これは非常に明白なシナリオのようですが、この種の監視を実行するための標準ツール セットはありますか?

4

5 に答える 5

1

jQuery が提供するグローバルなajaxStopイベントを使用できます。

var start = +(new Date());
$(document).ajaxStop(function() {
    var diff = +(new Date()) - start;
    // do logging
});

これには、最後の AJAX 呼び出しの後に実行されたコードは含まれませんが、最後の呼び出しの前に発生したことが予想されるボトルネックを含んでいる場合、これは非常に便利です。

于 2013-10-28T10:44:26.043 に答える
1

これは次のことに役立ちます。

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}
于 2013-10-28T09:02:42.860 に答える
0

これは次の方法で実現できます...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        var startTime, endTime, timeDifference;
        function doIt() {
            var startTime = new Date().getTime();
            $.ajax({
                type: 'post',
                url: 'a.php',
                success: function (resp) {
                    endTime = new Date().getTime();
                    timeDifference = endTime - startTime; //Time Difference is stored in milliseconds
                }
            })
        }
    </script>
</head>
<body>
<button style="position: absolute; top:60px" onclick="doIt()">start</button>
</body>
</html>
于 2013-10-28T09:00:21.147 に答える
0

これは完全な解決策ではありませんが、次のコードは機能しています。ユーザーがクリックするとタイマーが開始されます。このcheckHTML機能は、ページ コンテンツの変更を監視します。

var timeLogging = new Array();
var timeStart;

$(document).click(function() {
    initLogEvent();
});

function initLogEvent() {
    caption = $(".v-captiontext:first").text();
    timeStart = +(new Date());
    timeLogging.push(new Array(0,0));
    timeLogging[timeLogging.length - 1][0] = timeStart;
}

initLogEvent();
// Start a timer to check the changes in html
window.setInterval(checkHtml, 250);
// Start a timer to create the reports
window.setInterval(sendReport, 1000);


var html;
function checkHtml() {
    current = $("body").html();
    if (current != html) {
        html = current;
        var diff = +(new Date()) - timeStart;
        timeLogging[timeLogging.length - 1][1] = diff;
    }
}

function sendReport() {
    if (timeLogging.length > 3) {
        console.log(timeLogging);
        // Do additional stuff with the collected data
        for (i = 0; i <= timeLogging.length; i++) {
            timeLogging.shift();
        }
    }
}
于 2013-10-28T14:23:54.753 に答える