現在、のpng画像があり4000x4000ます。tinypng.orgを使用した後、288KB のファイルになりました。
今、私は画像をロードし、それをDOMに配置し、その上にたくさんのキャンバスを描画できるようにするための高速な方法が必要です.
私はいくつかをテストしましたが、結果は私を驚かせました。
3 つのテストを行い、読み込み速度のみを確認しました。
<canvas> <img> background-image タグは<img>最速です。
<img>では、タグを使用して巨大な (背景) 画像を表示し、その上にキャンバスを描画できるようにするために汚れた CSS を使用するのは悪い習慣ですか?
それとも、私の場合は canvas を使用して、ロード時間が長くなることを心配しない方がよいでしょうか?
素晴らしい質問です。これは関連しています: IMG と CSS の背景画像をいつ使用するか?
その記事から、人々があなたのページを印刷するつもりなら、あなたは使用しないでしょう<img>- これは印刷物に現れるからです. 同じことが にも当てはまり、論理的な解決策<canvas>を作成します。background-image
背景画像は CSS でどのように追加されますか? インラインですか、それとも独自のスタイルシートを使用していますか? 独自のスタイルシートを使用している場合、速度をテストする前に CSS を圧縮してみましたか?
これも関連していると思います: HTML または CSS での画像の読み込みは速くなりますか?
私はあなたの状況を意味論的な観点から見ることを考えます：あなたは何を表示したいですか？その上に何かを描きたい画像ですか？ゲームボードの背景画像ですか？
IMHO：CSSバックグラウンドの場合の500ミリ秒はそれほど遅くはなく、Webサイトのロードには常に数秒かかります。画像の読み込み速度が気になる場合は、を使用してください<img>。ただし、HTMLとをいじる必要があるため、ingは少し難しい場合がz-indexありpositionます。
CSSのバックグラウンドを取ります。