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

Question

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

该工具的使用者是不会运行 Firefox 或了解 firebug 等的商业人士。

有什么建议吗？

Answer 1

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

例如，以下内容应记录加载每个图像所需的毫秒数(从 dom 准备好时开始):

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

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