跳到主要内容

长列表优化 vue 版

长列表在各种数据列场景下经常使用，一旦数据量非常大，就会出现卡段，先看下长列表一步一步进化

一次性加载​

最开始使用长列表时，会这样写

<div id="container"></div>
<script>
  let total = 100000
  let timer = Date.now()
  // 新版浏览器优化，当 js 执行完成后一并插入到页面
  for (let i = 0; i < total; i++) {
    let li = document.createElement('li')
    li.innerHTML = i;
    container.appendChild(li)
  }
  console.log(Date.now() - timer) // js 执行的时间 == 执行很快
  setTimeout(() => {
    console.log(Date.now() - timer) // 渲染完成用的时间 == 时间太长了
  })
</script>

新版浏览器对数据 dom 插入做了优化，当 js 执行完成后一并插入到页面，这样会导致页面空白页很久

使用分片加载​

我们知道 js 是单线程的，异步事件是基于 EventLoop 机制，执行顺序为

  • 执行代码时，遇到宏任务（setTimeout，setInterval，Ajax，DOM 事件）或微任务（promise、async/await），都推入到相应的队列
  • 当同步代码执行完，开始清空微任务队列
  • 微任务执行完后，就会尝试进行 dom 渲染
  • 以上完成，这时 EventLoop 开始工作，从宏任务队列取出一个宏任务（可能包含同步代码，promise 等）执行
  • 然后继续循环下一次

从以上知道，可以 dom 渲染是在宏任务之前执行，那么可以通过改进下

<div id="container"></div>
<script>
  let total = 100000
  let timer = Date.now()
  // 新版浏览器优化，当 js 执行完成后一并插入到页面
  let index = 0 // 偏移量
  let id = 0 // 递增的内容
  function load() {
    index += 50
    if (index < total) {
      // setTimeout 和 requestAnimationFrame 都是宏任务
      // requestAnimationFrame 可以配合浏览器的刷新频率，效果可能好点
      setTimeout(() => { // 分片渲染，因为定时器是一个宏任务，会等待 ui 渲染完成后执行
        let fragment = document.createDocumentFragment() // ie 浏览器 需要使用文档碎片
        // 先渲染 50 个，等待渲染完成后，再渲染 50 个
        for (let i = 0; i < 50; i++) {

          let li = document.createElement('li')
          li.innerHTML = id++
          fragment.appendChild(li)
        }
        container.appendChild(fragment)
        load()
      }, 0)
    }
  }

  load()  
</script>

使用 setTimeout 宏任务先渲染 50 个 dom，这样就能进行分片加载，页面快速显示内容，但依然存在页面卡顿的问题

使用虚拟列表​

页面卡顿的根本原因，还是 dom 太多了，使用虚拟列表，只渲染当前的可视化区域，这里采用 vue 来实现

参考实现：https://github.com/tangbc/vue-virtual-scroll-list/tree/v1.4.7

文件 App.vue

  • 包含两个组件 VirtualList 和 Item
  • 通过 mockjs 生产 mock 数据
<template>
  <div id="app">
    <!-- 只显示可视区域-->
    <!-- 1、列表每一项多高，算出一个滚动条来-->
    <!-- 2、variable 这个高度不一定多高了 -->
    <VirtualList :size="100" :remain="8" :items="items" :variable="true">
      <Item slot-scope="{item}" :item="item"></Item>
    </VirtualList>
  </div>
</template>

<script>

import VirtualList from './components/virtual-list'
import Item from './components/item'
import mock from 'mockjs'

let items = []
for (let i = 0; i < 10000; i++) {
  items.push({id: i, value: mock.Random.sentence(5, 50)})
}

export default {
  name: 'App',
  components: {
    VirtualList,
    Item
  },
  data() {
    return {items}
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

组件 components/Item.vue

  • 接收 item 对象，显示值
<template>
  <div style="border: 1px solid red; padding: 20px 0">
    {{ item.value }}
  </div>
</template>

<script>
export default {
  name: "item",
  props: {
    item: Object
  }
}
</script>

最核心的 components/virtual-list.vue

  • 接收四个参数

    • size: 每一项的高度
    • remain: 可视区域显示多少个
    • items: 数据源
    • variable: 每项高度是否固定

  • html 结构：可视区域 ref="viewport" , 滚动条 ref="viewport" 和数据列表 class="scroll-list"

  • 加载完成后，调用 cacheList 方法先缓存每个 dom 的高度，顶部，底部位置；每次渲染后，更新缓存为实际的高度，顶部，底部位置

  • 当 variable 为 true 时，利用二分查找算法找到滚动条的位置

  • 可视区域显示的实际 dom 数量应大于 remain 个数，防止出现空白

<template>
  <!--  能滚动的盒子-->
  <div class="viewport" ref="viewport" @scroll="scrollFn">
    <!--    自己做一个滚动条-->
    <div class="scroll-bar" ref="scrollBar"></div>
    <!--    渲染的内容-->
    <div class="scroll-list" :style="{transform:`translate3d(0,${offset}px,0)`}">
      <!--    <div class="scroll-list" :style="{top:`${offset}px`}">-->
      <div v-for="item in visibleData" :vid="item.id" :key="item.id" ref="items">
        <slot :item="item"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import throttle from 'lodash/throttle'

export default {
  name: "virtual-list",
  props: {
    size: Number, // 每一项的高度
    remain: Number, // 可见多少个
    items: Array,
    variable: Boolean, //
  },
  data() {
    return {
      start: 0,
      end: this.remain, // 默认显示 8 个
      offset: 0,
    }
  },
  created() {
    this.scrollFn = throttle(this.handleScroll, 200, {leading: false})
  },
  computed: {// 渲染三个屏幕
    prevCount() { // 前面预留几个
      return Math.min(this.start, this.remain)
    },
    nextCount() { // 后面预留几个
      return Math.min(this.remain, this.items.length - this.end)
    },
    // 可见数据有哪些
    visibleData() {
      // 根据 start 和 end 截取
      let start = this.start - this.prevCount
      let end = this.end + this.nextCount
      return this.items.slice(start, end)
    }
  },
  mounted() {
    // 可视区域高度
    this.$refs.viewport.style.height = this.size * this.remain + 'px'
    // 实际滚动条高度
    this.$refs.scrollBar.style.height = this.items.length * this.size + 'px'

    // 如果加载完毕，需要缓存每一项的高度
    // 1、先记录好，等一会滚动的时候，去渲染页面是获取真实 dom 的高度，来更新缓存内容
    // 2、再重新计算滚动条的高度
    this.cacheList()
  },
  updated() {
    // 页面渲染完成后，需要根据当前展示的数据，更新缓存区的内容
    this.$nextTick(() => {
      // 根据当前显示的，更新缓存中的 height bottom top，最终更新滚动条的高度
      let nodes = this.$refs.items // 获取真实的节点
      if (!(nodes && nodes.length > 0)) {
        return
      }
      nodes.forEach(node => {
        let {height} = node.getBoundingClientRect() // 真实的高度
        // 更新缓存中老的高度
        let id = node.getAttribute('vid') - 0
        let oldHeight = this.positions[id].height
        let val = oldHeight - height // 计算当前的高度和之前的高度是否变化
        if (val) { // 没变化的话，就不用任何操作了
          this.positions[id].height = height
          this.positions[id].bottom = this.positions[id].bottom - val // 底部增加了
          // 链表 将后续的所有人 都要向后移动
          for (let i = id + 1; i < this.positions.length; i++) {
            this.positions[i].top = this.positions[i - 1].bottom
            this.positions[i].bottom = this.positions[i].bottom - val
          }
        }
      })
      // 只要更新过，会计算出滚动条的最新高度
      this.$refs.scrollBar.style.height = this.positions[this.positions.length - 1].bottom + 'px'
      // 就是动态计算滚动条的高度
    })
  },
  methods: {
    getStartIndex(value) { // 查找当前滚动的需要找到的值
      let start = 0 // 开始
      let end = this.positions.length - 1 // 结束位置
      let temp = null
      while (start <= end) {
        let middleIndex = parseInt((start + end) / 2);
        let middleValue = this.positions[middleIndex].bottom // 找到当前的中间的那个人的结尾点
        if (middleValue == value) { // 如果直接找到了，就返回当前的下一个人
          return middleIndex + 1
        } else if (middleValue < value) { // 当前要查找的人，在右边
          start = middleIndex + 1
        } else if (middleValue > value) { // 当前要查找的人，在左边
          if (temp == null || temp > middleIndex) {
            temp = middleIndex // 找到范围
          }
          end = middleIndex - 1
        }
      }
      return temp
    },
    cacheList() { // 缓存当前项的高度和 top 值，还有 bottom
      this.positions = this.items.map((item, index) => ({
        height: this.size,
        top: index * this.size,
        bottom: (index + 1) * this.size
      }))
    },
    handleScroll() {
      // 1、先算出当前滚动过去几个了，应该从第几个开始显示
      let scrollTop = this.$refs.viewport.scrollTop

      if (this.variable) {
        // 如果有 variable 使用二分查找找到对应的记录
        // 二分查找: 在一个有序的数据列表，先分成两半，从中间开始，判断在哪个一半，然后继续分成两半查找
        this.start = this.getStartIndex(scrollTop)
        this.end = this.start + this.remain
        // 设置偏移量
        this.offset = this.positions[this.start - this.prevCount] ? this.positions[this.start - this.prevCount].top : 0
      } else {
        // 2、获取当前应该从第几个开始渲染
        this.start = Math.floor(scrollTop / this.size)  // 已滚动的高度/每一项的高度 = 已滚动的个数， 需要取整
        // 3、计算当前结尾的位置
        this.end = this.start + this.remain // 当前可渲染的区域
        // 定义当前可视区域，让当前渲染的内容显示在当前 viewport 的可视区域里
        // 如果有预留渲染，应该把这个位置再向上移动当前这么多 this.size * this.prevCount
        this.offset = this.start * this.size - this.size * this.prevCount // 让可视区域调整偏移位置
      }
    }
  },
}
</script>

<style>
.viewport {
  overflow-y: scroll;
  position: relative;
}

.scroll-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
</style>
最后由 lzw 于 更新