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

light 發布于2019-08-01 17:16 / 1101人閱讀

摘要：原組件并沒有這個卡頓問題，那么問題只可能是在限定圖片類型這點上了。先貼上我的代碼于是我決定先去掉試試果然就沒有了卡頓的問題。但是如果用像是這樣的呢，就不行了，就有可能變得卡卡的。

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

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

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

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

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

先貼上我的代碼

 this._imgFile = c}
    onChange={this.handleChange.bind(this)}
    type="file" name="image" disabled={disabled}
/>

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

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

修改后的代碼

 this._imgFile = c}
    onChange={this.handleChange.bind(this)}
    type="file" name="image" disabled={disabled}
    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/*"這樣的呢，就不行了，就有可能變得卡卡的。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51062.html

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

摘要：原組件并沒有這個卡頓問題，那么問題只可能是在限定圖片類型這點上了。先貼上我的代碼于是我決定先去掉試試果然就沒有了卡頓的問題。但是如果用像是這樣的呢，就不行了，就有可能變得卡卡的。昨天臨下班測試給我問我為什么圖片上傳插件打開文件夾的速度這么慢，讓我想辦法優化一下然后我就努力的搞了起來_(:з」∠)_ 由于我們內部系統不兼容ie，所以我就沒有管ie，在瀏覽器里面玩了起來經過測試發現，在...

dailybird 2019-08-20 18:23 評論0 收藏0
WEB之常見工作問題總結（1-20）

摘要：第三種，使用格式，即在中請求參數處理跨域問題當然請求方式只能是。最后發現有網友說版本不穩定引起的，于是把百度地圖回退到了，結果還真是可以了。請問在移動端頁面中播放優酷里面的視頻，怎樣實現 1.web掃碼登錄怎么實現，思路步驟 WEB平臺手機第1步生成二維碼第2步（ajax監控后臺）掃碼第3步 ...

genedna 2019-08-22 13:40 評論0 收藏0
2017-07-29 前端日報

摘要：前端日報精選譯如何只用制作一個炫酷的加載動畫不止穩，而且快解決打開時慢卡頓問題如何在你的項目中集成譯一份關于的新手指南中文譯數據結構樹瘋狂的技術宅種改善性能的方法詳解及應用場景愛前端的數學寶寶構建一個簡單登錄注冊功能個人文章 2017-07-29 前端日報精選【譯】如何只用CSS制作一個炫酷的加載動畫TypeScript - 不止穩，而且快解決input[type=file]打開時...

GHOST_349178 2019-08-20 18:23 評論0 收藏0
【回顧九月份第二周】前端你該知道的事兒

摘要：順便一說，這首歌的原唱是秋田，中島當年嗓子壞了，才有這歌。中文是直接翻譯來的，作曲是秋田。一部電影春夏秋冬又一春春夏秋冬又一春是由金基德執導，金英民吳英秀金基德主演的一部韓國電影。年月日于韓國上映。原鏈接： http://bluezhan.me/weekly/#/9-2 1、web前端 Angular vs. React vs. Vue: A 2017 comparison 9 S...

sixgo 2019-08-21 16:50 評論0 收藏0