文章目錄

• • 問題描述
  • 問題解決方案的摸索
  • 問題解析
  • 代碼分享

問題描述

• 前段時間倉庫反映掃描識別慢，應要求去倉庫出差排查問題，首先倉庫的電腦配置較低，而且最近加了一個掃描二維碼的功能（大概有接近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" />

總結

以上是生活随笔為你收集整理的使用扫描枪扫描条码时字符识别写入缓慢问题（针对element-ui的el-input）优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。