zoukankan      html  css  js  c++  java
  • 使用扫描枪扫描条码时字符识别写入缓慢问题(针对element-ui的el-input)优化

    前段时间仓库反映扫描识别慢,应要求去仓库出差排查问题,首先仓库的电脑配置较低,而且最近加了一个扫描二维码的功能(大概有接近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,还有使用keyup事件(从2200ms优化到600ms左右) [✔]

    问题解析
    看过element-ui的el-input源码内部得知,v-model数据更新时用watch来做的,在电脑配置较好以及一次写入字符数量不大的情况下(可以用扫描枪扫描条码二维码写入模拟)性能感觉差距不大,而且.lazy操作符不生效;所以最终采用了原生input来处理,而且使用keyup事件也是因为keydown事件在扫描枪扫描写入情况下触发较多。

    代码分享
    <input type="text" placeholder="包裹条码" v-model.lazy="barCode" @keyup.native.enter="search" />
    ————————————————
    版权声明:本文为CSDN博主「涳涳嘚慌」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/oschina_41767564/java/article/details/104105804

  • 相关阅读:
    log4j 配置文件
    log4j安装与简介
    tomcat服务
    查看系统网络连接打开端口、系统进程、DOS打开文件
    find查找指定类型文件并删除
    git/github在windows上使用
    VIM配置自动提示功能
    VIM Taglist安装配置和使用
    python Scipy积分运算大全(integrate模块——一重、二重及三重积分)
    python matplotlib绘图大全(散点图、柱状图、饼图、极坐标图、热量图、三维图以及热图)
  • 原文地址:https://www.cnblogs.com/turnip/p/13291851.html
Copyright © 2011-2022 走看看