做微信的网站,海口制作网站公司,wordpress建公司网站,建立一个网站 优帮云万级数据前端渲染优化 解决思路requestAnimationFrame完整代码 解决思路
将数据分组#xff0c;通过定时器或requestAnimationFrame两种方式分组渲染到Dom上
requestAnimationFrame
渲染数据-动画requestAnimationFram方法 使用requestAnimationFrame可以将动画的每一帧绘制… 万级数据前端渲染优化 解决思路requestAnimationFrame完整代码 解决思路
将数据分组通过定时器或requestAnimationFrame两种方式分组渲染到Dom上
requestAnimationFrame
渲染数据-动画requestAnimationFram方法 使用requestAnimationFrame可以将动画的每一帧绘制操作封装为一个回调函数 并将这个回调函数传递给requestAnimationFrame函数。 当浏览器准备进行下一帧绘制时会自动调用这个回调函数从而实现了动画的循环。
// 定义一个渲染函数
const useTwoArr(page){if(pagetwoArr.length-1) return// 用动画讲求来优化requestAnimationFrame((){// 取一项,拼接一项this.tableData[...this.tableData,...twoArr[page]]console.log(page)// 下一项page// 递归调用useTwoArr(page)})}useTwoArr(0)完整代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/title!-- 引入vue --script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script!-- elementui引入样式 --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css!--elementui 引入组件库 --script srchttps://unpkg.com/element-ui/lib/index.js/script!-- axios --script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script/headbodydiv idappel-tablev-loadingloading:datatableDataheight500stylewidth: 500pxel-table-columnpropidlabel学号width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropvaluelabel座号/el-table-column/el-table/divscript// 创建一个Vue实例new Vue({el: #app,data() {return {loading: true,tableData:[],apiData:[],}},mounted() {this.getGroudData()},methods:{async getGroudData(){// this.loadingtrueconst resawait axios.get(http://124.223.69.156:3300/bigData)// console.log(res)if(res.data.code0){this.loadingfalsethis.apiDatares.data.data// console.log(this.apiData)// top10// this.tableDatathis.apiData.slice(0,10)// 分组let twoArrthis.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(pagetwoArr.length-1) return// 用动画讲求来优化requestAnimationFrame((){// 取一项,拼接一项this.tableData[...this.tableData,...twoArr[page]]console.log(page)// 下一项page// 递归调用useTwoArr(page)})}useTwoArr(0)}},/*分组构造数据每组10条10万条分原1万组*/buildTablePreTen(arr){let i0let res[]// 1万条数据渲染while(i10000){res.push(arr.slice(i,i10))ii10}return res}}});/script /body
/html
