面试-性能优化

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