問題タブ [resource-timing-api]

リソース タイミング APIに関するこの投稿を読んでいますが、次の制限の背後にある理由を理解できません。

サードパーティからフェッチされたリソースは、サイトが詳細なネットワーク タイミング データを収集できるように、追加の HTTP ヘッダー (Timing-Allow-Origin: *) を提供する必要があります。ヘッダーがない場合、利用可能なデータはリクエストの合計期間だけです。

ヘッダーなしでリクエストをブロックする理由は簡単に理解できますが、Access-Control-Allow-Originヘッダーなしでタイミングに関する情報を取得してはいけない理由を理解するのに苦労していTiming-Allow-Originます。

ドメインで実行され、他のさまざまなドメイン (サードパーティのリソース) から画像を取得するスクリプトを作成しました。

私はwindow.performance.getEntriesByType('resource')物事の一般的な健康診断を受けるために使用しようとしています。これらのリソースは他のドメインにあるため、Timing-Allow-Originを介してタイミング データを取得するには、応答が応答ヘッダーに設定されている必要があるようwindow.performance.getEntriesByType()です。

これは本当ですか？

さらに、スクリプトを実行すると、Chrome ブラウザは有用な情報を返します。実際、プログラムで取得できれば、このデータを使用できます。ただし、Chrome が表示するデータと返されるデータはwindow.performance.getEntriesByType()異なります。

スクリーンショットを添付しました。これは、Chrome がリソースをロードする際の便利なタイミングの内訳を示しています。パフォーマンスによってエントリ オブジェクトのデータが一致しません。

たとえば、右側のタイミング グラフで DNS ルックアップ時間を確認してから、パフォーマンス エントリ オブジェクトの domainLookupStart 値と domainLookupEnd 値を確認します。これらの値は互いに一致しません。

不一致があるのはなぜですか? Chrome のデータを取得するにはどうすればよいですか? パフォーマンス エントリ オブジェクトから Chrome が表示しているものを取得するにはどうすればよいですか?

ありがとう！

w3c Resource Timing API を使用しています。window.performance.getEntriesByType("リソース"); これにより、iframe を含むリソースの一覧が表示されます。ただし、埋め込まれた iframe のリソースを取得するには、iframe のパフォーマンス オブジェクトを取得する必要があります。これには、その DOM ノード/要素への参照が必要です。

問題は、iframe の URL しかわかっていない場合に iframe のノード参照を取得する方法です (上記のコード サンプルとは異なり、iframe の ID または名前はわかりません)。

ドキュメントの要素を反復処理してから iframe をフィルタリングし、iframe の URL を Resource Timing API が返したものと比較する以外に、(iframe の URL が与えられた場合) iframe の DOM ノードを取得する簡単な方法はありますか?

w3c リソースのTiming APIは、.js、.css、.gif、フォントなどのリソースをロードするタイミングの詳細を見つけるメカニズムを提供します。ただし、現在の実装では、リソースのサイズを返す実装がまだ実装されていません ( http:/ /www.w3.org/TR/resource-timing/#performanceresourcetiming transferSize)。

ブラウザ ベンダーが属性「transferSize」を実装するまで、アプリケーション開発者またはツール ベンダーは、特定のリソースのサイズをどのように判断するのでしょうか?

実際の Web サイト ユーザーのページ読み込みパフォーマンスを測定しようとしています。データをよりよく理解するために、キャッシュが準備されたかどうかによってデータを分割したいと思います。

そのため、リソースがキャッシュにあるかどうかをリソースをロードする前に知る必要はありません。事後測定で十分です。

少なくとも Chrome と Firefox では、開発ツールの [ネットワーク] タブに、転送されたサイズを表示する列があります。この情報を JavaScript で取得することはできますか?

Resource Timing API には、まさにこのケース (「transferSizeリソースがローカルで取得された場合は 0 を返さなければならない」)に対する規定があるようですが、まだそれを実装しているブラウザーはありません。

開発ツールがこの情報を表示するという事実は、何らかの方法でアクセスできるかどうか疑問に思います。何か案は？

Chrome はいつから window.performance.clearResourceTimings をサポートするようになり、利用できない場合の代替手段は何ですか? リリースノートや MDN で詳細を見つけることができません。clearMarks 関数がありますが、アイテムのリストはリセットされません。

Ubuntu クラスターで単純なタスク スケジューラを構築したいので、他のユーザー レベルのアプリケーション用の API を公開するリソース追跡ライブラリが必要です。

しばらく探しましたが、コマンドライン ツールしか見つかりませんでした。

それで、Ubuntu Linux 用の使用可能なリソース追跡ライブラリがあるかどうか疑問に思っていますか?

どうもありがとう。

各 API 呼び出しを測定し、それぞれの期間を Google アナリティクスに送信できる AngularJS (1.5.x) のインターセプターを実装しようとしています。

私はこれのダミーの実装から始めましたnew Date().getTime()。

一見すると良さそうに見えますが、Chrome の Networks タブで収集されたリクエストの期間を比較すると、私のコードで収集されたリクエストは、Chrome で収集されたリクエストよりも常に長い (場合によっては長い!) ことに気付きました。

私の頭に浮かんだもう 1 つのアイデアは、User Navigation APIの使用です。そのため、コードを次のように変更しました。

..しかし、 Chromeによって収集されたものとは異なる結果を受け取りました。new Date().getTime()

私は何を間違っていますか？どうすればいいですか？多分リソースタイミングAPI？AngularJS は確かに少し課せられます。

特定のリクエストを認識できないため、 User Navigation API メソッドを使用window.performacne.getEntries()してリクエストの期間を見つけることができません。各リクエストのパラメーターはそこでは利用できず、パラメーターが異なるだけの同じ API 呼び出しがたくさんあります。

AngularJS で使用されるネイティブ XHR リクエストをデコレートする必要がありますか?