vue渲染大量数据如何优化_Vue - Table表格渲染上千数据优化

Vue - Table表格渲染上千数据优化

此次项目经验会谈谈常常在项目中，针对成千上万数据渲染优化的不断探索来谈谈本身的体会，其目的就是保证用户浏览上万条数据的时候，UI要很流畅，确保用户操做过程当中不会出现UI卡顿或者最糟糕的状况，直接浏览器奔溃。css

其优化目录以下，因为内容不少，会分两篇文章进行研究，前端

本文章主要会围绕如何设计一个虚拟滚动来渲染成千上万的数据。vue

1.表格布局(To be continue)react

2.Reflow & Repaint渲染方式(TBC)git

3.浏览器API：window.requestAnimationFrame 渲染优化(TBC)程序员

4.虚拟滚动：Virtual scrollinggithub

GITHUB-Vue Table表格渲染上千数据 ： 后续会加入Filter功能，针对Reflow和RequestAnimationFrame的渲染效果会更加明显web

虚拟滚动(Virtual scrolling)篇

关键字：虚拟行渲染，transform数据移动，列表节点渲染优化编程

NK0 - Background数组

本文的前提条件是前端已经缓存了上万条数据，当渲染数据到UI上时，如何让用户在使用过程当中不会遭到卡顿，用起来不流畅？

以前不少项目因为数据大致围绕在上千左右，当结果集结合其它功能，例如Filter数据过滤功能一块儿使用的话，会采用如下几种方式去优化列表渲染，

(1)Version1: 采用display:none(对应Vue的指令是v-show)，再结合v-for中的Key来复用DOM元素和隐藏元素 =》该方式会致使UI Reflow即回流，因此UI会常常出现短暂的卡顿，用户体验不是很好

(2)Version2: 采用window对象的内置API，即window.requestAnimation()，来渲染成千上万条数据，即模拟动画效果让用户操做起来特别的顺畅。

以上两种方式都有个特色：DOM中会插入数据量大小的元素，尽管有些数据被隐藏起来，但都会致使HTML文件size会很是大，低端设备的速度会明显变慢。

因此基于以上两种方式，还不可以知足去渲染上万条数据！

也所以trigger出本文的主题 - 基于VUE列表的虚拟滚动

本文的虚拟滚动方式主要围绕着

(1)虚拟行渲染：缓存数据和筛选数据，除了要保留用户的可视区域的数据，还考虑到了若是用户的滚动范围不是很大的话，就不须要去刷新页面，因此DOM中的元素除了可视区域的数据，会多保留视图的上下留闲数据。

(2)布局：主要是为了伪装全部数据元素都有在占用空间，浏