⚡ パフォーマンス改善のヒント集

ツールチップやモーダルで、パフォーマンスに影響が出やすいのは、主にJavaScriptの処理とCSSの描画だよ。それぞれについて、改善のヒントを見ていこう。

JavaScript関連のヒント

• イベントリスナーは賢く使おう！
  • たくさんの要素（例えばリストの各項目）にツールチップを付けたい時、一つ一つにaddEventListenerを設定すると、メモリをたくさん使ってしまうことがある。代わりに「イベント委譲 (Event Delegation)」を使ってみよう。これは、親要素（例えばリスト全体）にだけイベントリスナーを設定して、イベントが発生したのがどの要素か(event.target)を見て処理を振り分けるテクニックだよ。効率が良くなることが多いんだ。
    イベント委譲の概念図
  • マウスを動かすたびに発生するmousemoveイベントや、スクロール中に発生するscrollイベントの処理は、あまりにも頻繁に実行されると重くなりがち。処理の実行回数を間引く「Debounce (デバウンス)」や「Throttle (スロットル)」というテクニックや、アニメーションならrequestAnimationFrameを使うのが効果的だよ（ドラッグ可能モーダルの例で少し使ったね！）。
  • 要素がページから削除されるなど、もう不要になったイベントリスナーは、removeEventListenerできちんと解除しよう。解除しないとメモリリーク（メモリの無駄遣い）の原因になることがあるよ。
• DOM操作は最小限に！
  • JavaScriptでHTML要素のスタイルを変えたり、中身を変えたりする操作（DOM操作）は、比較的コストが高い処理なんだ。何度も同じ要素を探したり、スタイルを少しずつ変更したりするのは避けよう。要素は一度取得したら変数に保存しておいたり、スタイルの変更はCSSクラスの付け外しで行うのがオススメ。
  • たくさんのHTML要素をまとめて追加したい時は、DocumentFragmentという一時的な入れ物を使うと、一回のDOM操作で済ませられて効率的だよ。
• 重い処理は後回し！ (遅延読み込み)
  • モーダルの中に大きな画像や動画、外部コンテンツ(iframe)などがある場合、ページの初期読み込み時に全部読み込もうとすると時間がかかってしまう。そこで「遅延読み込み (Lazy Loading)」の出番！モーダルが実際に表示されるタイミングになってから、それらの重いコンテンツを読み込むようにするんだ。
  遅延読み込みの概念図

CSS関連のヒント

• アニメーションは軽く動くプロパティで！
  • CSSでアニメーションをつけるとき、width, height, top, left のようなプロパティを動かすと、ブラウザはページの「レイアウト計算」をやり直す必要があって、処理が重くなることがあるんだ（これをレイアウト変更、リフローなどと呼ぶよ）。
  • 一方で、transform (translate, scale, rotate) や opacity (透明度) を使ったアニメーションは、レイアウト計算に影響を与えにくく、よりスムーズに動きやすい。モーダルの出現アニメーションなどで積極的に使ってみよう！
  • ブラウザに「この要素はこれからアニメーションで変化するよ！」と事前に伝えるwill-changeプロパティもあるけど、これは使い方を間違えると逆効果になることもあるから、よく理解してから使おうね。
• CSSセレクタはシンプルに！
  • あまりにも複雑で長いCSSセレクタ（例: div#main section.article > ul li:nth-child(odd) aみたいなの）は、ブラウザがスタイルを適用する要素を探すのに時間がかかることがある。できるだけシンプルで分かりやすいセレクタを心がけよう。

画像やライブラリ関連のヒント

• 画像は最適化しよう！ モーダル内で大きな画像を使う場合は、表示に必要なサイズに合わせてリサイズしたり、WebPのような新しい画像フォーマットを使ってファイルサイズを小さくしよう。画像の遅延読み込み (loading="lazy"属性)も効果的だよ。
• ライブラリは賢く選ぼう！ 前のページで紹介したライブラリを使うときは、必要な機能だけを読み込んだり（ツリーシェイキング対応の場合）、プロジェクトの要件に合った軽量なものを選んだりすることも大切だよ。CDNを使うのも良い方法だね。