面试-性能优化

1. 让加载更快

• 减少资源体积：压缩代码，资源合并
  

• 减少访问次数：合并代码(比如webpack打包之后的bundle.js、CSS的雪碧图)，SSR(Server-Side Rendering)服务器端渲染、缓存
  
  

• 使用更快的网络：CDN
  比如使用Vue的时候不用亲自去下载vue.js到本地，是可以直接用CDN地址来引用的。可以把网站的静态资源更快传输给用户。

• 让渲染更快

• CSS放在head里面，JS放在body最下面

• 尽早地执行JS，用DOMContentLoaded触发

• 懒加载（图片懒加载，上滑加载更多）
  核心：按需加载资源。不是一次性加载页面上的所有内容，而是等到用户需要看到某个内容时，再去加载相关资源。可以减少首屏加载时间，提升用户体验。

• 对DOM查询进行缓存

• 频繁的DOM操作，合并到一起看来插入DOM结构

• 节流throttle 防抖 debounce

防抖 debounce

const input1 = document.getElementById('input1')
// 建立定时器
let timer = null
input1.addEventListener('keyup', function(){
  if(timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
  //  触发change事件
    console.log(input1.value)
    // 清空定时器
    timer = null;
  },800)
  
})

😎把他单独封装成 debounce 函数，接收两个参数，一个是函数，一个是延时时间。

// 防抖函数
function debounce(fn, delay = 700){
//   timer是闭包中的
  let timer = null
  
//   debounce最后返回一个函数
  return function(){
    if(timer){
      clearTimeout(timer)
    }
    timer= setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    },delay)
  }
}

input1.addEventListener('keyup', debounce(function() {
  console.log(input1.value)
}),888)

节流

// 节流
function throttle(fn, delay = 222){
  let timer = null
  return function(){
    if(timer){
      return
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    },delay)
  }
}

const div1 = document.getElementById('div1')
div1.addEventListener('drag',throttle(function(e) {
  console.log(e.offsetX, e.offsetY)
},222))