記事「GitHub を高速に保つ方法」では、GitHub スタッフ メンバーが各ページ ロードのさまざまなパフォーマンス メトリックを確認するために使用できるツールバーについて説明しています。表示される 2 つの項目は、読み込まれた JavaScript と CSS の KB です。
読み込まれた JavaScript と CSS の KB をどのように判断できますか? JavaScript は、外部からロードされたリソースにアクセスする方法を提供しますか?
私の目標は、同様のツールバーを作成し、外部から読み込まれたすべてのリソースのサイズを表示することです。
、、 などのタグを検索して<script>、関連する、などの属性にアクセスし、HEAD メソッドを使用して XmlHttpRequest を発行し、応答から Content-Length ヘッダーを使用できると思います。<link><img>srchref
もう 1 つの方法は、応答を返す前に生成された HTML を解析し、外部から読み込まれたリソースを特定し、それらのサイズを直接取得してから、外部リソースのサイズが事前設定された応答にツールバー コードを追加することです。
しかし、より効率的または簡単な方法が利用できるかどうか疑問に思っています。