前端性能优化

性能优化原则：

1. 多使用内存、缓存或其他方法
2. 减少CPU计算量，减少网络加载耗时
3. 空间换时间

让加载更快

1. 减少资源体积：压缩代码（gzip）
2. 减少访问次数：合并代码（打包成一个文件、雪碧图），SSR服务器端渲染（把页面一起返给前端），缓存
   资源合并：请求合并和减少请求数量是两个重要的策略通过合理地合并请求和减少请求数量，可以提高网页加载速度，降低务器的负载，从而改善用户的访问体验。
   缓存：静态资源加hash后缀，根据文件内容计算hash，文件内容不变，则hash不变，则url不变，url和文件不变，则会自动触发http缓存机制，返回304
   SSR服务器渲染:将网页和数据一起加载，一起渲染(非ssr，也就是前后端分离，先加载网页，再加载数据，再渲染数据)
3. 使用更快的网络：CDN
   CDN 将网站的静态资源缓存在全球各地的节点中，当用户访问该网站时，会从离用户最近的节点获取文件。由于离用户最近的节点可能与用户之间的距离更短，因此可以减少传输时间和延迟。

让渲染更快
1.CSS放在head，js放在body最下面
2.尽早开始执行JS，用DOMContentLoaded触发
3.懒加载（图片懒加载，上滑加载更多）
原理：监听图片是否位于页面的可视区域内，若在则加载图片，不在则不加载图片
实现：自定义属性-将图片真实地址 url 存储在自定义属性中，当监听到图片进入可视区域时，将自定义属性值赋值给 img 的 src 属性（利用.getBoundingClientRect实时获取物体的动态位置）
4.对DOM查询进行缓存
5.频繁DOM操作，合并到一起插入DOM结构
6.节流throttle 防抖debounce
防抖使用场景：
监听一个输入框的文字变化后触发change事件
直接用keyup事件，则会频发触发change事件
防抖就是用户输入结束或暂停时，才会触发change事件

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

节流使用常见：
拖拽一个元素时，要随时拿到该元素被拖拽的位置
直接用drag事件，则会频发触发，很容易导致卡顿
节流：无论拖拽速度多快，都会每隔100ms触发一次（时间可以自定义）

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