当后端一次性丢给你数十万条数据, 作为前端工程师的你,要怎么处理?

前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用 select 组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到 select 中,肯定会卡死. 后面他还说需要支持搜索, 也是前端来实现,我顿时产生了兴趣. 当时想到的方案大致如下:

采用懒加载+分页(前端维护懒加载的数据分发和分页)
使用虚拟滚动技术(目前react的antd4.0已支持虚拟滚动的select长列表)
懒加载和分页方式一般用于做长列表优化, 类似于表格的分页功能, 具体思路就是用户每次只加载能看见的数据, 当滚动到底部时再去加载下一页的数据.

虚拟滚动技术也可以用来优化长列表, 其核心思路就是 每次只渲染可视区域的列表数,当滚动后动态的追加元素并通过顶部padding来撑起整个滚动内容 ,实现思路也非常简单.

通过以上分析其实已经可以解决朋友的问题了,但是最为一名 有追求的前端工程师 , 笔者认真梳理了一下,并基于第一种方案抽象出一个实际的问题:

如何渲染大数据列表并支持搜索功能?
笔者将通过模拟不同段位 前端工程师 的实现方案, 来探索一下该问题的价值. 希望能对大家有所启发, 学会真正的 深入思考 .

正文
笔者将通过不同经验程序员的技术视角来分析以上问题, 接下来开始我们的表演.

在开始代码之前我们先做好基础准备, 笔者先用 nodejs 搭建一个数据服务器, 提供基本的数据请求,核心代码如下:

app.use(async (ctx, next) => {
if(ctx.url === ‘/api/getMock’) {
let list = []

// 生成指定个数的随机字符串
function genrateRandomWords(n) {
  let words = 'abcdefghijklmnopqrstuvwxyz你是好的嗯气短前端后端设计产品网但考虑到付款啦分手快乐的分类开发商的李开复封疆大吏师德师风吉林省附近',
      len = words.length,
      ret = ''
  for(let i=0; i< n; i++) {
    ret += words[Math.floor(Math.random() * len)]
  }
  return ret
}

// 生成10万条数据的list
for(let i = 0; i< 100000; i++) {
  list.push({
    name: `xu_0${i}`,
    title: genrate