函数节流，函数防抖，DOM操作优化

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);
    };
}

3. DOM操作优化

DOM操作是JavaScript中最耗费性能的操作之一，因此需要尽可能减少DOM操作的次数。例如，在修改多个元素的类名时，可以创建一个临时节点，然后一次性修改所有元素的类名，最后再删除临时节点。

var temp = document.createElement('div');
temp.className = 'hidden';
document.body.appendChild(temp);

for (var i = 0; i < list.length; i++) {
    list[i].className += ' hidden';
}

document.body.removeChild(temp);