頁面加載時間與Jquery

我想計算頁面加載時間;這意味着從第二個0（加載了一個小的jquery代碼片段）到第二個x，當整個頁面加載時。頁面加載時間與Jquery

我想知道是否有人有這方面的經驗，以及如何正確實施它的想法將是apperciated。

請我不需要延期，我已經有螢火蟲，我需要一個js的解決方案

謝謝:)

2009-07-31 Omar Abid

正如其他人所說的，這不會非常準確。但這應該合理工作。

在你<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>

最關鍵的是這種行爲，from the jQuery docs：

當綁定到窗口元素，在事件觸發，當用戶代理完成加載文檔內的所有內容，包括窗口，框架，對象和圖像。

來源

2009-07-31 09:21:34 Domenic

可能會爲您更好使用一個瀏覽器插件？使用JavaScript進行計算有必要低估頁面加載時間，因爲它不包括加載jQuery代碼段的時間，並且不包括髮送請求的瀏覽器和Web服務器響應之間的時間？

有一個用於Firefox的Load Time Analyzer插件。

來源

2009-07-31 09:05:50

不，我希望每一個瀏覽器;這是因爲我會收集所有的加載時間，並與他們以後分析他們以後 – 2009-07-31 09:07:54

如果你是爲了優化目的這麼做，那麼我建議你使用Yslow。它是一個Firebug-Firefox擴展。它可以顯示你的頁面加載時間和很多其他有用的信息。

來源

2009-07-31 09:06:25

-2

由於$(document).ready();在頁面加載完成時觸發，因此您無法真正使用jQuery執行此操作。

您可以使用Firfox的YSlow Firebug插件。如果您希望在所有瀏覽器上都能使用此功能，則需要添加serverside代碼以顯示將第一個元素寫入底層元素時需要多長時間。

如果這不是你想要的，你可以使用一個工具，如Selenium，並寫一個測試，以捕獲從open到waitForPageToLoad結束的時間。 Selenium可以在所有瀏覽器上運行

來源

2009-07-31 09:07:13 AutomatedTester

非常密集，尋找簡單和簡單的東西，將瀏覽它雖然 – 2009-07-31 09:15:55

它不是真的密集，但我一直在使用它多年。在http://www.theautomatedtester.co.uk/selenium_training.htm – AutomatedTester 2009-07-31 09:24:09

由於腳本，儘快爲他們被解析執行，我建議你把一個腳本標籤只是頭內，那麼腳本掛鉤的頁面加載事件已加載的jQuery後：

<html> 
<head> 
    <script> 
     // Capture start time 
    </script> 
    ... 
    <script src="jquery.js" /> 
    <script> 
     $(window).load(function() { 
     // Capture end time 
     }); 
    </script> 
...

這樣，您應該能夠儘可能多地捕捉網頁加載時間。

來源

2009-07-31 09:36:50

閱讀W3C recommendation for Navigation Timing

亮點：

例如，下面的腳本顯示了簡單的嘗試測量時間才能完全加載一個頁面：

<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>

該腳本計算加載頁面所需的時間a在執行頭部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>

來源

2016-05-26 14:04:40 Jed

頁面加載時間與Jquery

回答

相關問題