查找特定DOM元素加载的时间

Question

我正在开发一个JavaScript实用程序，它告诉用户嵌入到网页中的第三方链接的数量。我希望能够像FireBug一样给出加载时间（以及可能的有效负载大小）的指标，但我不知道是否可以使用原始JS获取此信息。

此工具的消费者是不会运行Firefox或了解firebug等的商务人士。

有什么建议吗？

Answer 1

使用jQuery，您可以挂钩所有图像上的加载事件，然后记录$（document）.ready与当前时间之间的时间差。这将为你提供一些工作基准。

例如，以下内容应记录每个图像加载所需的ms数（从dom准备好的那一刻起）：

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

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