关于前端性能优化

核心 空间换时间

1、多使用内存 缓存

2、减少cpu计算量

3、减少网络加载耗时

两个方向

一、让加载更快

1、压缩代码图片资源体积大小

2、代码合并 雪碧图等  SSR服务器端渲染，缓存

3 、使用更快的网络 cdn

二、让渲染更快

1、css放head里面 js放body下面

2、尽早的执行js  在DomContentLoaded 触发

3、图片资源懒加载

4、Dom查询缓存，频繁Dom操作合并

5、节流throttle 防抖debounce

// 节流
function throttle(fn, delay = 100) {
    let timer = null

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

// 防抖
function debounce(fn, delay = 500) {
    let timer = null

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