性能优化琐碎事

节流

场景:滚动事件中会发起网络请求，但是我们并不希望用户在滚动过程中一直发起请求，而是隔一段时间发起一次

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

防抖

场景:当用户频繁点击按钮，期望一段时间后没有再次点击的情况才去发起网络请求

用户频繁创建地图组件，判断地图是否全屏函数做了防抖：该函数中用了getElementById和ele.clientWidth < screen.width，为了提升性能所以做了防抖。

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

图片加载优化：

1、CSS 去代替图片

2、选择正确的图片格式：小图使用 PNG 照片使用 JPEG

DNS 预解析

<link rel="dns-prefetch" href="//yuchengkai.cn">

预加载

开启预加载

<link rel="preload" href="http://example.com">

可以一定程度上降低首屏的加载时间

懒加载

懒加载就是将不关键的资源延后加载。。比如：进入可视区域才开始播放视频、加载图片

对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。。

可以将静态资源尽量使用 CDN 加载