ElementUI 级联选择器数据量过大时首次渲染缓慢优化思路

今天在项目中有遇到这么一个问题

服务端返回的 JSON 数据过于复杂导致客户端使用级联选择器进行渲染操作卡顿，严重影响用户体验

首先来看看引发问题的数据量级

数据量级

受级联选择器本身的数据渲染机制所限制，叶子节点处不能再存在有 children 属性，故需要先对原数据进行清理，去除所有叶子节点的 children 属性

此处巧用返回数据对于叶子节点的标识对叶子节点项进行处理

考虑代码可读度使用递归进行实现

递归清洗数据

其中传入的 arr 为需要进行处理的原始数组，该种操作具有一定的局限性，也即一定需要传入作用域内可读的变量，已保证数据的一致性

若需要对其封装成纯函数的形式需要使用传统 for 循环进行改写

到这直接赋值可见严重卡顿，表现在点击后需要等待两三秒才会出现且无法做任何加载中提示

此时注意到级联选择器提供了一个动态加载的钩子函数

当数据量较小时该组件非常流畅，故我们有了优化思路

在原有数据的基础上，使用新变量原数据存储，先使用第一层数据进行显示展示，在对用户操作透明的地方完成相关数据清洗工作

在用户进行第一级点击的时候将清洗好的数据依次替换到对应的位置上

虽然在代码里多了函数和变量

但是换回了所见即所得的极速体验

优化思路的核心是在用户首次点击时使用新数据进行替换

处理点击动态记载对应数据

动态处理点击

寻找对应数组对象下标的工具函数

寻找数组下标

先使用只有第一层数据的假变量进行展示以及进行后台的数据清洗工作

请求方法

至此就可以使用级联选择器获得飞一般的体验而无需纠结于数据量过大的问题啦

日常求赞.jpg

求赞