display:none; を使用していくつかのものを隠した場合。例: images 、レンダリング エンジンによってダウンロードされますか? はいの場合、同じ Web ページをモバイルで開いているときに、ダウンロードするのに余分な負荷がかかるということですか?
これは、モバイル用に同じ Web ページを変更することは、悪い考えである可能性があることをさらに意味します。ご意見をお聞かせください。ありがとう。
display:none; を使用していくつかのものを隠した場合。例: images 、レンダリング エンジンによってダウンロードされますか? はいの場合、同じ Web ページをモバイルで開いているときに、ダウンロードするのに余分な負荷がかかるということですか?
これは、モバイル用に同じ Web ページを変更することは、悪い考えである可能性があることをさらに意味します。ご意見をお聞かせください。ありがとう。
はい、ページ全体がダウンロードされます (非表示の要素とすべて)。ページがブラウザのdisplay:none
CSS エンジンによって処理されるまでは意味がありません。
画像がインラインであるか、CSS スタイル内の背景画像であるか、またはメディア クエリを介して取り込まれているかにかかわらず、画像のダウンロードを停止する方法はいくつかあります。ほぼすべてのモバイル デバイスで動作します (ただし、「Fennec 10.0+」のみがイメージをダウンロードしたデバイスです。Tim Kadle のテスト結果を参照してください)。
Tim Kadlec の「Media Query & Asset Downloading Test Results」の調査:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
背景画像の場合、親要素を非表示にします。それができない場合は、メディア クエリを使用して、画面またはデバイスのサイズが特定のサイズの場合にのみダウンロードするように背景画像を設定します。メディアクエリの中に入れて、隠したい/ダウンロードしたくないものを定義するだけです。すごいじゃないですか。
http://timkadlec.com/mq/test4.phpで使用できるもう 1 つの優れたテストも非常にシンプルです。
このテストでは、メディア クエリに関連する画像をダウンロードしているかどうかを確認するために、ブラウザ ウィンドウのサイズを変更して「デスクトップ」または「モバイル」を模倣するだけです。テストする各シナリオのリンクをクリックするだけです。