大数据量表格渲染初探

原创

已于 2022-06-13 20:43:50 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2022-06-13 20:32:25 首次发布

本文探讨了使用DOM实现大数据量表格的高效渲染，通过绝对定位、requestAnimationFrame、translateY、虚拟滚动和编辑替换等技术，实现了一个70w条数据的表格。在保证性能的同时，还支持编辑功能和固定行列。结论强调了降低不可见区域DOM渲染对提升前端体验的重要性。

高性能表格

前言

前端对于大数据量表格高效渲染需求

前端实现表格主要有以下两种方式：

Canvas实现 - Canvas 渲染效率比 DOM 高
DOM实现 - DOM 可拓展性比 Canvas 好，渲染自定义内容首选 DOM 而非 Canvas。

最终我们尝试用DOM来探究大数据量表格的渲染

效果如下（表格数据来自本地70w条数据，网络请求的话只要后台能及时返回数据渲染压力应该不会太大，没有时间做很多，只是实现了原理级别的内容）：

20220612_224420

实现原理：

1.div作为单元格，采用绝对布局

2.requestAnimationFrame

3.translateY

4.虚拟滚动

5.编辑点击时候替换div

6.需要固定的行列单独渲染

代码

<template>
    <div v-for="row,index in headerData" :key="item">
      <div class="headerLine" style=""  v-for="column,key,i in row"  >
        <div class="header" :style="'position: fixed; top: 60px; left:' + i * 300 +'px;'">{
   
   {
   
    column }}</div>
      </div>
    </div>
  <div class="wrapper" ref="wrapper" @scroll="onScroll">
    <div class="background" :style="{height:`${total_height}px`}"></div>


    <div  class="table" ref="container">

      <div v-for="row,index in runList" :key="item">
        <div  class="line" v-for="column,key,i in row.data"  >
          <div @dblclick="itemClick" :style="'top:' + index * (row.rospan * 50) +'px; z-index:' + (runList.length - index) +';left:' + i * 300 +'px;'" :class="[getClass(index), 'item']">{
   
   {
   
    column === '' ? 'NULL':column }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import areaCodeData from './area_code.json'

export default {
   
   
  props: {
   
   
    cache_screens: {
   
    // 缓冲的屏幕数量
      type: Number,
      default: 1
    }
  },
  data () {
   
   
    return {
   
   
      city_data: null,
      headerData: [{
   
   id: '表id', code: '区划代码',name: '名称',level: '级别1-5,省市县镇村',pcode: '父级区划代码',create_time: '创建时间',created_by: '创建人',update_time: '更新时间',updated_time: '更新人'}],
      list: [], // 源数据
      runList: [