Показать размер файла загруженных извне ресурсов для HTML-страницы

Question

В статье "Как мы поддерживаем GitHub быстро" они описывают панель инструментов, которую сотрудники GitHub могут использовать для просмотра различных показателей производительности каждой загрузки страницы. Два отображаемых элемента - это загруженные файлы JavaScript и CSS.

Как они могут определить загруженную базу данных JavaScript и CSS? Предоставляет ли JavaScript способ доступа к внешним загруженным ресурсам?

Моя цель - создать похожую панель инструментов и отобразить размер всех загруженных извне ресурсов.

Я полагаю, вы могли бы искать <script>, <link>, <img> и т. д. и получить к ним доступ src, href и т. д., введите XmlHttpRequest с помощью метода HEAD, а затем используйте заголовок Content-Length из ответа.

Другой подход заключается в том, чтобы проанализировать сгенерированный HTML перед возвратом ответа, определить загруженные извне ресурсы, получить их размеры напрямую, а затем добавить код панели инструментов к предварительно заполненному ответу с размерами внешних ресурсов.

Но мне интересно, есть ли более эффективный или более простой метод.

Answer 1

Я предполагаю, что они использовали расширение браузера, такое как speedtracer, которое имеет доступ к тем же показателям, что и сетевая панель вашего отладчика.

JavaScript обычно не имеет доступа к внешним ресурсам, однако может быть возможно загрузить их через XHR для их проверки. Кроме того, вы можете получить часть этой информации через API Navigation-Timing (см. Статью html5rocks).

И, конечно, у них есть открытое соединение с их серверами для получения этих внутренних показателей сервера. Также вполне возможно, что они получают информацию об обслуживаемых ресурсах через этот канал, а не из API javascript.