前端性能优化——如何对超大量数据进行渲染？

文章预览

点击上方  前端Q ，关注公众号 回复 加群 ，加入前端Q技术交流群 如何对超大量数据进行渲染？ 浏览器的性能有限，无法同时渲染大量 dom 。对此进行的性能优化可以从以下几个方面入手： 对 dom 进行分批渲染。 对 dom 的操作尽量集中进行。 将可视区域以外的 dom 从 dom 树中移除，即将进入可视区域后再添加。 以下有三种方法来实现大量数据的渲染。 1. 使用定时器 在 dom 树中一次性插入大量的元素是一个极其频繁的操作。使用定时器可以降低操作的频率。 代码如下： export   default  (element,data) => {      const  fragment =  document .createDocumentFragment()           let  timer = setInterval( ()  =>  {               for (  let  i =  0 ; i  <   20 ; i++ ) {              const  item = data.shift()              if ( !item ) {                 c ………………………………