JS使用window.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()的资料请关注脚本之家其它相关文章!
相关文章
三剑客:offset、client和scroll还傻傻分不清?
这篇文章主要给大家介绍了三剑客:offset,client和scroll的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-12-12HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
WebSocket 是一种自然的全双工、双向、单套接字连接。这篇文章给大家介绍了HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天,感兴趣的朋友一起学习吧2016-10-10
最新评论