ElementUI|ElementUI 级联选择器数据量过大时首次渲染缓慢优化思路
今天在项目中有遇到这么一个问题
服务端返回的 JSON 数据过于复杂导致客户端使用级联选择器进行渲染操作卡顿，严重影响用户体验
首先来看看引发问题的数据量级 
文章图片
数据量级
文章图片
递归清洗数据 其中传入的 arr 为需要进行处理的原始数组，该种操作具有一定的局限性，也即一定需要传入作用域内可读的变量，已保证数据的一致性 若需要对其封装成纯函数的形式需要使用传统 for 循环进行改写 到这直接赋值可见严重卡顿，表现在点击后需要等待两三秒才会出现且无法做任何加载中提示 此时注意到级联选择器提供了一个动态加载的钩子函数
文章图片
文章图片
当数据量较小时该组件非常流畅，故我们有了优化思路 在原有数据的基础上，使用新变量原数据存储，先使用第一层数据进行显示展示，在对用户操作透明的地方完成相关数据清洗工作 在用户进行第一级点击的时候将清洗好的数据依次替换到对应的位置上 虽然在代码里多了函数和变量 但是换回了所见即所得的极速体验 优化思路的核心是在用户首次点击时使用新数据进行替换 【ElementUI|ElementUI 级联选择器数据量过大时首次渲染缓慢优化思路】处理点击动态记载对应数据
文章图片
动态处理点击 寻找对应数组对象下标的工具函数
文章图片
寻找数组下标 先使用只有第一层数据的假变量进行展示以及进行后台的数据清洗工作
文章图片
请求方法 至此就可以使用级联选择器获得飞一般的体验而无需纠结于数据量过大的问题啦 日常求赞.jpg
文章图片
求赞
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- javascript|javascript 性能测试笔记
- HTML5新增选择器属性方法
- CSS笔记
- SwiftUI|SwiftUI iOS 组件之双值区间取值选择器RangeSlider支持颜色（教程含源码）
- JQuery总结（选择器归纳、DOM遍历和事件处理、DOM完全操作和动画）
- 给新手同学总结的js|给新手同学总结的js css jquery选择器
- element中popover弹框中有选择器，点击后popover消失的解决办法
- Vue引入elementui