背景
在表格组件中,每个单元格是一个vue实例,数据请求、数据处理、数据展示都由组件内部管理,虽然原则上实现了数据的解耦,但是也引入了一个问题,即数据的请求次数与单元格的数量呈正相关,导致在大量单元格渲染的场景下,请求发送特别频繁
优化思路
仔细观察表格内的场景以及单元格的请求格式,会发现两个特点:
- 同一列的单元格请求的数据接口是一样的,参数类似
- 数据接口往往支持批量处理
既然如此,是否可以将一定时间段内的请求参数合并去重后再提交,以达到减少请求的目的
方案
请求队列
此方案适合参数根据单元格的具体内容填入请求参数的场景
方案流程:
- 各单元格将要请求的数据推送到批量请求模块中,通过回调函数等待回调数据
- 请求队列通过一个worker中的定时触发器来控制消费速度
- 调度信号来了以后,将当前请求数据合并去重,然后发起请求
- 请求成功后将数据抛给回调函数,触发组件更新
为什么要把队列触发器放在worker?
大数据场景下,单元格渲染很慢。如使用setTimeout防抖会导致发送请求的时间推迟到所有单元格渲染完成,出现长时间白屏;如使用setInterval节流,主线程被渲染卡住导致setInterval一直被延后到所有单元格渲染完成,也会出现长时间白屏。这里采用把请求队列的调度放到worker里的方案
代码示例
const MAX_REQUEST_COUNT = 100;
const queue = {
codes: [],
callbacks: []
}
// 外部调用
const batchGetter = (
codes: string[],
callback: (data: any[]) => void,
) => {
queue.codes = queue.codes.concat(codes);
queue.callbacks.push(callback);
worker.postMessage({
method: 'start',
id: 'batchGetter',
interval: 100,
});
};
// 发起请求
const startRequest = async () => {
const len = queue.codes.length;
if (!len) {
worker.postMessage({
method: 'stop',
id: 'batchGetter',
});
return