前回はフロントエンドのパフォーマンスチューニングを考える上で、基礎知識的なブラウザのレンダリングの仕組みや、目指すべきパフォーマンス指標についてまとめました。後編では、より実践的なJavaScriptやCSSを書く上でのチューニング方法についてまとめていきたいと思います。減らす通常、JavaScriptによるDOM操作はブラウザの再レンダリング処理を引き起こします。この再レンダリング処理によってパフォーマンスに大きく悪影響を与えるということはありません。引き起こされた場合は例外となり、パフォーマンスに悪影響を与えることになります。呼ばれ、通常はスタイル評価のあとに行われるレイアウト算出が、最新のレイアウト情報が必要になったとき、再算出のために矯正実行されることを指します。発生しないコードは以下になります。発生!!このようにDOM操作などで、レイアウトに影響を与えるような操作を行ったあとに、レイアウトの情報を返すメソッドやプロパティを参照すると、レンダリングエンジンはDOM操作された結果の最新のレイアウト情報を返すために、その場でレイアウト計算を行ってしまいます。レイアウトに影響を与えるような操作は以下のような操作です。style属性やstyleプロパティを通じて要素の大きさや座標に関わる操作を行う。次のようなコードです。処理を引き起こすため、JavaScriptの実行パフォーマンスを大幅に劣化させることがあります。引き起こさずに同様の処理を実装できます。以下のような実装です。0.1;}ループ処理の前に予めレイアウト情報を取得し、レイアウト情報の参照と更新を別のループ内で行う実装方法はすでにdocument内にあるDOM要素の場合には有効でしたが、実装の都合によってはDOM操作する前にはレイアウト情報を取得できない場合があります。新たにDOMツリーに追加する要素のレイアウト情報を参照する場合です。回避することができます。メソッドに渡したコールバック関数の実行タイミングは、DOM操作が終わり、再レンダリングが終わってからだからです。いう2つの工程が存在します。引き起こされるのかを知る必要があります。自体を避けることができるようになります。引き起こす典型的な原因は以下の3つになります。上記の3つについてそれぞれ詳しく説明します。DOM要素の座標や大きさの変化CSSプロパティの中でも座標や大きさに関わるプロパティが変更された場合を指します。以下のようなプロパティがあります。よるCSSプロパティの変更のどちらでも同様に処理されます。