チェスと対戦相手: 背景の比較 img_html/css_WEB-ITnose

モバイルページを作成する場合、画像を表示する方法は通常、CSS 背景スタイルを使用するか、img src タグに追加することによって行われます。しかし、時間が経つと慣れてくると、どれが一番良いのか考えるのを忘れてしまいます。私たちはこの 2 つの違いを本当に理解していますか?両者を比較した場合のメリットとデメリットは何ですか? まず、これら 2 つの方法の基本概念を見てみましょう。背景はcssメソッドに属し、imgはhtmlタグに属します。ブラウザのレンダリングメカニズムに従って、HTML タグが最初に解析され、CSS は HTML 解析が完了した後に実行されます。ここから情報を取得することもできます:

img メソッドは、background メソッドよりも高速に画像を表示できます。

次に、毎日のプロジェクトのニーズに基づいて、2 つの読み込み速度、FPS、アニメーションのパフォーマンスなどを比較します:

テストの準備

2 つのデモでは、background-image メソッドと img src メソッドは次のとおりです。画像の表示に使用されます。各ページには 500 個の DOM があり、速度、FPS、アニメーションの流暢性などがテストおよび比較されます。

1. 速度テスト

テストネットワーク条件は、通常の 3g (750kb/s 100ms RTT) です。 実装方法の違いにより、ページのコードサイズが異なります。 2 つのテスト ファイルのうち、background ページは完全ロード後の 337kb、img ページは完全ロード後の 347kb です。 ロード後の 2 つのデモのサイズは、主に CSS コードと HTML コードによって影響されます。背景ページの実装メソッドでは、CSS コードが比較的多く、HTML コードが少なくなります。一方、img ページ実装メソッドでは、CSS コードと HTML コードが比較的少なくなります。もっと。そのため、各ページに 500 個の DOM が配置され、HTML コードの量が大幅に増加し、その結果、img ページがbackground ページよりも大きくなります。 最後に、Navigation Timing API を使用してページの読み込み時間をテストします。テスト コードは次のとおりです:

rrree

テスト データは (単位 ms):

335 43352 3353.1img321632383224 3224 3230322232253229321232153223.5

											平均
背景	3356	3352	3350	3354	3353	3354	3353	3353

上記のデータから、背景ページと画像の読み込み速度に大きな違いがないことがわかります前述の「img ページ」と組み合わせると、背景ページよりも大きくなります。最終的には、この 2 つの読み込み速度に大きな違いはないと言えます。極端な場合には、img ページの実装はわずかに高速になります。

2. FPS テスト

理論的には、両方の実装方法にほとんど違いはありませんが、それでも統計を作成しました。以下の表を参照してください。

平均背景 16.0 17.718.617.717.316.217.719 16.215.717.8192118.31 ここに示されたデータから、この 2 つの間の FPS には大きな差はないと結論付けることができます。 3. アニメーションのパフォーマンス 2 つのデモ ページでは、CSS3 のtransform:rotate を使用して、0 度から 360 度までの円形回転アニメーションを実装しています。デモアドレス: (画像ページ) (背景ページ) テストによって取得された GPU データは次のとおりです:

平均値

背景111415233011.12526.9251219.3img 6.26.26.26.26.26.2

			6.2	6.2	6.2				上記のデータは、バックグラウンド ページ実装の GPU 使用率が 0 から 30 の間で変動することを示していますが、img ページ実装の GPU 使用率は常に 6.2 のままです。比較的ローエンドの携帯電話で体験すると、背景ページのアニメーションに多少の遅れがあるのに対し、画像ページのアニメーションは非常にスムーズであることがわかります。ここから結論を導き出すことができます。アニメーションに関して言えば、img 実装はバックグラウンド実装よりもパフォーマンスが高く、アニメーションのパフォーマンスを向上させることができます。 まとめ 他の重要な側面と組み合わせて、最終的なまとめを作成しましょう: ページの読み込み速度に関しては、両者に大きな違いはありません アニメーションを実行する場合は、img タグを使用してみてください。パフォーマンスが向上します SEO セマンティクスの観点からは、背景は関係ありませんが、img は明確なセマンティクスを持っています 背景を CSS スプライトと組み合わせることで、ページの読み込み速度を最適化できます を使用することをお勧めします。重要な画像には img タグを使用します。ページが読み込まれたときに最初に表示されます。 読んでいただきありがとうございます。一緒に議論することを歓迎します。