JS渲染十万数据列表
栏目: JavaScript · 发布时间: 5年前
内容简介:item.innerHTML =
如果直接上,不管你是一条一条插入,还是先存入fragment再一次性插入,白屏时间都在6s+,浏览器应该是合并了dom更新操作,如果不做优化,并不会分批渲染。
注意:测试所用的item结构是极其简单的,一旦渲染的item是复杂结构那么渲染的时间倍增
item.innerHTML = <p><i>${text}</i></p><strong>测试</strong>
;
-
优化一,分批渲染requestAnimationFrame
requestAnimationFrame和setTimeout的区别就不多复述了,网上一大把。先渲染一部分,然后执行循环逻辑。但是这个部分到底是多少,需要自己调试了,我写的是300,但不一定适用。
const totalFn = () => { window.requestAnimationFrame(() => { if (i <= data.length) { computedHeight(data.slice(i, i + 300)); // 执行插入dom操作 i += 300; totalFn(); } else { root.style.height = max + 'px' } }) } totalFn();
这样能做到秒开,无长时间白屏。
but,如果只是这样就回答的太简单了点,可能面试官还希望更深入的解答,比如我十万条数据就算能秒加载,但是渲染复杂逻辑,说不定会卡卡的,因为页面元素太多了。在不考虑分页的情况下,如何进一步优化。
- 优化二,只渲染可视区范围内的dom(只提供思路了)
这块涉及的交互就略复杂了,首先为了保证和一次性加载出来的效果一致,比如有滚动惯性,需要计算总高度。
简单的玩法,每一个item是同样的高度,那么计算高度就很简单了,但是如果每个item的高度不同,那么要就需要隐藏计算(把dom插入隐藏域,而且需要采用优化一的手段,不然会卡),但是那样又会导致整个计算过程过于漫长,需要寻找到最适合的点。
得到高度后,绑定scroll事件,根据scrollTop的值,动态计算展示哪一块内容,为了保证位置,还需要在首部填充空白块占位。
仍然可能存在的问题,比如scroll触发的时机,scroll在ios下是不能做到实时触发的,比如在惯性滚动过程中,触发不了scroll事件,可能会导致部分白屏(暂时没有想到如何解决),如果用iscroll.js,不知道能不能
模拟到原生的效果。
以上所述就是小编给大家介绍的《JS渲染十万数据列表》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- iOS渲染-将视频原始数据(RGB,YUV)渲染到屏幕上
- vue源码阅读之数据渲染过程
- 每页500条数据的渲染优化思路(1)
- 使用 React 把数组数据渲染为列表、表格
- 【数据采集实例分析】网页复杂渲染机制下的数据解析
- Echarts关于tree树数据渲染图例最新实例
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
PHP and MySQL Web Development
Luke Welling、Laura Thomson / Sams / July 25, 2007 / $49.99
Book Description PHP and MySQL Web Development teaches you to develop dynamic, secure, commerical Web sites. Using the same accessible, popular teaching style of the three previous editions, this b......一起来看看 《PHP and MySQL Web Development》 这本书的介绍吧!