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

當然，他們與服務器之間建立了連接，以獲取這些內部服務器指標。 他們很可能會通過該渠道而不是從javascript API獲取有關投放資源的信息。