2024年大数据最新【面试题】前端开发中如何高效渲染大数据量？(2)，2024年最新大数据开发工程师跳槽经验分享

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

            handleResultData(item?.value || {}, sqlIdList[idx]?.sqlId);
        } else {
            console.error(
                'selectExecResultDataList Promise.allSettled rejected',
                item.reason
            );
        }
    });
    setTimeout(() => {
        loop(idx + renderOnce);
    }, 100);
};
loop(0);

});

##### 2、请求分组 + 任务分组


  问题1 中的大批量请求 `selectData` 接口，也是一个突破点。我们可以将请求进行分组，每次以固定数量的 sqlId 去请求 `selectData` 接口，比如每组请求 6 个 sqlId 的结果，当前组的请求全部结束后再进行渲染；为了保证效果最优，这里也引入任务分组的思路。

const requestOnce = 6; // 每组请求的数量
// 将一维数组转换成二维数组
const sqlIdList2D = convertTo2DArray(sqlIdList, requestOnce);
const idx2D = 0; // sqlIdList2D 的索引

const requestLoop = (index) => {
if (!sqlIdList2D[index]) return;
const promiseList = sqlIdList2D[index].map((item) =>
selectExecResultData(item?.sqlId)
);
Promise.allSettled(promiseList)
.then((results = []) => {
const renderOnce = 2; // 每组渲染的结果 tab 数量

        const loop = (idx) => {
            if (promiseList.length <= idx) return;
            results.slice(idx, idx + renderOnce).forEach((item, idx) => {
                if (item.status === 'fulfilled') {
                    handleResultData(item?.value || {}, sqlIdList[idx]?.sqlId);
                } else {
                    console.error(
                        'selectExecResultDataList Promise.allSettled rejected',
                        item.reason
                    );
                }
            });
            setTimeout(() => {
                loop(idx + renderOnce);
            }, 100);
        };
        loop(0);
    })
    .finally(() => {
        requestLoop(index + 1);
    });

};
requestLoop(idx2D);

##### 3、请求分组


  上一种方案的代码写出来太难以理解了，属于上午写，下午忘的逻辑，注释也不好写，不利于维护。基于实际情况，我们尝试下仅对请求作分组处理，看看效果。

const requestOnce = 3; // 每组请求的数量
// 将一维数组转换成二维数组
const sqlIdList2D = convertTo2DArray(sqlIdList, requestOnce);
const idx2D = 0; // sqlIdList2D 的索引

const requestLoop = (index) => {
if (!sqlIdList2D[index]) return;
const promiseList = sqlIdList2D[index].map((item) =>
selectExecResultData(item?.sqlId)
);
Promise.allSettled(promiseList)
.then((results = []) => {
results.forEach((item, idx) => {
if (item.status === ‘fulfilled’) {
handleResultData(item?.value || {}, sqlIdList[idx]?.sqlId);
} else {
console.error(
‘selectExecResultDataList Promise.allSettled rejected’,
item.reason
);
}
});
})
.finally(() => {
requestLoop(index + 1);
});
};
requestLoop(idx2D);

![file](https://img-blog.csdnimg.cn/img_convert/37e8ce286fb9a24bd7ffc63be6050b7f.webp?x-oss-process=image/format,png)


#### 四、思路理解


1、解决大数据量渲染的问题，常见方法有：时间分片、虚拟列表等；  
 2、解决同步阻塞的问题，常见方法有：任务分解、异步等；  
 3、如果某个任务执行时间较长的话，从优化的角度，我们通常会考虑将该任务分解成一系列的子任务。


  在任务分组一节，我们将 setTimeout 的时间间隔设置为 100ms，也就是我认为最快在 100ms 内能完成渲染；但假设不到 100ms 就完成了渲染，那么就需要白白等待一段时间，这是没有必要的。这时可以考虑[window.requestAnimationFrame](https://bbs.youkuaiyun.com/topics/618545628) 方法。

• setTimeout(() => {

• window.requestAnimationFrame(() => {
  loop(idx + renderOnce);

• }, 100);

• });

  第三节的请求分组，实际上达到了渲染任务分组的效果。本文更多的是提供一个解决思路，上述方式也是基于对时间分片的理解实践。


#### 五、写在最后


  在软件开发中，性能优化是一个重要的方面，但并不是唯一追求，往往还需要考虑多个因素，包括功能需求、可维护性、安全性等等。根据具体情况，综合使用多种技术和策略，以找到最佳的解决方案。




![img](https://img-blog.csdnimg.cn/img_convert/b1f5c30166cc5b11aecdcbee1a50a3d6.png)
![img](https://img-blog.csdnimg.cn/img_convert/71191f2c5c05a04303945a2e223038d2.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

朋友，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**