简易版虚拟滚动原理

简易版虚拟滚动原理

1.为什么使用虚拟滚动？

首先提到一个现象，前端的性能瓶颈那就是页面的卡顿，当然这种页面的卡顿包含了多种原因。例如HTTP请求过多导致数据加载国漫，下载的静态文件非常大导致页面加载时间很长，js中一些算法响应的时间过长等。很多前端工程师都花费很多的精力在dom渲染上来优化页面加载。

2.浏览器渲染原理

1.解析html文件并生成Dom Tree。
2.CSS解析生成CSS Rule Tree。
3.在渲染阶段，浏览器会把DOM Tree 和 CSS Rule Tree 给DOM Tree上的每个节点添加样式，并生成Render Tree。
4.Render Tree（layout/reflow），绘制元素尺寸、位置计算。
将计算好的信息发给GPU并显示在页面。

3.浏览器渲染瓶颈

• 重绘(repaint)：当Render Tree 中的一些元素需要更新元素本身的属性，只影响外观样式和颜色等，不影响整个布局。

• 回流(reflow)：当Render Tree 中的某些元素因为规模、尺寸、位置等改变时，会影响整个布局。

回流必定发生重绘，重绘不一定发生回流，所以大家可以知道，回流所造成的影响是比较大的，如果页面中频繁的触发回流的操作，那么最终造成页面卡顿也是肯定的。

造成回流和重绘的操作有以下类别：

• 页面初始化
• 添加或者删除页面上的可视区DOM元素
• 元素位置发生改变，定位和浮动，盒模型
• 页面文本内容发生变化，影响输入框的大小改变。
• 图片显示加载，如果没有加载图片又会被替换成相应提示文字信息。
• 浏览器窗口尺寸大小变化（回流是根据视口大小来计算页面元素的位置和大小）。

浏览器的瓶颈主要在于：

1.无法一次性渲染太多的DOM元素。
2.每次滚动事件将会让对应的DOM中所有元素重新渲染。

针对于浏览器的瓶颈问题，有三种解决办法：数据分页、无限滚动、虚拟滚动。

4.数据分页

对需要展示的大量数据进行分割分页，后端已经做好了分页，前端只需要调用后端的接口传入相应的第几页的参数就能获取到，减少了一次性需要渲染的行数，但是如果查询的表列数非常多，还是可能会渲染很多元素，不是一个很稳定的方法。

5.无限滚动

是在页面渲染一次性所能承受最大范围的数据量，当滚动条快接近底部时，再去追加渲染下一批需要渲染的元素，但是该方法的明显缺点在于，如果数据量过大，无限滚动下去那么最终所造成渲染的元素越来越多，性能也不会很好。

6.虚拟滚动

虚拟滚动其实就是综合数据分页和无限滚动的方法，在有限的视口中只渲染我们所能看到的数据，超出视口之外的数据就不进行渲染，可以通过计算可视范围内的但单元格，保证每一次滚动渲染的DOM元素都是可以控制的，不会担心像数据分页一样一次性渲染过多，也不会发生像无限滚动方案那样会存在数据堆积，是一种很好的解决办法。

假设实际开发中服务端一次响应10万条列表数据，此时设备屏幕只允许容纳20条，那么用户理论上只可以看见20条数据，其他的数据不会进行渲染加载。如果前端将10万条数据全部渲染成DOM元素，可能造成程序卡顿，占用较大资源，非常影响用户体验，那么虚拟滚动技术就完美的解决了这一问题。

image.png

如图所示，当我们进行滚动时，可视区域大小不变，渲染的元素数量也是可以控制的，合理的减少了不必要的DOM渲染，提高浏览器的性能。

黄色边框内为可视区域，可视区域的红色行表示在页面能展示的数据，每次滚动时计算scrollTop的值，可视区域内的红色渲染分高度可以略大于黄色边框可视高度，避免滚动的时候直接替换。

如何计算可视区域的渲染的元素以及实现虚拟滚动步骤如下所示：

• 统一设置每一行的高度（需要相同）方便计算
• 需要计算渲染的数据量（数据的长度），根据每行的高度以及元素的总量计算整个Dom渲染容器的高度
• 获取可视区域的高度
• 触发滚动事件后，计算偏移量（滚动条距顶距离），再根据可视区域高度计算本次偏移的截至量，得到需要渲染的具体数据

7.虚拟滚动组件

父组件

<template>
  <div id="app">
    <ScrollComponents
      :data="dataList"
      :viewH="viewH"
      :itemH="itemH"
    ></ScrollComponents>
  </div>
</template>

<script>
import ScrollComponents from "@/views/scrcollList/scrollComponents.vue";
export default {
  name: "ScrollList",
  data() {
    return {
      dataList: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34,
      ],
      viewH: 400,
      itemH: 40,
    };
  },
  components: {
    ScrollComponents,
  },
};
</script>

<style scoped></style>

子组件

<template>
  <!-- 可视区盒子 -->
  <div
    class="container"
    :style="`height:${viewH}px;overflow-y:scroll`"
    @scroll="handleScroll"
  >
    <div class="list" :style="`height:${scrollH}px`">
      <div class="item_box" :style="`transform:translateY(${offsetY}px)`">
        <div
          class="item"
          :style="`height:${itemH}px`"
          v-for="(item, index) in list"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScrollComponents",
  props: {
    data: Array, // 列表总数据
    viewH: Number, // 外部高度
    itemH: Number, // 单项高度
  },
  data() {
    return {
      scrollH: "", // 整个滚动列表高度(总高度)
      list: [], // 每次显示的数据
      showNum: "", // 页面需要显示的数量
      offsetY: "", // 动态偏移量- 外层的盒子进行滚动设置
      lastTime: "", //最新的时间
    };
  },
  methods: {
    //  滚动时候触发回调
    handleScroll(e) {
      // 控制滚动时间间隔
      if (new Date().getTime() - this.lastTime > 10) {
        let scrollTop = e.target.scrollTop; //滚动条高度
        // 每一次滚动后 根据scrollTop值获取一个可以整除itemH结果进行偏移
        this.offsetY = scrollTop - (scrollTop % this.itemH);
        this.list = this.data.slice(
          Math.floor(scrollTop / this.itemH), // 计算卷入了多少行
          Math.floor(scrollTop / this.itemH) + this.showNum
        );
        this.lastTime = new Date().getTime(); //更新最新时间
      }
    },
  },
  mounted() {
    // 初始化计算
    this.scrollH = this.data.length * this.itemH;
    // 计算可视化高度中能存几个列表，可以略多余可视化高度能存放的列表数量避免滚动时被替换
    this.showNum = Math.floor(this.viewH / this.itemH) + 1;
    // 默认展示的几个数据
    this.list = this.data.slice(0, this.showNum);
    this.lastTime = new Date().getTime();
  },
};
</script>

<style scoped>
.container {
  position: relative;
  top: 200px;
  left: 100px;
  border: 1px solid red;
  width: 400px;
}
.item {
  border: 1px solid #008c8c;
}
</style>

浏览器显示效果

image.png