7

ここに示されているタイムライン (IE の F12 開発者ツールを使用してキャプチャ) は、一連のタグの<img>タグが配置されているページを IE がどのように処理するかを示しています。text

ここに画像の説明を入力

2 行目は、イメージの取得を示しています。画像が小さいため、すべての画像データが同じパケット内の HTTP 応答ヘッダーに含まれています。

ただし、次のタイムラインは、<img>タグがファイルの先頭近くに配置され、IE が受信したデータの最初のパケットにある場合に何が起こるかを示しています。

ただし、画像のリクエストは、HTML の最初のパケットが到着した直後に開始されます。

その結果、ページと画像を取得するのにかかる合計時間が短縮されます

しかし、(私見)そのページの下部に(定義された寸法の)画像を配置することをお勧めします。(ページの読み込みが速くなるように)

ただし、私の例では、img が一番上にあるとページの読み込みが速くなることを示しています。

何が欠けていますか?

PS私の質問は、このセクションの簡単に要約されたテキストです

4

2 に答える 2

3

あなたはいくつかの点を欠いています。まず、ベスト プラクティスはダウンロードだけでなくレンダリングにもあります。ページ全体が 3 秒間ダウンロードされ、レンダリングにさらに 2 秒間必要な場合、ユーザーは 3 秒間ではなく 5 秒間待機するためです。画像を一番下に配置するためのベスト プラクティスはわかりません (スクリプトにはそのようなものがあります)。私が知っているベスト プラクティスは、画像のダウンロード中にレンダリングをブロックしないように、幅と高さの属性を含めることです。

テストで見逃しているもう 1 つのことは、並列ダウンロードです。ブラウザーは同時接続数を制限しており、1 つのイメージのみでテストしているためです。信頼できる結果を得るには、より多くの画像を使用してテストを行うか、実際の Web ページを使用してテストを行ってください。

于 2012-12-19T08:54:49.383 に答える
0

接続数を減らすこと、つまりページ全体を一度にロードすることに気を配りたいと思います。インターフェイスとコンテンツ パーツを分割します。インターフェイスがロードされると、ユーザーに待機して接続速度について通知するように求めることができます。次に、プログレス バーを配置し、ユーザーに状況を知らせます。

于 2012-12-19T09:29:12.420 に答える