前端如何处理大数据

最新推荐文章于 2025-01-17 08:47:44 发布

转载最新推荐文章于 2025-01-17 08:47:44 发布 · 4.4k 阅读

11 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/gyRaindrop/article/details/122253543

文章标签：

#前端 #javascript #开发语言

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文探讨了在前端渲染大量数据时如何优化性能，主要介绍了使用createDocumentFragment创建虚拟DOM片段和requestAnimationFrame来避免卡顿。通过分批加载数据，减少实际DOM操作次数，并利用浏览器的动画帧同步更新，确保流畅的用户体验。

部署运行你感兴趣的模型镜像

（理论就是分割后台数据然后通过定时器将数据加载到虚拟dom上加载完成后渲染一部分）

在项目中经常会碰到大量数据需要在前端页面渲染，很多时候会使用分页的功能，但是数据量过大的时候比如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的执行步伐跟着系统的绘制频率走，它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次, 这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率