后端一次性返回10w条数据，前端如何优化处理

1-服务器代码

const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
app.get('/list', (req, res) => {
  let list = []
  let num = 0
  for (let i = 0; i < 100000; i++) {
    num++
    list.push({
      src: 'https://img1.baidu.com/it/u=337195790,3454436041&fm=253&fmt=auto&app=138&f=PNG?w=300&h=500',
      text: `我是${num}号嘉宾`,
      tid: num,
    })
  }
  res.json(list)
})
app.listen(2000, () => {
  console.log('http://127.0.0.1:2000')
})

2-前端代码

css

 <style>
    * {
      padding: 0;
      margin: 0;
    }

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

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

    img {
      width: 150px;
      height: 150px;
    }
  </style>

html

<div id="container"> </div>

js

 /* 1-直接渲染页面直接卡死 */
    const renderList = async () => {
      console.time('列表时间')
      const { data: list } = await axios.get('http://127.0.0.1:2000/list')
      // 获取container对象
      const container = document.getElementById('container')
      var str = ''
      list.forEach(item => {
        str += `
${item.src}" />${item.text}`
})
container.innerHTML = str
console.timeEnd('列表时间')
}
renderList()
/* 2-分页渲染 */
const renderList = async () => {
console.time('列表时间')
const { data: list } = await axios.get('http://127.0.0.1:2000/list')
// console.log(list);
const total = list.length // 总条数
const page = 0 // 当前第一页
const limit = 200 // 每页显示200条
const totalPage = Math.ceil(total / limit)// 计算得到总页码数
const render = (page) => {
if (page >= totalPage) return // 表示超出最大页码数或者理解成最后一页
setTimeout(() => {
//每次循环渲染200条
/*
page=0 [0,200]
page=1 [200,400]
...
一直page>总页码数就终止递归次循环
*/
for (let i = page * limit; i < page * limit + limit; i++) {
const item = list[i]// 获取200条中的每一项
const div = document.createElement('div')// 动态创建一个divv元素
div.className = 'item'// 定义一个name
div.innerHTML = `${item.src}" />阿牛哥：${item.text}` // 给每一项添加属性
container.appendChild(div)
}
render(page + 1)
}, 0)
}
render(page)
console.timeEnd('列表时间')
}
renderList()