解決input[type=file]打開時慢、卡頓問題


昨天臨下班測試給我問我為什么圖片上傳插件打開文件夾的速度這么慢,讓我想辦法優化一下
然后我就努力的搞了起來_(:з」∠)_

由於我們內部系統不兼容ie,所以我就沒有管ie,在瀏覽器里面玩了起來

經過測試發現,在mac里面safari、Firefox、Chrome(opera不知道為啥老閃退)都沒有卡頓問題

在windows里面,Firefox不卡頓,只有Chrome卡頓。

然而,這個插件是從另一個項目里面借用過來,再加上了限定圖片類型的功能而已。
原組件並沒有這個卡頓問題,那么問題只可能是在限定圖片類型這點上了。

先貼上我的代碼

<input accpet="image/*"  type="file" name="image" />

於是我決定先去掉accpet試試……
果然就沒有了卡頓的問題。
那么本包在試試accpet="image/jpg"果然也不卡卡的了!!
看來問題的所在就是"image/*"

但是寫accpet的原意是要想要篩選出所有圖片_(:з」∠)_
那么為了實現這個需求,同時提高用戶體驗,只能采取枚舉了

修改后的代碼

<input type="file" name="image" 
    accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"
/>

再試試,果然妥妥的了!

但是到底是為什么會這么卡呢??我查了查萬能的Stack Overflow→_→

原來是因為Chrome的SafeBrowsing功能會在上傳或保存時檢查文件,
如果網絡連接到google的速度比較快呢,就沒有什么問題。
但是如果連接比較慢,或者干脆跪掉了,那SafeBrowsing就會讓Chrome掛起一段時間,直到文件檢查結束或者超時

使用accept="image/png, image/jpeg, image/gif"就可以解決這個問題,因為這些MIME類型在SafeBrowsing的白名單里面,不需要檢查。
但是如果用像是accept="image/*"這樣的呢,就不行了,就有可能變得卡卡的。

 

經實測 , Chrome Canary 60 中已經修復此問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM