1-服务器代码

/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-04-22 22:20:09
 * @LastEditors: voanit
 * @LastEditTime: 2022-04-22 22:58:38
 */
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 += `<div class='item'><img src="${item.src}" /><span>${item.text}</span></div>`
      })
      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 = `<img src="${item.src}" /><span>阿牛哥：${item.text}</span>` // 给每一项添加属性
            container.appendChild(div)
          }
          render(page + 1)
        }, 0)
      }
      render(page)
      console.timeEnd('列表时间')
    }
    renderList()