优化
2023-02-04 本文已影响0人
欢西西西
1. 防抖 / 节流
- 按钮：防抖（连续点击只在点击结束之后触发一次）
- 频繁触发的事件：防抖或节流（resize/scroll）
- 请求：节流（每秒同参数同接口不允许重复发送）
如果该请求有记录 && 当前时间戳与记录的时间戳之差小于间隔时间 && 该请求与记录请求参数相同，调用xhr.abort()
2. 长列表虚加载
仅加载可视范围内的，范围外的不创建dom，用padding-top和padding-bottom撑高度
- 每项高度固定：scrollTop → startIndex → endIndex → padding
- 每项高度不固定：记录【渲染过的每一项的高度】或者【每一项到容器顶部的偏移】，如果高度还是会改变，ResizeObserver可以监听到节点尺寸变化
3. 各种懒加载
不展示就尽量不加载
- js文件，当场景需要时再载入
- 对象，当需要创建时再创建
- 请求-需要数据展示时再发（例如下拉框）
