JS使用window.requestAnimationFrame()对列表切片进行渲染
更新时间：2023年05月29日 09:31:12 作者：fuGUI
这篇文章主要为大家介绍了JS使用requestAnimationFrame对列表切片进行渲染，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
背景
正常的后端返回几十条数据数据直接渲染还好，但是现在需求是表格上面的每一行数据都要编辑的操作（各种下拉和输入），最后整体保存，保存完成后再次进来回显之前的已经填的数据，现在的问题是每次回显比较慢（接口数据很快就返回了），在页面很卡顿，体验很不好。
问题排查
通过审查代码也没发现什么问题，找不出原因，代码逻辑是很简单的，就是等接口数据返回然后赋值给表格展示，到页面就loading了。。
问题解决
之前看到了列表可以切片渲染，就是前端对数据做一个分页然后按照顺序加载，假设每个页面都有 limit 记录，那么数据可以分为 Math.ceil(total/limit) 个页面。然后可以使用setTimeout顺序渲染页面，一次只渲染一个页面。
- 使用setTimeout
const renderList(list = []){
const total = list.length
const page = 0
const limit = 200
const totalPage = Math.ceil(total / limit)
const render = (page) => {
if (page >= totalPage) return
setTimeout(() => {
for (let i = page * limit; i < page * limit + limit; i++) {
const item = list[i]
if(item) {
// ...这里写当前表格赋值逻辑
// this.tableData.push(item)
}
}
render(page + 1)
},0)
}
render(page)
}- 使用requestAnimationFrame来代替 setTimeout
readerList(list = []) {
const total = list.length
const page = 0
const limit = 10
const totalPage = Math.ceil(total / limit)
const render = (page) => {
if (page >= totalPage) return
for (let i = page * limit; i < page * limit + limit; i++) {
const item = list[i]
if(item) {
// ...这里写当前表格赋值逻辑
// this.tableData.push(item)
}
}
requestAnimationFrame(() => { render(page + 1) })
}
requestAnimationFrame(() => { render(page) })
}关于requestAnimationFrame
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
备注： 若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用 requestAnimationFrame()。requestAnimationFrame() 是一次性的。
requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
- requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
- 在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的cpu，gpu和内存使用量。
以上就是JS使用window.requestAnimationFrame()对列表切片进行渲染的详细内容，更多关于JS window.requestAnimationFrame()的资料请关注脚本之家其它相关文章！
相关文章
近期做项目由于每张图片加载的时候比例大小都不一样,加载图片时大部分图片会变形,导致图片展示效果非常差,所以我们可以获取图片的原始宽高,然后以等比例展示,效果会非常好,这篇文章主要给大家介绍了关于JS获取img图片原始尺寸高度与宽度的七种方式,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了javascript随机之洗牌算法深入分析,同时提供了一个完整实例,需要的朋友可以参考下2014-06-06
用js实现的客户端即可实现md5值的代码，一般情况下都是后台语言才有的，客户端也有了，方便有需要的朋友了。2011-02-02
仿QQ邮箱的弹出层，弹出确认框，主要是用火狐的firebug把html和css扣了下来，没有做封装,就定义了一个拖动事件. 大家可以封装自己的弹出窗，嘿嘿！2015-04-04
这篇文章主要介绍了JavaScript简单遍历DOM对象所有属性的实现方法,涉及JavaScript针对页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了JavaScript Event Loop相关原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的，需要对正则的有基本认识，本人一直对两种匹配模棱不清，还有不清楚的朋友跟随脚本之家小编一起看看吧2018-05-05
weui框架暂时只有css文件，并没有js文件实现其功能，我在其html+css后面增加了js实现其功能，为大家提供方便，也为自己保存记录。具体实例代码大家参考下本文2017-08-08
这篇文章主要给大家介绍js数组的操作，数组的创建，数组元素的发那个吻，数组元素的添加，数组元素的删除，数组的截取和合并，数组的拷贝，数组元素的排序，数组元素的字符串化等知识，对js数组的操作感兴趣的朋友可以参考下本篇文章2015-10-10
这篇文章主要为大家介绍了ajax请求前端跨域问题原因及解决方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步2021-10-10
最新评论