入力ハンドラをデバウンスする | Articles | web.dev

入力ハンドラをデバウンスする コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 入力ハンドラは、アプリ内のパフォーマンスの問題の潜在的な原因となります。これらはフレームの完了を妨げ、追加の不要なレイアウト作業の原因になります。 入力ハンドラは、アプリ内のパフォーマンスの問題の潜在的な原因となります。これらはフレームの完了を妨げ、追加の不要なレイアウト作業の原因になります。 概要 長時間実行される入力ハンドラを避けて、スクロールがブロックされないようにします。 入力ハンドラでのスタイル変更を避けます。 ハンドラをデバウンスします。イベント値を格納し、次の requestAnimationFrame コールバックでスタイル変更を処理します。 長時間実行される入力ハンドラを避ける 最速のケースでは、ユーザーがページと対話するときに、ページのコンポジタ スレッドが、

[efcl]

mousemoveのような入力イベントで直にスタイル変更を行うとJSが処理をブロックしてしまう。(同期的なレイアウトが発生) そのため、`requestAnimationFrame`でdebounceしてあげると、ブロックせずにできる