前端经典问题收集

最新推荐文章于 2022-06-27 17:32:16 发布

yw00yw

最新推荐文章于 2022-06-27 17:32:16 发布

阅读量199

点赞数

分类专栏：面试题文章标签：性能优化前端渲染几十万条数据 js Array.from echarts

本文链接：https://blog.youkuaiyun.com/yw00yw/article/details/111521903

版权

面试题专栏收录该内容

9 篇文章

订阅专栏

前端渲染几十万条数据不卡顿

核心API

createDocumentFragment
requestAnimationFrame

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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>
</html>

快速循环处理指定长度的数据

// 设置图表数据
setChartData (chart) {
   const { legend, xAxis, jData, fData, pData, gData} = chart;
   this.extraOption.legend.data = legend;
   this.extraOption.xAxis[0].data = xAxis;
   const arr = [jData, fData, pData, gData];
   const seriesArr = Array.from({ // 使用Array.from创建指定长度的数据，然后map往里添加数据即可
       length: arr.length
   }).map((item, index) => ({
       name: legend[index],
       stack: "总量",
       data: arr[index],
       type: 'bar',
       barWidth: 10,
   }))
   this.extraOption.series = seriesArr;
},