解决1万条数据前端渲染不卡的问题

fangcaojushi

已于 2024-05-22 18:12:24 修改

阅读量312

点赞数 8

分类专栏： vue.js 文章标签：前端 javascript chrome elementui

于 2024-05-20 18:16:18 首次发布

本文链接：https://blog.csdn.net/fangcaojushi/article/details/139072113

版权

vue.js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

万级数据前端渲染优化

解决思路
requestAnimationFrame
- - 完整代码

解决思路

将数据分组，通过定时器或requestAnimationFrame两种方式分组渲染到Dom上

requestAnimationFrame

渲染数据-动画requestAnimationFram方法
使用requestAnimationFrame可以将动画的每一帧绘制操作封装为一个回调函数，
并将这个回调函数传递给requestAnimationFrame函数。
当浏览器准备进行下一帧绘制时，会自动调用这个回调函数，从而实现了动画的循环。

// 定义一个渲染函数
const useTwoArr=(page)=>{
   if(page>twoArr.length-1) return
   // 用动画讲求来优化
   requestAnimationFrame(()=>{
     // 取一项,拼接一项
     this.tableData=[...this.tableData,...twoArr[page]]
     console.log(page)
     // 下一项
     page++
     // 递归调用
     useTwoArr(page)
   })
 }
 useTwoArr(0)

完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- elementui引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--elementui 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    
    
    <div id="app">
      <el-table
        v-loading="loading"
        :data="tableData"
        height="500"
        style="width: 500px"
        >
        <el-table-column
          prop="id"
          label="学号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="value"
          label="座号">
        </el-table-column>
      </el-table>
    </div>
    
    <script>
       // 创建一个Vue实例
       new Vue({
         el: '#app',
         data() {
           return {
             loading: true,
             tableData:[],
             apiData:[],
           }
         },
         mounted() {
           this.getGroudData()
         },
         methods:{
           async getGroudData(){
             // this.loading=true
             const res=await axios.get('http://124.223.69.156:3300/bigData')
             // console.log(res)
             if(res.data.code===0){
               this.loading=false
               this.apiData=res.data.data
               // console.log(this.apiData)
               // top10
               // this.tableData=this.apiData.slice(0,10)
               // 分组
               let twoArr=this.buildTablePreTen(this.apiData)
               console.log(twoArr)
               // 渲染数据-定时器方法:
               /* twoArr.forEach((item,index)=>{
                 setTimeout(()=>{
                   this.tableData=[...this.tableData,...item]
                 },20*index)
                 console.log(index)
               }) */
               /*
               渲染数据-动画requestAnimationFram方法
               使用requestAnimationFrame可以将动画的每一帧绘制操作封装为一个回调函数，
               并将这个回调函数传递给requestAnimationFrame函数。
               当浏览器准备进行下一帧绘制时，会自动调用这个回调函数，从而实现了动画的循环。 
               */
               // 定义一个渲染函数
               const useTwoArr=(page)=>{
                 if(page>twoArr.length-1) return
                 // 用动画讲求来优化
                 requestAnimationFrame(()=>{
                   // 取一项,拼接一项
                   this.tableData=[...this.tableData,...twoArr[page]]
                   console.log(page)
                   // 下一项
                   page++
                   // 递归调用
                   useTwoArr(page)
                 })
               }
               useTwoArr(0)
             }
           },
           /*分组构造数据
            每组10条
            10万条分原1万组
           */
           buildTablePreTen(arr){
             let i=0
             let res=[]
             // 1万条数据渲染
             while(i<10000){
               res.push(arr.slice(i,i+10))
               i=i+10
             }
             return res
           }
         }
       });
    </script> 
 </body>
</html>

fangcaojushi

关注

8
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决1万条数据前端渲染不卡的问题

将数据分组，通过定时器或requestAnimationFrame两种方式分组渲染到Dom上。使用requestAnimationFrame可以将动画的每一帧绘制操作封装为一个回调函数，当浏览器准备进行下一帧绘制时，会自动调用这个回调函数，从而实现了动画的循环。并将这个回调函数传递给requestAnimationFrame函数。渲染数据-动画requestAnimationFram方法。
复制链接

扫一扫