问题描述
- 前段时间仓库反映扫描识别慢,应要求去仓库出差排查问题,首先仓库的电脑配置较低,而且最近加了一个扫描二维码的功能(大概有接近200个字符写入),整体扫描时间(输入框写入字符+接口返回)返回结果一共用了2800ms左右。
- 问题1:接口返回数据慢(后续已解决,接口那边大概从原来的500ms响应优化到100ms左右)
问题2:扫描器扫描完后字符写入输入框速度缓慢(通过keydown那里用console.time来检测出前端输入框写入大概2200ms左右)
问题解决方案的摸索
1.使用 函数防抖 指令(对change事件数据频繁更新做优化) [×]
2.去掉el-input的v-model.trim(以为.trim操作符去掉前后空格的性能问题,tips:建议去掉,因为扫描枪扫描出现空格时偶尔会出现写入字符缺失问题) [×]
3.直接在el-input的v-model上加上 .lazy 操作符(让v-model双向数据绑定更新频率降低 ) [×]
4.原有的通过 keydown 绑定的事件改为 keyup (扫描器输入字符keydown事件执行性能问题,采用keyup事件减少事件的执行) [×]
5.使用原生input输入框,配合v-model.lazy