前端性能优化

1、页面优化

• 减少http请求：减少资源的体积,用webpack进行js、css、iamge文件压缩;减少资源的访问次数，雪碧图、合并代码、缓存机制；
• 懒加载（图片懒加载，上滑加载更多），当dom进入视线内再进行请求；虚拟滚动，当列表数据过大时，分页加载的话，数据在不断的累加，用虚拟滚动做优化，原理： 无论我们如何滚动，我们可视区域的大小其实是不变的，那么要做到性能最大化就需要尽量少地渲染 DOM 元素，而这个最小值也就是可视范围内需要展示的内容，也就是只做可视区域之内的元素渲染。
• css放在 head,JS放在Body最下面加载/cdn的方式加载；
• 对DOM查询进行缓存
• 频繁DOM操作，合并到一起插入DOM结构

2、代码优化

• 函数的封装
• 防抖、节流

  // 防抖 debounce
  // 实例：监听一个输入框，文字变化后触发change事件
  // 防抖：用户输入结束或者暂停时，才会触发change事件
  // 输入一个字符后，触发事件 定义一个定时器，500毫秒之后执行，紧接着输入2， 此时timer有值，清空，再定义一个定时器，紧着输入3后，
  // 此时timer有值，清空，再定义一个定时器, 此时暂停了，没有再输入，5毫秒之后进行了打印
  let timer = null
  input1.addEventListener('keyup',()=>{
      if(timer) {
          clearTimeout(timer)
      }
      timer = setTimeout(()=>{
          // 触发change事件
          console.log(input1.value)
          // 清空定时器
          timer = null
      }, 500)
  })
  
  
  // 节流： 频繁输入
  // 实例：拖拽一个元素时，要随时拿到该元素被拖拽的位置
  // 每隔500毫秒 了后才执行某个操作
  // 拖拽第一次时，创建一个定时器，100毫秒后执行，再次拖拽时，此时timer存在，直接return不做任何反应，当100毫秒后直接执行，某个操作，
  // 并把timer置空，再次拖拽时，此时timer是k空的，会创建定时器。。。。
  let div1 = docuemnt.getElementById('div1')
  let timer = null
  div1.addEventListener('drag', function(e) => {
      if(timer) {
          return
      }
      timer = setTimeout(()=>{
          console.log(e.offsetX, e.offsetY)
          timer = null
      }, 500)
  })