国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

dailybird / 2122人閱讀

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

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

由于我們內(nèi)部系統(tǒng)不兼容ie，所以我就沒有管ie，在瀏覽器里面玩了起來

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

在windows里面，F(xiàn)irefox不卡頓，只有Chrome卡頓。

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

先貼上我的代碼

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

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

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

修改后的代碼

 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→_→

原來是因?yàn)镃hrome的SafeBrowsing功能會在上傳或保存時檢查文件，
如果網(wǎng)絡(luò)連接到google的速度比較快呢，就沒有什么問題。
但是如果連接比較慢，或者干脆跪掉了，那SafeBrowsing就會讓Chrome掛起一段時間，直到文件檢查結(jié)束或者超時

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84432.html

相關(guān)文章

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

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

    light 評論0 收藏0

  • WEB之常見工作問題總結(jié)（1-20）

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

    genedna 評論0 收藏0

  • 2017-07-29 前端日報(bào)

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

    GHOST_349178 評論0 收藏0

  • 【回顧九月份第二周】 前端你該知道的事兒

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

    sixgo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<