前端接受后台返回超1W条数据，性能优化

解决接受数据量过大有:

1. 在后端对数据进行分页处理然后返回给前端

2. 页面请求数据的时候定时不间断的请求数据

3. requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，requestAnimationFrame来进行分批渲染。感兴趣的具体可以自行去了解

4. 利用虚拟列表的方式来进行数据渲染处理具体可以学习这位博主的   http://t.csdn.cn/DIevlhttp://t.csdn.cn/DIevl

5. 可以利用组件库vue-virtual-scroller 来实现对于数据量过大的渲染处理

(1) 安装依赖  

npm install --save vue-virtual-scroller 

 (2) 依赖安装完后在main.js中进行引用

import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
Vue.use(VueVirtualScroller)

     注意对于css的引入

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

（3）正式的应用

 
        
        
        
        



            



  data() {
    return {
      //数据接收
      tableData: []
    }
  },
  // 模拟后端数据返回
  mounted() {
        for (let i = 0; i < 100000; i++) {
            this.tableData.push({ id: i,num:i})
        }
    },

 (4)对应的参考仓库

前端性能优化 - LionelMesssi30 (lionelmesssi30) - Gitee.com