前端網頁性能測試

我有興趣測量和記錄我們的頁面加載性能後，從服務器返回初始正文。換句話說，一旦瀏覽器將HTML加載到頁面上的所有圖像，css和javascript，並完成了渲染並執行第一個jquery就緒塊。前端網頁性能測試

對此進行性能測試的最佳方法是什麼？我讀過的大部分內容都傾向於關注服務器響應和數據下載。但是，用戶等待的大部分時間都在此之後。有沒有什麼能夠以自動方式幫助解決這個問題？

來源

2013-02-25 chrishomer

你需要自動化的用戶活動？或者只是測量客戶端的時間來呈現頁面？ – Brad 2013-02-25 21:23:40

'負載測試'與'網頁加載時間性能'不一樣...只是說，標題混亂... – yoosiba 2013-02-26 08:59:25

對不起，您對。我在想「頁面加載」而不是「服務器加載」。 – chrishomer 2013-02-27 16:19:14

Chrome在開發人員工具中內置了一個分析器。 PC上的CTRL+SHIFT+I或Mac上的Cmd+option+J。

使用jQuery，DOM就緒會在窗口加載之前發生。所以，這樣的事情應該告訴你DOM負載和資產負載之間的增量：

// When the DOM is loaded 
$(function(){ 
    console.log('Start ' + new Date().getTime()); 
}); 

// When all the images are loaded 
$(window).load(function(){ 
    console.log('End ' + new Date().getTime()); 
});

來源

2013-02-25 21:24:03 AlienWebguy

請注意JavaScript時間的準確性：http://ejohn.org/blog/accuracy-of-javascript-time/ – Brad 2013-02-25 21:44:01

在我看來，任何時候從獲取時間戳本身或等待到下一個15ms隊列的時間丟失或錯誤計算都是微不足道的。如果你在基準測試的時候提高頁面加載時間少於100毫秒，你永遠不會獲得投資回報。 – AlienWebguy 2013-02-25 22:03:39

當然，但這一切都取決於你想要分析的是什麼。這就是我指出的原因。我已經看到很多情況，人們試圖在每次迭代中計算一些東西，並想知道他們的數據爲什麼會遍佈整個地方。在JavaScript中比較時間時，您只能查看更大的圖片，或者進行多次迭代。 – Brad 2013-02-25 22:20:15

的網絡性能優化（WPO）行業的刀具監控前端性能走的是WebPagetest。它可以非常詳細地分析網頁的全部負載，包括瀑布圖，向您顯示Web瀏覽器如何加載每個資源以及哪些地方可能會遇到問題。您還可以獲得關鍵瀏覽器活動，電影和視頻的屏幕截圖。它確實是一個了不起的開源工具，它的主要開發人員是Google僱用的。

http://www.webpagetest.org

WebPagetest不是雖然一個自動化的解決方案。 SpeedCurve是一項商業服務，運行在WebPagetest之上，可自動執行測試過程並監控您的前端性能。它還會將您的網站與競爭對手進行基準對比，並提醒您網站構建的問題。免責聲明：我是SpeedCurve的創造者。

http://speedcurve.com

來源

2013-08-17 09:59:10 zeman

你是SpeedCurve的創造者嗎？ – 2014-10-27 23:23:05

你可以嘗試以下提供你的用戶如何體驗您的實時網站或web應用程序的畫面清晰真實用戶監控服務。

來源

2015-09-29 06:13:48