前端经典问题收集

柔情只为你懂 2022-12-29 11:23 177阅读 0赞

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

#### 核心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;
    },

![在这里插入图片描述][20210129111919974.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

## flex布局伸缩问题 ##

1.  纵向布局，高度被撑开 —— 在设置了flex元素上加高度height: 0;
2.  横向布局，宽度被撑开——在设置了flex:1的元素上加overflow: hidden;

[20210129111919974.png]: /images/20221120/57d90db0e30b40c6be31f242941a02a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210129111953664.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw==,size_16,color_FFFFFF,t_70