前端处理上万条数据的优化

最新推荐文章于 2024-08-22 20:49:20 发布

兰亭古墨

最新推荐文章于 2024-08-22 20:49:20 发布

阅读量1w

点赞数 7

分类专栏： JavaScript 性能优化文章标签：前端万级以上数据前端处理

本文链接：https://blog.csdn.net/hefeng6500/article/details/99753271

版权

JavaScript 同时被 2 个专栏收录

83 篇文章 4 订阅

订阅专栏

性能优化

4 篇文章 0 订阅

订阅专栏

最近碰到一面试题给了一个请求接口，没有分页，一共一万条数据，并且让前端渲染在页面上，这个场景一般在实际应用场景不多见，一般后端都会设置分页查询，但是面试官考的就是前端对于大量数据的处理能力。看本文之前不妨思考下，如果让你做，你会怎么处理呢？

先给出代码吧！

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
</head>

<body>
  <div id="root">
    <search />
  </div>

  <script type="text/babel">

    //列表数据接口: http://apicloud.mypaas.com.cn/mockview/appdesign?path=%2Fapi%2Flistdata&api=%2Fapi%2Flistdata

    //列表数据搜索
    var Search = { 
      //TODO
      data(){
        return {
          serarchWord: '',
          listData: [],
        }
      },
      methods: {
        // 获取数据
        getData(){
          axios({
            url: 'http://apicloud.mypaas.com.cn/mockview/appdesign?path=%2Fapi%2Flistdata&api=%2Fapi%2Flistdata',
            method: 'GET',
            params: {
              keyWord: this.serarchWord
            }
          }).then(res=>{
            // this.listData = res.data.data
            let data = res.data.data
            let groupData = this.group(data)
            for(let i=0;i<groupData.length;i++){
              setTimeout(() => {
                this.listData.push(...groupData[i])
              }, 1000 * i);
            }
          })
        },
        group(data) {
          var result = [];
          var groupItem;
          for (var i = 0; i < data.length; i++) {
            if (i % 1000 == 0) {
              groupItem != null && result.push(groupItem);
              groupItem = [];
            }
            groupItem.push(data[i]);
          }
          result.push(groupItem);
          return result;
        },
        inputChange(){
          this.debounceSearch()
        },
        debounce(fn, wait){
          var timeout = null;
          return function() {
            if(timeout !== null) 
              clearTimeout(timeout);
            timeout = setTimeout(fn, wait);
          }
        }
      },
      mounted(){
        this.debounceSearch =  this.debounce(this.getData, 800)
      },
      template: `
        <div>
          <input v-model="serarchWord" @input="inputChange"/>  
          <ul>
            <li v-for="(item, index) in listData" :key="item.id">{{item.title}}</li>  
          </ul>
        </div>
      `
    }

    new Vue({
      el: '#root',
      components: {
        'search': Search
      }
    })
  </script>
</body>

</html>

代码解释：

1、考虑到模糊搜索，添加防抖函数

2、考虑到数据量太大，将数据分组插入页面

参考文章：

前端懒加载的实际应用，input下拉检索大量数据（万条以上）

JavaScript如何一次性展示几万条数据