【IE】大量のdivタグ(ブロック要素)を描画するなら、imgタグのほうが早い

2019年2月13日HTML, JavaScript, フロントエンド

対象のブラウザ:IE11
データ数:30,000個以上
経緯:1日(24時間) × 1ヶ月(31日) × 50レコード分のデータを、セルごとに色を分けて1つの画面で表示したい。
その際、テーブルのレコードにhoverで背景色と枠色の指定をしたい。

▼こんなデータ

試したこと:
① tableのtrの中に、24時間×31日分のtdを作成し、それぞれにclassを指定して色を分ける
② tableのtrの中に、31日分のtdを作成し、tdの横幅を24等分した横幅のdivを作成し、それぞれにclassを指定して色を分ける
③ display: tableを指定したdiv(dl・dt・dd)テーブルの中に②と同様にdivで色分け

上記を試した上、hoverやスクロールのレスポンス速度を感覚で示したのがこちらです。

結果:
① Chrome:サクサク IE:超モサモサ
② Chrome:サクサク IE:まあモサモサ
③ Chrome:サクサク IE:モサモサ

とりあえずIEでは大量のdivやtdを作ると描画時にブラウザがカックカクになることが判明しました。
Chromeでは常にサクサクでしたが、IEではどれもモタつきます。製品としてはまずいレベルです。

そこで、フロントエンドのスゴイ人に相談してみました。その結果いただいたのが意外な回避策でした。

④ tableのtrの中に、31日分のtdを作成し、tdの横幅を24分割した横幅のdivを作成し、それぞれに画像ファイルを指定して色を分ける

結果:
④ Chrome:サクサク IE:わりとサクサク

すごい!さっきまでのモサモサ感が一気に解消しました。
スタイルのbackgroundで色を指定するのではなく、1px×1pxの画像(PNG)を縦と横に引き伸ばしてdivっぽく使うという荒業。
画像は重いという固定概念があったのですが、極めてサイズが小さい画像を使いまわしするのであれば、ブロック要素よりも超高速に描画できることがわかりました。

3万個以上のdivを書くなんて、稀なことだけどね。