从前端角度处理大量数据的渲染

最新推荐文章于 2024-05-06 09:44:47 发布

gyRaindrop

最新推荐文章于 2024-05-06 09:44:47 发布

阅读量2.5k

点赞数 2

分类专栏：前端性能优化文章标签：前端 html5

原文链接：https://blog.csdn.net/yy168888/article/details/115660601

版权

前端性能优化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在项目中经常会碰到大量数据需要在前端页面渲染，很多时候会使用分页的功能，但是数据量过大的时候比如10万条这种的，一直滑动列表后面会出现卡顿，滑不动的现象，这时候就需要前端来做些优化

1.createDocumentFragment（）碎片节点

渲染大数据时，将数据分成一段一段执行，createDocumentFragment()创建一个虚拟节点对象，将一部分数据先添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染DOM的次数，效率会明显提升

<body>
   <ul></ul>
   <script>
      const total = 100000; // 插入十万条数据
      const onceCount = 50; // 每次插入50条数据
      const sumCount = Math.ceil(total/onceCount); // 插入数据需要的次数
      var renderCount = 0; // 渲染次数
      var ul = document.querySelector("ul"); // 获取要插入数据的父节点
      function add(){ // 添加数据方法
         var fragment = document.createDocumentFragment(); // 创建虚拟节点
         for( let i=0; i<onceCount; i++){
            var li = document.createElement("li");
            li.innerHTML = Math.floor(Math.random()*100000);
            fragment.appendChild(li); // 插入虚拟节点不消耗性能
         }
         ul.appendChild(fragment);
         renderCount++;
         loop();
      }
      function loop(){
         if(renderCount<sumCount){
            window.requestAnimationFrame(add)
         }
      }
      loop();
   </script>
</body>

2.requestAnimationFrame（）
上面的代码中使用到了requestAnimationFrame（），实现动画效果的方法比较多，javascript中可以通过定时器setTimeout来实现，css3可以使用transition和animation来实现，html5中的canvas也可以实现。除此之外html5还提供一个专门用于请求动画的API, 即requestAnimationFrame(rAF), 直译就是 “请求动画帧”

requestAnimationFrame比起setTimeout,setInterval的优势主要是两点:
requestAnimationFrame会把每一帧中的所有dom操作集中起来,在一次重绘和回流中完成,并且重绘或回流的时间间隔紧紧会随浏览器的刷新频率,一般来说频率为每帧60秒在隐藏不可见元素中,requestAnimationFrame将不会进行重绘或回流.有更少的cpu,gpu和内存使用量.
那就是说，rAF的执行步伐跟着系统的绘制频率走，它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次, 这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

————————————————
原文链接：https://blog.csdn.net/yy168888/article/details/115660601

gyRaindrop

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
从前端角度处理大量数据的渲染

在项目中经常会碰到大量数据需要在前端页面渲染，很多时候会使用分页的功能，但是数据量过大的时候比如10万条这种的，一直滑动列表后面会出现卡顿，滑不动的现象，这时候就需要前端来做些优化1.createDocumentFragment（）碎片节点渲染大数据时，将数据分成一段一段执行，createDocumentFragment()创建一个虚拟节点对象，将一部分数据先添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染DOM的次数，效率会明显提升&l
复制链接

扫一扫