神族九帝's blog 神族九帝's blog
首页
网盘 (opens new window)
线报 (opens new window)
商城 (opens new window)
  • 复习指导
  • HTML
  • CSS
  • JavaScript
  • 设计模式
  • 浏览器
  • 手写系列
  • Vue
  • Webpack
  • Http
  • 前端优化
  • 项目
  • 面试真题
  • 算法
  • 精选文章
  • 八股文
  • 前端工程化
  • 基础篇
  • 进阶篇
  • 高级篇
  • 计算机基础
  • 高频考点
  • 精简题
  • 综合问题
  • 复习题
  • vue
  • vue2源码学习
  • 剖析vuejs内部运行机制
  • TypeScript 入门实战笔记
  • vue3源码学习
  • 2周刷完100道前端优质面试真题
  • npm发包
  • 重学node
  • 前端性能优化方法与实战
  • webpack原理与实战
  • webGl
  • 前端优化
  • Web3
  • 更多
  • 网站
  • 资源
  • Vue资源
  • 收藏的一些API
  • 未来要做的事
  • 宝塔面板+青龙面板
  • 安卓手机当服务器使用
  • 京东自动评价代码
  • 搭建x-ui免流服务器(已失效)
  • 海外联盟
  • 好玩的docker
  • 导航
GitHub (opens new window)

神族九帝,永不言弃

首页
网盘 (opens new window)
线报 (opens new window)
商城 (opens new window)
  • 复习指导
  • HTML
  • CSS
  • JavaScript
  • 设计模式
  • 浏览器
  • 手写系列
  • Vue
  • Webpack
  • Http
  • 前端优化
  • 项目
  • 面试真题
  • 算法
  • 精选文章
  • 八股文
  • 前端工程化
  • 基础篇
  • 进阶篇
  • 高级篇
  • 计算机基础
  • 高频考点
  • 精简题
  • 综合问题
  • 复习题
  • vue
  • vue2源码学习
  • 剖析vuejs内部运行机制
  • TypeScript 入门实战笔记
  • vue3源码学习
  • 2周刷完100道前端优质面试真题
  • npm发包
  • 重学node
  • 前端性能优化方法与实战
  • webpack原理与实战
  • webGl
  • 前端优化
  • Web3
  • 更多
  • 网站
  • 资源
  • Vue资源
  • 收藏的一些API
  • 未来要做的事
  • 宝塔面板+青龙面板
  • 安卓手机当服务器使用
  • 京东自动评价代码
  • 搭建x-ui免流服务器(已失效)
  • 海外联盟
  • 好玩的docker
  • 导航
GitHub (opens new window)
  • vue2源码学习

  • 剖析vuejs内部运行机制

  • TypeScript 入门实战笔记

  • vue3源码学习

  • 2周刷完100道前端优质面试真题

  • npm发包

  • 重学node

  • 前端性能优化方法与实战

  • webpack原理与实战

  • webGl

  • 前端优化

  • Web3

  • 更多

    • 大数据渲染table
      • 极大数量下保证不卡
      • 50W 行数据依旧不卡
      • 原理解释
      • 还没测试性能
    • ES6-ES12
    • commitlint
    • Element问题清单
    • 正则表达式速查表
    • JS设计模式总结笔记
  • 学习笔记
  • 更多
wu529778790
2021-06-08

大数据渲染table

# 极大数量下保证不卡

https://github.com/mleibman/SlickGrid (opens new window)

# 50W 行数据依旧不卡

https://6pac.github.io/SlickGrid/examples/example-optimizing-dataview.html (opens new window)

https://jsfiddle.net/fx6018vu/ (opens new window)

(非原创,来自https://segmentfault.com/q/1010000017202682/a-1020000018142273 (opens new window) 无法配合 checkbox 使用,不过还是感谢那位大神提供了思路)

https://www.npmjs.com/package/vue-element-bigdata-table (opens new window)

# 原理解释

https://juejin.cn/post/6844903593284206605 (opens new window)

在 Vue 实例中添加的对象,Vue 会先遍历一遍对象的所有属性,用 Object.defineProperty()为每个对象创建对应的 getter 和 setter。而在项目中,我们的 insideTableData 只是一个数据集对象中的一个属性,这个对象还包括很多与这一个数据集相关的信息,我们在使用 this.insideTableData.slice 获取数据的时候会触发 this.insideTableData 对应的 getter,从而执行一些其他逻辑,而我们的滚动又会频繁的(仅当 currentIndex 变化的时候)需要重新填充表格数据,所以这会造成卡顿。

解决这个问题的办法就是阻止 Vue 给我们的数据集对象设置对应的 setter 和 getter,我的方法就是使用 ES5 的 Object.preventExtensions 在将数据集对象交给 Vue 实例代理前将对象密封,这样数据集对象就变成了不可拓展的了,Vue 就不会再添加新的属性了,也就无法设置 setter 和 getter 了。

做了这个处理后渲染几十万数据跟玩儿似的流畅。但是阻止 Vue 设置 getter 和 setter 也造成了一些问题,比如原来表格组件中的一些依赖于表格数据的计算属性,现在无法在表格数据变化时重新计算,当然了,影响不大,就一个表格行数的计算,所以改成了手动设置这个值。

请使用 vxe-table ,它更强大而且性能更好(使用了虚拟滚动技术来解决大数据量的问题)。而且它的接口和 el-table 很相似,代码迁移过去也很轻松。

# 还没测试性能

https://github.com/x-extends/vxe-table (opens new window)

编辑 (opens new window)
上次更新: 2021/11/18, 23:45:41
我的第一个NFT
ES6-ES12

← 我的第一个NFT ES6-ES12→

最近更新
01
好玩的docker
07-04
02
我的第一个NFT
07-03
03
海外迅雷
06-01
更多文章>
Power by vuepress | Copyright © 2015-2023 神族九帝
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×