如果后端API一次返回10万条数据，前端应该如何处理？

周sir | 2022年8月10日 | web前端技术, 优化 | 0 条评论 | 633

面试里常被问：后端 API 一次返回 10 万条，前端怎么处理？这题考的是渲染性能：主线程别卡死、首屏别空白 12 秒、用户屏上其实一次也看不了那么多。

下面用 Node 造 10 万条数据，从一次性渲染、setTimeout 分页、requestAnimationFrame、文档片段，到按滚动懒加载，把几种做法摊开。英文原文：https://medium.com/frontend-canteen/if-the-backend-api-returns-100-000-records-at-one-time-how-should-we-handle-it-in-the-frontend-fab21218fe2

一、造一个 10 万条的接口

先用 Node 起一个会 CORS 的简单服务，方便本地测：

const http = require('http')
const port = 8000;

let list = []
let num = 0

// create 100,000 records
for (let i = 0; i < 100_000; i++) {
  num++
  list.push({
    src: 'https://miro.medium.com/fit/c/64/64/1*XYGoKrb1w5zdWZLOIEevZg.png',
    text: `hello world ${num}`,
    tid: num
  })
}

http.createServer(function (req, res) {
  // for Cross-Origin Resource Sharing (CORS)
  res.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
    'Access-Control-Allow-Headers': 'Content-Type'
  })

  res.end(JSON.stringify(list));
}).listen(port, function () {
  console.log('server is listening on port ' + port);
})

启动：

$ node server.js
# or
$ nodemon server.js

二、前端页面骨架

一个 HTML 加一个 JS。容器 #container 占满视口并允许滚动，列表项用 .sunshine 横排图片和文字。

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #container {
      height: 100vh;
      overflow: auto;
    }

    .sunshine {
      display: flex;
      padding: 10px;
    }

    img {
      width: 150px;
      height: 150px;
    }
</style>
</head>
<body>
    <div id="container">
    </div>
    <script src="./index.js"></script>
</body>
</html>

Index.js

// fetch data from the server
const getList = () => {
  return new Promise((resolve, reject) => {

    var ajax = new XMLHttpRequest();
    ajax.open('get', 'http://127.0.0.1:8000');
    ajax.send();
    ajax.onreadystatechange = function () {
      if (ajax.readyState == 4 && ajax.status == 200) {
        resolve(JSON.parse(ajax.responseText))
      }
    }
  })
}

// get `container` element
const container = document.getElementById('container')


// The rendering logic should be written here.

三、直接渲染：一次塞进 DOM

最直接的办法是拿到列表后 forEach 全插进去：

const renderList = async () => {
    const list = await getList()

    list.forEach(item => {
        const div = document.createElement('div')
        div.className = 'sunshine'
        div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
        container.appendChild(div)
    })
}
renderList()

一次渲染 100,000 条大约要 12 秒，页面长时间空白，不可取。

四、setTimeout 分页渲染

把数据切成每页 limit 条，共 Math.ceil(total/limit) 页，用 setTimeout(..., 0) 一页页往下画，把长任务拆开：

const renderList = async () => {

    const list = await getList()

    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        setTimeout(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        }, 0)
    }
    render(page)
}

分页后首屏能较快出现内容，空白时间变短。注意循环里若某页不足 limit 条，应对 {code(‘item’)} 做空值判断，否则最后一页会报错。

五、requestAnimationFrame + 文档片段

渲染跟帧走时，用 requestAnimationFrame 替换 setTimeout，把工作放到下一次重绘前，减少无效回流。

const renderList = async () => {
    const list = await getList()

    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return

        requestAnimationFrame(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        })
    }
    render(page)
}

window.requestAnimationFrame() 告诉浏览器你要做动画，并在下一次重绘前调用回调。

appendChild 直接插页面很贵。可以先建 DocumentFragment，这一页的节点都挂到片段上，再一次性插进容器：

const renderList = async () => {
    console.time('time')
    const list = await getList()
    console.log(list)
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return
        requestAnimationFrame(() => {

            const fragment = document.createDocumentFragment()
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`

                fragment.appendChild(div)
            }
            container.appendChild(fragment)
            render(page + 1)
        })
    }
    render(page)
    console.timeEnd('time')
}

六、按滚动懒加载

即使用户一次拿到 10 万条，屏幕也只能同时显示有限行。可以按滚动位置动态渲染：列表末尾放一个空节点 blank，blank 进入视口就再画一页。

用 getBoundingClientRect 判断 blank 是否贴在容器底部：

Vue 示例：

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
const getList = () => {
  // code as before
}
const container = ref<HTMLElement>() // container element
const blank = ref<HTMLElement>() // blank element
const list = ref<any>([])
const page = ref(1)
const limit = 200
const maxPage = computed(() => Math.ceil(list.value.length / limit))
// List of real presentations
const showList = computed(() => list.value.slice(0, page.value * limit))
const handleScroll = () => {
  if (page.value > maxPage.value) return
  const clientHeight = container.value?.clientHeight
  const blankTop = blank.value?.getBoundingClientRect().top
  if (clientHeight === blankTop) {
    // When the blank node appears in the viewport, the current page number is incremented by 1
    page.value++
  }
}
onMounted(async () => {
  const res = await getList()
  list.value = res
})
</script>

<template>
  <div id="container" @scroll="handleScroll" ref="container">
    <div class="sunshine" v-for="(item) in showList" :key="item.tid">
      <img :src="item.src" />
      <span>{{ item.text }}</span>
    </div>
    <div ref="blank"></div>
  </div>
</template>

生产里更常见的是虚拟列表：只渲染可视区加减几行缓冲。上面的懒加载仍会把已经滚过的节点留在 DOM 里，数据极大时内存仍会涨。

方案	做法	效果	注意
一次渲染	forEach 全插 DOM	约 12 秒空白	不可用
`setTimeout` 分页	每页 200 条，宏任务拆开	首屏较快	仍会插满 10 万节点
`rAF` + Fragment	跟帧 + 批量插入	回流更少	DOM 总量还在
滚动懒加载	blank 进视口再 slice	按需增加节点	已滚过的节点不回收