レンダリングのパフォーマンス対策入門〜アニメーション、JSで困った時に

はじめに

近年、Webサイトはますます複雑になり、また肥大化しています。それに合わせてブラウザの計算量も増え、パフォーマンスが問題となるケースがしばしばあります。この記事ではブラウザのパフォーマンスの最適化のためにどのようなことを気をつけなければならないのかをご説明します。
特にアニメーションやスクロール時などのボトルネックになりやすい箇所について取り上げます。

パフォーマンスの問題はブラウザの仕組みと深く関わるため、基礎的な知識がないと問題の解消が難しい部分ですが、この記事ではブラウザの仕組みと照らし合わせながらわかりやすくご説明します。

前知識. Browserの仕組みを知るべし

フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説!

ケーススタディー

アニメーションにはtransformとopacityを使おう!理由をわかり易く説明!

パフォーマンス低下の原因をChromeのDevtoolで調査しよう

will-changeを使ってなめらかなアニメーションを作成しよう

これって効いてる?will-changeが効いているか確認する方法

IntersectionObserverを使ってスクロールのイベント処理は非同期にすべし

スクロール中はHoverエフェクトを切ろう

requestAnimationFrameの仕組みと使い方!うまく使ってパフォーマンスを改善しよう!

passive: trueでなぜパフォーマンスがよくなるの?簡単な説明と使い方!

Javascriptの重い処理はWeb Workerに任せよう

最新記事