el-select数据量过大引发卡顿,怎么办?

更新日期: 2022-06-17阅读: 1.2k标签: 数据
本文分享自华为云社区《 解决el-select数据量过大的卡顿的两种思路与一种实施方案 》,作者: KevinQ。

经典问题: 在测试环境好好的,怎么到正式环境就不行了?


问题来源

最近在开发公司的后台管理系统,很简单的一个部分,给部门设置领导,前端选用Element-UI的 el-select组件,后端返回的可选人员列表为当前操作人有权控制的每一个人。

在测试环境运行好好的,怎么到了正式环境就不行了呢?


问题分析

出问题的原始代码很简单:

<el-select
v-model="orgForm.leader"
placeholder="请选择部门领导"
style="width: 15vw"
clearable
  multiple
  filterable
>
  <el-option
v-for="(l, index) in leaderOptions"
:key="index"
:label="l.realname"
:value="l.id"
/>
</el-select>

问题出在测试环境时,el-select的可选数据 leaderOptions的量级顶多100多人,而到了正式生产环境中,leaderOptions达到了将近两万左右,从而造成了组件卡顿。

因此,解决问题的方式就是,如何降低el-select的可选项 leaderOptions的数量。


两种解决思路

我们认为有两种解决思路:

前后端配合

这种方式的优点是,思路清晰简单,修改后台接口的返回数据量,每次查询只返回100条数据,毕竟从使用上来说,不会真的有人一直下拉来选择。

这种方式的缺点是,出现问题的是前端,却需要后端来解决,增加了后端的工作量,或者说,将一个领域的问题扩展到另一个领域的人员去解决,会增加团队沟通成本。

因此,我们放弃了这种方式。(其实就是懒得沟通,就想自己解决问题,不麻烦别人!)

纯前端解决

为了减少 el-select的可选项数量,我们构造数据:leaderOptionsTop30, 每次只返回所有可选项的(大约)30条数据,那么这大约30条数据是根据什么来筛选获的呢?

我们设置el-select的 filter-method:

<el-select
              v-model="orgForm.leader"
              placeholder="请选择部门领导"
              style="width: 15vw"
              clearable
              multiple
              filterable
              :filter-method="filterCheckPerOptions"
            >
              <el-option
                v-for="(l, index) in leaderOptionsTop30"
                :key="index"
                :label="l.realname"
                :value="l.id"
              />
            </el-select>

方法体:

filterCheckPerOptions(query = '') {
    // query是输入框中的检索条件
  var arr = this.leaderOptions.filter(item => {
    return !this.$method.isEmpty(item.realname) && item.realname.includes(query)
  })
  // 根据检索条件筛选出来的选项,只取前30条
  if (arr.length > 30) {
    arr = arr.slice(0, 30)
  }
  // 清空之前的选项
  this.leaderOptionsTop30.splice(0, this.leaderOptionsTop30.length)
  // chosen表示已被选择的选项,添加这一部分主要是为了回显,避免选择框中直接出现用户id
  const chosen = this.getChosenItemsArr()
  // 检索项 + 已选项的并集
  const result = [...arr, ...chosen.filter(item => !arr.includes(item))]
  if (arr.length > 30) {
    this.leaderOptionsTop30.push(...result)
  } else {
    this.leaderOptionsTop30.push(...result)
  }
},
getChosenItemsArr() {
      // 获取已被选中的人员
      const items = []
      for (let i = 0; i < this.leaderOptions.length; i++) {
        if (this.orgForm.leader.indexOf(this.leaderOptions[i].id) >= 0 &&
        items.indexOf(this.leaderOptions[i]) < 0) {
          items.push(this.leaderOptions[i])
        }
      }
      return items
    },

打完,收工!


题外话

正式环境运行与测试环境运行结果不同,通常有很多原因,例如:

  1. 服务器:如服务器的时区,语言等配置不同,可能导致某些未指定特定语言或时区的代码在执行时出现不一致的情况。
  2. 数据配置:大多数功能上线后都需要进行后台的数据配置,这一点相信无须多言。
  3. 数据量:

数据量会影响接口的响应速度,页面组件的响应速度等等。比如某个操作需要等待后台接口,而后台接口如果超过一定时长后,前端用户就会明显的感觉操作的卡顿与无响应。


链接: https://fly63.com/article/detial/11753

双向数据绑定与单向数据绑定的各自优势和关系

在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。

原生JS数据绑定的实现

双向数据绑定是非常重要的特性 —— 将JS模型与HTML视图对应,能减少模板编译时间同时提高用户体验。我们将学习在不使用框架的情况下,使用原生JS实现双向绑定 —— 一种为Object.observe

JavaScript判断数据类型的多种方法【 js判断一个变量的类型】

js判断数据类型的多种方法,主要包括:typeof、instanceof、 constructor、 prototype.toString.call()等,下面就逐一介绍它们的异同。

javascript中的typeof返回的数据类型_以及强制/隐式类型转换

由于js为弱类型语言拥有动态类型,这意味着相同的变量可用作不同的类型。 typeof 运算符返回一个用来表示表达式的数据类型的字符串,目前typeof返回的字符串有以下这些: undefined、boolean、string、number、object、function、“symbol

使用typeof obj===‘object’潜在的问题,并不能确定obj是否是一个对象?

在js中我们直接这样写typeof obj===‘object’有什么问题呢?发现Array, Object,null都被认为是一个对象了。如何解决这种情况,能保证判断obj是否为一个对象

js进制数之间以及和字符之间的转换

js要处理十六进制,十进制,字符之间的转换,发现有很多差不多且书写不正确的方法.一个一个实践才真正清楚如何转换,现在来记录一下它们之间转换的方法。

js判断数字是奇数还是偶数的2种方法实现

奇数和偶数的判断是数学运算中经常碰到的问题,这篇文章主要讲解通过JavaScript来实现奇偶数的判断。2种判断方法:求余% 、&1

js算法_判断数字是否为素数/质数

质数又称素数。指在一个大于1的自然数中,除了1和此整数自身外,没法被其他自然数整除的数。比如100以内共25个,js实现代码如下。

Js数据类型转换_JavaScript 那些不经意间发生的数据类型自动转换

JavaScript自动类型转换真的非常常见,常用的一些便捷的转类型的方式,都是依靠自动转换产生的。比如 转数字 : + x 、 x - 0 , 转字符串 : \\\"\\\" + x 等等。现在总算知道为什么可以这样便捷转换。

Js中实现XML和String相互转化

XML是标准通用标记语言 (SGML) 的子集,非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。 这篇文章主要介绍Js中实现XML和String相互转化

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!