查找特定DOM元素加載多長時間

Question

我正在研究一個JavaScript實用程序，它告訴用戶嵌入到網頁中的第三方鏈接的數量。我希望能夠給出他們花費多長時間（可能有效載荷大小）的指標，很像FireBug，但我不知道我是否可以使用原始JS獲取這些信息。

這個工具的消費者業務的人誰也不會運行Firefox，或者瞭解螢火蟲等

有什麼建議？

Answer 1

使用jQuery，您可以掛載到所有圖像上的加載事件，然後記錄$（document）.ready和當前時間之間的時間差。這會給你一些工作的基準。

例如，下面應記錄毫秒的＃花了每個圖像加載（從目前的DOM準備）：

$(function() { 
    var startTime = new Date().getTime(); 

    $("img").load(function() { 
    var currentTime = new Date().getTime(); 
    console.log(this.src + " " + (currentTime-startTime)); 
    }); 
});