3

デバイスが網膜をサポートしている場合、Apple.comは常に最初に標準画像を表示し、次にjavascriptを使用して網膜画像をロードします。

アップルがHTTPリクエストを減らすためにCSSメディアクエリを直接使用しないのはなぜですか？

4

3 に答える 3

7

簡単な答え-ブラウザ-プリフェッチ。

JSを使用して次のいずれかを行う以外に、彼らができることは何もありません。

  1. メディアクエリテストを実行し、JSを使用し、サポートがある場合はHQイメージに入力します
  2. メディアクエリテストを実行し、JSを使用して、サポートがある場合はCSSスタイルシート（URL宣言を含む）に入力します。

ここでの目標は、HTTPリクエストを減らすことではありません。目標は、大部分が冗長なデータの同時HTTPリクエストを減らすことです。ブラウザが高解像度バージョンをサポートしていないが、とにかくその帯域幅を使用することを余儀なくされている場合はさらにそうです。

JSを実行する利点：

  1. ダウンロードされているのはより軽いメディアのみであるため、ページの読み込みが速くなります
  2. ページの読み込み中のHTTPリクエストが少なくなります。HQ画像をリクエストするまでに、ページの残りの部分はすでに設定されているため、「追加リクエスト」を使用すると、エクスペリエンスが1ビットも遅くなりません（DOMアクセスなどで愚かなことをしない限り）。普遍的な真実）

最終的に、仕様は、要素の属性と<picture>組み合わせて、ブラウザが独自の内部クエリとページプロファイリングに基づいてメディアをインテリジェントに処理できるようにするJSフリーの方法を可能にします（例：LTEのユーザーです）接続、またはそれらは現在どこかで丘の2Gにあります）。srcset=media=<source>

于 2012-08-20T06:00:08.483 に答える
3

初期ロードの時間を節約するため。特にワイヤレス/3gのような遅い/むらのある接続で。

画像置換コード（https://gist.github.com/2029936）の適切なソース、特に関数__replaceNextQueueを見ると、実際に画像を置換する前にタイムアウトが設定されていることがわかります。

これは、新しい画像が要求される前に、UIの最初の描画を含むブラウザイベントキューが終了したことを確認するために行われます。これにより、ブラウザは小さい（ファイルサイズ）画像をダウンロードでき、ユーザーは大きい画像を開始する前に新しいアクションの実行を開始できます。

UIを最初に描画するまで、大きな画像のダウンロードを延期すると、特に低速の接続で時間を節約できます。

于 2012-08-20T06:11:17.867 に答える
2

すべての画像がCSS経由で読み込まれるわけではないため、一部の画像はHTMLを使用しています。

于 2012-08-20T05:43:44.253 に答える