前端性能优化

性能优化原则

• 多使用内存，缓存或其他方法
• 减少CPU计算量，减少网络加载耗时（适用于所有百年城性能优化，空间换时间）

让加载更快

• 减少资源体积：压缩代码
• 减少访问次数：合并代码，SSR服务端渲染缓存
• 使用更快的网络：CDN

让渲染更快

• CSS放在head中，JS放在body最下面
• 尽早开始执行JS，用DOMContentLoaded触发
• 懒加载（图片懒加载，上滑加载更多）
• 对DOM查询进行缓存
• 频繁DOM操作，合并到一起插入DOM结构
• 节流throttle，防抖debounce

​ throttle：

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

debounce：

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