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

Question

在文章"How we keep GitHub fast"中，他们描述了一个工具栏，GitHub工作人员可以使用它来查看每个页面加载的各种性能指标。显示的两个项目是JavaScript和CSS加载的KB。

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

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

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

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

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

Answer 1

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

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

当然，他们可以与服务器建立连接以获取这些内部服务器指标。它们也有可能通过该频道获取有关所提供资源的信息，而不是来自javascript api。