关于前端性能优化

核心 空间换时间

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

 

posted @ 2020-06-04 11:27  玉文  阅读(146)  评论(0编辑  收藏  举报