如果有10万或100万条数量庞大的数据, 你怎么渲染到页面

首先我们来看一下, 错误的写法(直接将所有的数据一下子全部渲染到页面):

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

    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()

浏览器在一般情况下, 一百两百条数据还是不痛不痒的; 如果换做十万百万条数据的话浏览器就会直接"死"掉了.

现在我们就来看一看正确的写法:

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

    const renderList = async () => {
      console.time('列表时间')
      const { data: list } = await axios.get('http://127.0.0.1:2000/list')
      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 = 'item'
            div.innerHTML = `<img src="${item.src}" /><span>大帅：${item.text}</span>`
            container.appendChild(div)
          }
          render(page + 1)
        }, 0)
      }
      render(page)
      console.timeEnd('列表时间')
    }
    renderList()

细节分析一下:

    const renderList = async () => {
      console.time('列表时间')
      const { data: list } = await axios.get('http://127.0.0.1:2000/list')
      const total = list.length
      const page = 0
      const limit = 200
      const totalPage = Math.ceil(total / limit)

1. 外层的函数是发送ajax获取数据, 对数据进行记录赋值

2. list是服务器获取的所有数据列表

3. total是记录所有的数据的条数

4. page是默认显示第一页(这里必须设置为0, 下面for循环会使用到)

5. limit是每一页渲染数据的上限(可以理解为pageSize)

6. totalPage是一共需要分多少页(大数据的渲染是可以使用分页操作来渲染的)

    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 = 'item'
            div.innerHTML = `<img src="${item.src}" /><span>大帅：${item.text}</span>`
            container.appendChild(div)
          }
          render(page + 1)
        }, 0)
      }
      render(page)
      console.timeEnd('列表时间')
    }
    renderList()

1. 内层循环是对数据进行整体的处理

2. for循环是获取每一页两百条数据每一条数据的下标值

3. page = 0 区间[0~200], page = 1 区间[200~400]......

4.. item是list列表里面的一条数据

5. 获取dom元素, 渲染数据

6. 循环结束让page+1

总结: 

        如果是一个很庞大的数据需要渲染到页面, 我们就可以使用分页的操作进行分批次的渲染; 使用定时器每一次显示几百条.

        用户在看上一页数据的时候, 后面的数据还是在不断的渲染.