解決inputtype＝file打開時慢、卡頓問題

昨天臨下班測試給我問我為什麼圖片上傳插件打開文件夾的速度這麼慢，讓我想辦法優化一下

然後我就努力的搞了起來_(:з」∠)_

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

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

在windows裡面，Firefox不卡頓，只有Chrome卡頓。

然而，這個插件是從另一個項目裡面借用過來，再加上了限定圖片類型的功能而已。

原組件並沒有這個卡頓問題，那麼問題只可能是在限定圖片類型這點上了。

先貼上我的代碼

於是我決定先去掉accpet試試……

果然就沒有了卡頓的問題。

那麼本包在試試accpet=」image/jpg」果然也不卡卡的了！！

看來問題的所在就是」image/*」

但是寫accpet的原意是要想要篩選出所有圖片_(:з」∠)_

那麼為了實現這個需求，同時提高用戶體驗，只能採取枚舉了

修改後的代碼

再試試，果然妥妥的了！

但是到底是為什麼會這麼卡呢？？我查了查萬能的Stack Overflow_

原來是因為Chrome的SafeBrowsing功能會在上傳或保存時檢查文件，

如果網路連接到google的速度比較快呢，就沒有什麼問題。

但是如果連接比較慢，或者乾脆跪掉了，那SafeBrowsing就會讓Chrome掛起一段時間，直到文件檢查結束或者超時

使用就可以解決這個問題，因為這些MIME類型在SafeBrowsing的白名單裡面，不需要檢查。

但是如果用像是這樣的呢，就不行了，就有可能變得卡卡的。

作者：魔力叉燒包

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！