文章中“我们如何保持 GitHub 的快速运行” https://github.com/blog/1252-how-we-keep-github-fast，他们描述了一个工具栏，GitHub 工作人员可以使用该工具栏查看每个页面加载的各种性能指标。显示的两项是加载的 JavaScript 和 CSS 的 KB。
他们如何确定加载的 JavaScript 和 CSS 的 KB？ JavaScript 是否提供了访问外部加载资源的方法？
我的目标是创建一个类似的工具栏并显示所有外部加载资源的大小。
我想你可以搜索<script>, <link>, <img>等标签并访问其相关src, href等属性，使用 HEAD 方法发出 XmlHttpRequest，然后使用响应中的 Content-Length 标头。
另一种方法是在返回响应之前解析生成的 HTML，确定外部加载的资源，直接获取其大小，然后将工具栏代码附加到预先填充的外部资源大小的响应中。
但我想知道是否有更有效或更简单的方法可用。
我猜他们使用了类似的浏览器扩展速度追踪器 https://developers.google.com/web-toolkit/speedtracer/get-started，它可以访问调试器的网络面板向您显示的相同指标。
JavaScript 通常无法访问外部资源，但是可以通过 XHR 加载它们来检查它们。此外，您也许可以通过以下方式获取其中一些信息导航授时API http://www.w3.org/TR/navigation-timing/ (see html5rocks 文章 http://www.html5rocks.com/en/tutorials/webperformance/basics/).
当然，他们有一个与其服务器开放的连接来获取这些内部服务器指标。他们也可能通过该渠道而不是从 javascript api 获取有关所服务资源的信息。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
