前端性能优化入手点

让加载更快

1 减少资源大小：压缩代码，除了压缩js css外 还可以在服务端进行gzip压缩，提高请求速度。图片资源可以使用tinypng工具压缩大小。

2 减少访问次数：合并代码；雪碧图；ssr服务端渲染（将网页和数据一起加载，一起渲染）；使用缓存。

3 使用更快的网络：cdn

让渲染更快

1 css放在head里面，js放在body里的最下面

2 让js更早的执行，DOMContentLoaded就开始执行

3 让图片懒加载

4 对dom查询进行缓存；频繁dom操作合并一起执行

5 节流throttle和防抖debounce

 

//防抖函数
function debounce(fn,delay=500){
    let timer = null;
    return function(){
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            fn()
            timer = null
        },delay)
    }
           
}
用法：
xxx.addEventListener("click",debounce(()=>{

}))
    

    //节流
    function throttle(fn,delay=100){
      let timer = null
      return function(){
        if(timer){
          return 
        }
        timer = setTimeout(()=>{
          fn();
          timer = null;
        },delay)
      }
    }
    //用法
    xxx.addEventListener("drag",throttle(function(){

    },100))