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

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

因爲咱們內部系統不兼容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}
/>

因而我決定先去掉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/*"這樣的呢，就不行了，就有可能變得卡卡的。