javascript - 显示 HTML 页面的外部加载资源的文件大小

Question

在“我们如何保持 GitHub 快速”一文中，他们描述了一个工具栏，GitHub 工作人员可以使用该工具栏查看每个页面加载的各种性能指标。显示的两个项目是加载的 JavaScript 和 CSS 的 KB。

他们如何确定加载的 JavaScript 和 CSS 的 KB？JavaScript 是否提供了访问外部加载资源的方法？

我的目标是创建一个类似的工具栏并显示所有外部加载资源的大小。

我想您可以搜索<script>, <link>,<img>等标签并访问它们的相关src,href等属性，使用 HEAD 方法发出 XmlHttpRequest ，然后使用响应中的 Content-Length 标头。

另一种方法是在返回响应之前解析生成的 HTML，确定外部加载的资源，直接获取它们的大小，然后将工具栏代码附加到预先填充的带有外部资源大小的响应中。

但我想知道是否有更有效或更简单的方法可用。

Answer 1

我猜他们使用了像speedtracer这样的浏览器扩展程序，它可以访问调试器的网络面板向您显示的相同指标。

JavaScript 通常无法访问外部资源，但是可以通过 XHR 加载它们以检查它们。此外，您还可以通过Navigation-Timing API获取其中一些信息（请参阅html5rocks 文章）。

当然，他们有一个连接到他们的服务器以获取这些内部服务器指标。他们也有可能通过该渠道而不是从 javascript api 获取有关服务资源的信息。