顯示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。