沖縄チームのキリです。最近、JavaScriptの処理が重いと感じる場面がありました。特に、テキスト入力のイベントリスナーのような頻繁に処理が走る部分で、動作がカクつくことがありました。調べたところ、debounce を使うことでパフォーマンスを改善できることがわかりました。
debounce処理とは？
debounce とは、短時間に連続して発生する処理を間引き、最後の実行から一定時間経過した後に実行する仕組みです。
例えば、インクリメンタルサーチ（逐次検索）では、ユーザーが文字入力する際のkeydownやkeyupにイベントリスナーを設定し、その都度検索処理を実行することが考えられます。しかし、このまま実装すると、過剰なHTTPリクエストが発生し、パフォーマンスの低下を招く可能性があります。そこで debounce を利用すると、ユーザーの入力が一定時間止まった後に検索処理を実行でき、無駄な処理を削減できます。
実装してみた
実際にdebounce処理を実装してみました。
<input id="input" type="text">
<div id="result"></div>const input = document.querySelector('#input');
const result = document.querySelector('#result');
// debounce関数
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
// 検索処理（実際にはAPIリクエストなどを行う）
function search(value) {
result.innerText = value;
}
const debounceSearch = debounce(search, 300);
input.addEventListener('keyup', (e) => {
debounceSearch(e.target.value);
});このコードでは、debounce 関数を利用して search 関数の実行を300ms遅らせています。ユーザーがキーを押すたびに search を実行するのではなく、最後の入力から300ms経過してから実行されるため、無駄な処理を削減できます。
導入してみた結果
debounce処理を導入した結果、リアルタイム検索の動作が大幅にスムーズになりました。文字入力が完了してから検索処理が実行されるため、不要なリクエストが減り、カクつきがなくなりました。
まとめ
debounce は、JavaScriptのパフォーマンス改善に役立つ技術です。リアルタイム検索だけでなく、ブラウザのリサイズイベントやマウスの動きを監視する処理など、頻繁に発生するイベントに debounce を適用することで、スムーズな動作を実現できます。
もしJavaScriptの処理が重いと感じたら、debounce を試してみてはいかがでしょうか？
参考