在"我们如何保持GitHub的快速"一文中，他们描述了一个工具栏，GitHub工作人员可以使用它来查看每个页面加载的各种性能指标。显示的两个项目是加载的JavaScript和CSS的KB。
他们如何确定加载的JavaScript和CSS的KB？JavaScript是否提供了访问外部加载资源的方法
我的目标是创建一个类似的工具栏，并显示所有外部加载资源的大小。
我想您可以搜索<script>、<link>、<img>等标记并访问其相关的src、href等属性，使用HEAD方法发出XmlHttpRequest，然后使用响应中的Content-Length标头。
另一种方法是在返回响应之前解析生成的HTML，确定外部加载的资源，直接获取它们的大小，然后将工具栏代码附加到预先填充的响应中，其中包含外部资源大小。
但我想知道是否有更有效或更简单的方法。
我猜他们使用了类似speedtracker的浏览器扩展，它可以访问调试器的网络面板显示的相同指标。
JavaScript通常无法访问外部资源，但是可以通过XHR加载它们来检查它们。此外，您还可以通过Navigation-Ttiming API获取其中的一些信息(请参阅html5rocks文章)。
当然，他们有一个与服务器开放的连接，以获取这些内部服务器指标。他们也有可能通过该渠道而不是从JavaScriptAPI获得有关服务资源的信息。