有沒有確定性能的方法來衡量「繪畫時間」？

我正在測試大型網站的各種性能調整，我需要量化從初始加載到出現文檔元素（即繪製時間）需要多長時間。使用Chrome的開發人員分析器有沒有一種好的方法？有沒有確定性能的方法來衡量「繪畫時間」？

爲了澄清，我需要知道從加載到繪製頁面的總時間。

2012-12-27 bjork24

加載和繪畫的時間。我會在這個問題上更加明確。 – bjork24

這不就是DOM ready和'onload'之間的區別嗎？ –

你可以做以下兩件事之一： 1）使用Dan Mayor的方法。您可以簡單地在繪畫腳本的前後使用new Date().getTime，並將其減去以找出腳本完成的時間。但是，如果整個代碼滯後，這可能會滯後。這不一定是最準確的方法，但它可以完成工作。（不過，你可以創建一個單獨的函數，計算獨立於其他腳本的時間。見下:)

function findTime(done){ 
if (done==false){var time1 = new Date.getTime();} 
if (done==true) {var time2 = new Date.getTime(); window.alert(time2-time1);} 
}

哪裏done是劇本完成後，您將添加一個布爾參數。

2）Chrome有一個很好的開發人員控制檯，具有時間線功能。基本上，打開你的Chrome瀏覽器並點擊Command + Shift + C（控制+ shift + C for windows），然後點擊時間軸按鈕。然後，點擊控制檯底部的小圓點，它會變成紅色。刷新頁面，時間軸將開始收集腳本的各種時間數據。繪畫事件以綠色顯示。不幸的是，這是第三方解決方案。最後，由於滯後時間，不同的互聯網連接速度，處理器速度等不同，因此無法直接測量此時間。但是，這兩種方法與實際答案非常接近。您可能想要在不同的瀏覽器和計算機上測試腳本。

來源

2012-12-27 19:18:26

對於初學者來說，我肯定會用在Firebug的「網絡面板」瞭解自己：

http://getfirebug.com/network

據我所知，Chrome提供了一個類似的工具：點擊「F12」（或使用的「扳手」圖標）：

https://developers.google.com/chrome-developer-tools/

來源

2012-12-27 02:58:06 paulsm4

您可能希望查看「DOMContentLoaded」事件，這是jQuery綁定到的以提供.ready（）方法的事件。基本的想法是你會想使用Date.getTime（）來記錄毫秒值，第一個應該是你文檔的最後一行（對於html下載的標記）。第二個要在onload，DOMContentLoaded，加載和其他DOM就緒狀態事件之後調用。

簡單的例子（你的HTML輸出端）：

<script type="text/javascript"> 
    window.downloadComplete = new Date().getTime(); 
    document.onload = function() { window.domParseComplete = new Date().getTime(); } 
    window.onload = function { window.renderComplete = new Date().getTime(); } 
    window.paintTime = window.renderComplete - window.downloadComplete; 
</script>

在這個例子中window.downloadComplete將是毫秒時，DOM下載完成後，window.domParseComplete是當DOM被解析毫秒window.renderComplete是窗口報告渲染完成時的毫秒數。 window.paintTime是從這些毫秒時間計算的毫秒數。

來源

2012-12-27 03:08:29

編輯我的答案，以包含我所建議的更直接的例子 – 2012-12-27 07:16:58

有沒有確定性能的方法來衡量「繪畫時間」？

回答

相關問題