面试题：前端性能优化

提高加载速度

1. 减少资源体积：
   压缩代码
   图片压缩
   服务器端有个gzip压缩（请求头里边有accept-encoding: gzip, deflate, br）
2. 减少访问次数：
   合并代码（例如将你的js代码全都放到一个js文件中，webpack就是这么做的）
   精灵图（雪碧图）将一些小图标放在一个图片中一起加载进来，展示时候通过background-position来定位展示特定的icon
   SSR服务端渲染：将网页和数据一起加载，一起渲染，不用像前后端分离那种请求页面后还需要咱们再发送AJAX请求数据，最后再进行渲染数据。
   缓存：强制缓存和协商缓存
3. 使用更快的网络：CDN（不同地区会去访问离你近的服务器ip地址）

渲染更快

1. CSS放在最前边其次是HTML最后是JS，不明白的看这篇博客
2. 尽早的执行JS，用DOMContentLoaded触发，不明白的看这篇博客
3. 图片懒加载（上滑加载图片）
4. 对DOM查询进行缓存
5. 频繁的操作DOM变成合并到一起插入DOM结构
   4 和 5 不懂得看DOM性能优化

节流和防抖

防抖

类似于下边这种搜索联想就会用到防抖

   function debounce(fn,delay = 500){
       let timer = null
       return function(){
           if(timer){
               clearTimeout(timer)
           }
           timer = setTimeout(()=>{
               fn.apply(this,arguments)
               timer = null
           },delay)
       }
   }

节流

类似于屏幕的某些元素拖拽获取他的x y坐标值，就可以用节流来规定多长时间获取一下，要是一动就获取那么对内存消耗的就太大了

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