大数据表单元格批量请求优化方案

背景

在表格组件中，每个单元格是一个vue实例，数据请求、数据处理、数据展示都由组件内部管理，虽然原则上实现了数据的解耦，但是也引入了一个问题，即数据的请求次数与单元格的数量呈正相关，导致在大量单元格渲染的场景下，请求发送特别频繁

优化思路

仔细观察表格内的场景以及单元格的请求格式，会发现两个特点：

1. 同一列的单元格请求的数据接口是一样的，参数类似
2. 数据接口往往支持批量处理

既然如此，是否可以将一定时间段内的请求参数合并去重后再提交，以达到减少请求的目的

方案

请求队列

此方案适合参数根据单元格的具体内容填入请求参数的场景

方案流程：

1. 各单元格将要请求的数据推送到批量请求模块中，通过回调函数等待回调数据
2. 请求队列通过一个worker中的定时触发器来控制消费速度
3. 调度信号来了以后，将当前请求数据合并去重，然后发起请求
4. 请求成功后将数据抛给回调函数，触发组件更新

为什么要把队列触发器放在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