pc 前端下拉列表检索慢问题记录

桌面端下拉列表检索慢问题记录

背景

前后端分离；前端缓存部分基础数据；其中某项基础数据量几万的样子。

问题描述

• 该项基础数据的下拉组件在录入关键字时引起界面卡顿，假死。
• 加载有相关下拉组件的界面时，界面加载时长久。

现象分析

• 少量数据同下拉组件没有该类情况；猜想该数据量导致卡顿。
• 卡顿集中在录入关键字，查看组件加了编辑事件，事件中执行检索，每录入一个字符即触发一次检索；检索频次不合理；每次加载数据都是全量加载。
• 界面加载时长久猜想是数据量大加载慢导致。

验证

下拉组件有两步操作比较重要，从缓存检索数据，加载数据到列表；

• 首先修正检索频次，录入关键字完毕后执行一次检索。录入过程中的卡顿消失。
• 经过上面的修改，发现第一次检索还是比较久，后面检索趋于正常。验证分析发现是初始加载了全量数据，下拉列表第一次显示时会加载并显示全部数据，然后才进行检索，再把检索数据替换显示到列表中。于是修改下拉列表初始不进行加载，检索显示速度正常。
• 设置了初始不加载数据后，发现界面加载时长久的现象并没有得到明显改善。再次排查发现时间久与下拉组件加载数据无关。

持续改善

几万的数据量并不大，桌面应用自定义组件不合理导致性能极差。反过来讲，应该输入少量数据给组件，前端注定了一次可见的数据量并不会太多，应该合理的展示数据。下拉组件，也应该以分页的方式处理数据。