昨天臨下班測試給我問我為什麼圖片上傳外掛開啟資料夾的速度這麼慢，讓我想辦法優化一下 ,然後我就努力的搞了起來_(:з」∠)_

由於我們內部系統不相容ie，所以我就沒有管ie，在瀏覽器裡面玩了起來，經過測試發現，在mac裡面safari、Firefox、Chrome(opera不知道為啥老閃退)都沒有卡頓問題

在windows裡面，Firefox不卡頓，只有Chrome卡頓。然而，這個外掛是從另一個專案裡面借用過來，再加上了限定圖片型別的功能而已。 原元件並沒有這個卡頓問題，那麼問題只可能是在限定圖片型別這點上了。

先貼上我的程式碼

<input
accpet="image/*"
style={inputStyle}
ref={c=>this._imgFile=c}
onChange={this.handleChange.bind(this)}
type="file"name="image"disabled={disabled}
/>
 

電腦刺繡繡花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com

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

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

修改後的程式碼

<input
style={inputStyle}
ref={c=>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/*" 這樣的呢，就不行了，就有可能變得卡卡的。