JavaScript は多くの場合、視覚的な変更をトリガーします。スタイルの操作によって直接変更される場合もあれば、データの検索や並べ替えなど、計算によって視覚的な変更が起きる場合もあります。タイミングが悪い JavaScript や長時間実行される JavaScript は、パフォーマンスの問題の一般的な原因です。可能な限り、その影響を最小限に抑える必要があります。
JavaScript は多くの場合、視覚的な変更をトリガーします。スタイルの操作によって直接変更される場合もあれば、データの検索や並べ替えなど、計算によって視覚的な変更が起きる場合もあります。タイミングが悪い JavaScript や長時間実行される JavaScript は、パフォーマンスの問題の一般的な原因です。可能な限り、その影響を最小限に抑える必要があります。
作成した JavaScript は実際に実行されるコードとはまったく異なるため、JavaScript のパフォーマンス プロファイリングは一種の芸術と言えます。最新のブラウザは、JIT コンパイラとさまざまな最適化とトリックを使用して、可能な限り高速な実行を実現しようとしています。これにより、コードの動態が大幅に変化します。
ただし、アプリで JavaScript を適切に実行するために、確実にできることがあります。
概要
- 視覚的な更新に setTimeout や setInterval を使用しないでください。代わりに、常に requestAnimationFrame を使用してください。
- 長時間実行される JavaScript をメインスレッドから Web Worker に移動します。
- マイクロタスクを使用して、複数のフレーム間で DOM を変更します。
- Chrome DevTools のタイムラインと JavaScript プロファイラを使用して、JavaScript の影響を評価します。
requestAnimationFrame を使用して視覚的な変更を行う
画面上の視覚的な変化が発生したときに、ブラウザにとって適切なタイミングで処理を行う必要があります。これは、フレームの開始時です。JavaScript がフレームの開始時に確実に実行されるようにするには、requestAnimationFrame を使用するしかありません。
/**
* If run as a requestAnimationFrame callback, this
* will be run at the start of the frame.
*/
function updateScreen(time) {
// Make visual updates here.
}
requestAnimationFrame(updateScreen);
フレームワークやサンプルでは、setTimeout または setInterval を使用してアニメーションなどの視覚的な変更を行うことがありますが、この場合、コールバックはフレームのある時点で（フレームの最後の場合もあります）実行されます。これにより、フレームがスキップされ、ジャンクが発生する可能性があります。