JavaScript效能最佳化

IT-HourseMan發表於2024-04-08
JavaScript

JavaScript效能最佳化

JavaScript是前端開發中最常用的指令碼語言之一，最佳化它的效能可以有效地提升頁面響應速度和流暢度。下面介紹一些常見的JavaScript效能最佳化方法：

1. 函式節流

函式節流是指在一定時間內只執行一次函式，比如滑鼠滾動事件，如果沒有限制，那麼每次滑鼠滾動都會觸發大量事件，導致瀏覽器卡頓甚至崩潰，而透過函式節流可以使得事件執行穩定流暢。

function throttle(fn, wait) {
    var timer;
    return function() {
        var context = this,
            args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                fn.apply(context, args);
                timer = null;
            }, wait);
        }
    };
}


2. 函式防抖


函式防抖是指在一定時間內，多次觸發事件只執行最後一次。比如搜尋框輸入事件，如果沒有限制，那麼每次鍵盤按下都會觸發搜尋，導致請求過多，而透過函式防抖可以避免這種情況。


 




function debounce(fn, delay) {
    var timer = null;
    return function() {
        var context = this,
            args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    };
}




 






相關文章