Afficher le format de fichier des ressources chargées de l'extérieur pour une page HTML

Dans l'article «Comment nous gardons GitHub rapidement» , ils décrivent une barre d'outils que les membres du personnel de GitHub peuvent utiliser pour voir différentes métriques de performance de chaque chargement de page. Deux des éléments affichés sont la KB de JavaScript et CSS chargés.

Comment sont-ils en mesure de déterminer la KB de JavaScript et CSS chargée? Est-ce que JavaScript offre un moyen d'accéder aux ressources chargées de l'extérieur?

Mon objectif est de créer une barre d'outils similaire et d'afficher la taille de toutes les ressources chargées extérieurement.

Je suppose que vous pourriez rechercher des balises <script> , <link> , <img> , etc., et accéder à leur href pertinent src , href , etc., émettre un XmlHttpRequest à l'aide de la méthode HEAD, puis utiliser l'en-tête Content-Length from the réponse.

Une autre approche serait d'analyser le HTML généré avant de retourner une réponse, de déterminer les ressources chargées de l'extérieur, d'obtenir leurs tailles directement, puis d'ajouter le code de la barre d'outils à la réponse pré-peuplée avec les tailles de ressources externes.

Mais je me demande si une méthode plus efficace ou plus simple est disponible.

Je suppose qu'ils ont utilisé une extension de navigateur comme speedtracer , qui a accès aux mêmes paramètres que le panneau réseau de votre débogueur.

JavaScript n'a généralement pas accès à des ressources externes, mais il est possible de les charger via XHR pour les inspecter. En outre, vous pourriez avoir accès à ces informations via l' API Navigation-Timing (voir l' article html5rocks ).

Et bien sûr, ils ont une connexion ouverte à leurs serveurs pour obtenir ces paramètres internes du serveur. Il pourrait être possible d'obtenir l'information sur les ressources desservies via ce canal, et non sur un javascript api.