前端性能优化

• 1、图片优化

  • 1、减少像素点
  • 2、减少每个像素点能够显示的颜色

• 2、图片加载优化

  • 不用图片，对于修饰类的图片，完全可以用CSS代替
  • 对于移动端，图片用CDN加载，计算出适应屏幕的宽度，请求相应裁剪好的图片
  • 小图使用base64格式
  • 将多个图标文件整合到一张图中
  • 选择正确的文件格式
    • 能显示WebP格式的浏览器尽量使用WebP格式
    • 小图使用PNG，对于图标，可以用SVG代替
    • 照片使用JPEG

• 3、DNS预解析

  • DNS解析也需要时间，可以通过预解析的方式来预先获得域名所对应的IP

    <link rel="dns-prefetch" href="//XXX">
    

• 4、节流

  • 滚动事件中发起网络请求，但不希望一直发起请求，而是隔一段时间发起一次

    /**
     * func 是用户传入需要防抖的函数
     * wait 是等待时间
    */
    const throttle = (func, wait = 50) =>{
      // 上一次执行该函数的时间
      let lastTime = 0
      return function(...args){
        // 当前时间
        let now = +new Date()
        // 将当前时间和上一次时间对比，如果差值大于设置的等待时间就执行函数
        if (now - lastTime > wait){
          lastTime = now
          func.apply(this, args)
        }
      }
    }
    setInterval(throttle(()=>{
      console.log(1)
    }, 500), 1)
    

• 5、防抖

  • 按钮点击后一段时间没有再次点击才发起网路请求

    // func 是用户传入需要防抖的函数
    // wait 是等待时间
    const debounce = (func, wait = 50) =>{
      // 缓存一个定时器id
      let timer = 0
      // 返回每次用户实际调用的防抖函数，
      // 如果已有定时器就清空，否则开始新的定时器，延迟执行用户传入的方法
      return function(...args){
        if (timer) clearTimeout(timer)
        timer = setTimeout(() =>{
          func.apply(this, args)
        }, wait)
      }
    }
    

• 6、预加载

  • 资源不需要马上用到，但希望尽早获取

  • 预加载其实就是声明式的fetch，强制浏览器请求资源，并且不会阻塞onload事件

    <link rel="preload" href="http://XXX">
    

  • 一定程度上降低首屏加载事件，可以将不影响首屏但重要的文件延后加载，但兼容性不好

• 7、预渲染

  • 将下载的文件预先在后台渲染

    <link rel="prerender" href="http://XXX">
    

  • 提高页面加载速度，但要确保用户大概率打开页面，否则浪费资源

• 8、懒执行

  • 将某些逻辑延迟到使用时再计算，可以用于首屏优化，对于某些耗时逻辑并不需要在首屏使用，就可以懒执行，懒执行需要唤醒，一般定时器或事件调用来唤醒

• 9、懒加载

  • 将不关键的资源延后加载
  • 只加载自定义区域（通常是可视区域，也可以是即将进入可视区域）内需要加载的东西。对于图片，设置图片src属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换成src属性，这样图片就会去下载资源，实现图片懒加载
  • 还可以用于其他资源上，如进入可视区域才播放视频等

• 10、CDN

  • 尽可能地在各个地方分布机房缓存数据，就是根服务器在国外，国内用户也可以通过国内机房迅速加载资源
  • 静态资源尽量使用CDN加载，浏览器对单个域名有并发请求上线，可以考虑使用多个CDN域名，对于CDN加载静态资源要注意CDN域名与主站不同，否在每次请求都会带上主站Cookie，平白消耗流量