0

私は現在モバイルアプリを構築していますが、canvasタグまたはimgタグを使用する方が（パフォーマンス的に）優れているかどうか疑問に思っています。私は実際の画像を自分のウェブサイトに問い合わせます。どちらか一方の利点があるかどうか疑問に思っています。

4

3 に答える 3

4

主な利点は、不要なブラウザー デコードを回避できることです。

ブラウザが画像を screenに描画するには、次のことを行う必要があります。

  1. 画像ファイルのエンコードされたコンテンツを取得する
  2. 画像を元の JPEG、GIF、PNG、または WebP 形式からメモリ内のビットマップにデコードします
  3. 画面にペイント

ユーザーがスクロールしてサイズを変更すると、パフォーマンスの問題が発生します。デコードは特に高価です。しかし、ページを上下にスクロールすると、ブラウザは以前に画面外の画像(つまり、現在のスクロール領域の外側にあるコンテンツ) が占有していたメモリを取得しようとします。これは、画像が画面の端から再表示されるたびに、ブラウザーは同じ高価なデコード プロセスをもう一度実行する必要があることを意味します。長いページに大量の画像が飛び散る場合、ブラウザはスクロール時にカクつく可能性があります。

キャンバスの違い: ブラウザーは、キャンバス内のデコードされた情報をリサイクルしません。そのため、canvas を使用して画像をレンダリングすることで、不必要なデコードを回避しています。

もちろん、モバイル デバイスをターゲットにする場合は、メモリが不足しているため、イメージ タグに切り替えてブラウザーに任せます。

これは、画像のデコードと限られたメモリの間の競合に対処するためのブラウザー固有の戦術だと思います。プロセスはタイムライン開発ツールに表示されるため、Chrome についてより具体的に話していました。

于 2014-05-08T02:27:48.213 に答える
2

いいえ！静的コンテンツを表示している場合は、<canvas>より遅く、はるかに鈍くなります。<canvas>前者は JavaScriptを<img>使用した動的グラフィック用で、後者は URI から取得した静的画像用です。

于 2012-06-07T02:55:54.890 に答える
0

ブラウザーは、HTML のストリーミング中に IMG ソースを読み込むように最適化される傾向があります。そのため、ページが完全に読み込まれる前に画像が表示されます。一方、Canvas は読み込まれる DOM に依存するため、(通常) DOMContentLoaded イベントが発生するまで読み込まれません。Canvas コンテキストを作成する際のレイテンシーとメモリー要件を追加すると、画像が本当に静的な場合は、ほぼ確実に望んでいるものではありません。

画像に凝った処理を加えたい場合は、画像を IMG タグにロードしてから、ロードしたキャンバスに変換して変換を行ってみませんか?

于 2012-06-08T09:51:57.937 に答える