SOURCE

/**
 *  性能优化原则 -- 空间换时间
 *  多使用内存、缓存，减少cpu计算量，减少网络加载耗时
 *  
 *  从何入手
 *  让加载更快
 *      减少资源体积：压缩代码
 *      减少访问次数：合并代码，SSR服务端渲染，缓存
 *      使用更快的网络：CDN
 *  让渲染更快
 *      css放在head，js放在body最后面
 *      尽早执行js，用DOMContentLoaded触发
 *      图片懒加载
 *      对DOM查询进行缓存
 *      频繁DOM操作，合并到一起插入DOM结构
 *      防抖throttle，节流debounce
 */

/**
 * 防抖：频繁输入，输入框快速输入
 * 
 */
let timer =null
document.addEventListener('keyup', function() {
    if (timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        console.log(123)
        timer = null
    }, 500)
})
function debounce(fn, delay = 500) {
    let timer = null
    return function() {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments) // 可能有参数
            timer = null
        }, delay)
    } 
}

/**
 * 节流：拖拽获取拖拽位置--连续拖拽
 */
let timer1 = null
document.addEventListener('drag', function() {
    if (timer1) return
    timer1 = setTimeout(() => {
        console.log(123542)
        timer1 = null
    })
})

function throttle(fn, delay = 100) {
    let timer = null
    return function() {
        if(timer) return
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        }, delay)
    }
}