資訊專欄INFORMATION COLUMN
摘要：圖片文件大小減小后，上傳速度自然會提升，在同樣的并發(fā)下，后臺處理的速度也會得到提升，用戶體驗(yàn)得到提升。
這是一個很簡單的方案。嗯，是真的。
為什么要這么做？在移動Web蓬勃發(fā)展的今天，有太多太多的應(yīng)用需要讓用戶在移動Web上傳圖片文件了，正因如此，我們有些困難必須去攻克：
低網(wǎng)速下上傳進(jìn)度緩慢，用戶體驗(yàn)差
高并發(fā)下，后臺處理較大的上傳文件壓力大
或許有更多...
在攻克上面的一些困難時，我們也可以給自己一些疑問：
真的有必要保存用戶上傳的原圖嗎？
用戶還能等多久？
或許還有更多...
結(jié)合上面的一些困難和疑問，再結(jié)合我們實(shí)際的案例，我們或許可以這樣做 —— 在用戶上傳圖片時，圖片被提交到后臺之前，就對圖片進(jìn)行壓縮處理。圖片文件大小減小后，上傳速度自然會提升，在同樣的并發(fā)下，后臺處理的速度也會得到提升，用戶體驗(yàn)得到提升。
有童鞋可能會說，為什么不使用一些主流CDN的表單功能，直接把文件上傳到CDN去？當(dāng)然，完全可以選擇那種方案，我只是在眾多的方案中選擇了一個來用而已，又或者說這是程序員的天性？
準(zhǔn)備上面已經(jīng)說了 “在用戶上傳圖片時，圖片被提交到后臺之前，就對圖片進(jìn)行壓縮處理?！?，那我們馬上準(zhǔn)備下各種工具吧：
localResizeIMG（核心，用于在前端對圖片進(jìn)行壓縮）
Vue.js（處理前端的數(shù)據(jù)，展現(xiàn)邏輯）
Bootstrap（還要我多說？）
怎么做？上傳項(xiàng)目變更后，使用localResizeIMG進(jìn)行壓縮
把數(shù)據(jù)通過自己期望的方式提交到后臺
localResizeIMG在調(diào)用時，就可以指定壓縮后圖片的寬度高度以及質(zhì)量（詳細(xì)參考文檔），至于要怎么把數(shù)據(jù)提交到后臺，可以參考該庫的wiki中提到的方案，一切都很簡單。
演示地址
這個例子的倉庫地址
本文的解決方法并不是唯一，也不一定是最好，在使用相關(guān)的框架/庫時遇到的問題，可以去相應(yīng)的Github倉庫查看issue或者wiki。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80743.html
摘要：工程實(shí)踐立足實(shí)踐，提示實(shí)際水平內(nèi)聯(lián)函數(shù)與性能很多關(guān)于性能優(yōu)化的文章都會談及內(nèi)聯(lián)函數(shù)，其也是常見的被詬病為拖慢性能表現(xiàn)的元兇之一不過本文卻是打破砂鍋問到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會拖慢性能，過度的性能優(yōu)化反而會有損于應(yīng)用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...
摘要：哈哈主要還是我嫌麻煩四上傳圖片這里的頁面樣式，圖片壓縮和預(yù)覽都和上面一樣，這里我主要配置一下的，讓接口能夠成功上傳。如果想讓用戶有更好的體驗(yàn)，可以對圖片進(jìn)行一下壓縮和本地預(yù)覽。 一、通過Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過表單自有屬性進(jìn)行提交，看似簡單，但是也有其最大的缺點(diǎn)，那就是提交...
摘要：哈哈主要還是我嫌麻煩四上傳圖片這里的頁面樣式，圖片壓縮和預(yù)覽都和上面一樣，這里我主要配置一下的，讓接口能夠成功上傳。如果想讓用戶有更好的體驗(yàn)，可以對圖片進(jìn)行一下壓縮和本地預(yù)覽。 一、通過Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過表單自有屬性進(jìn)行提交，看似簡單，但是也有其最大的缺點(diǎn)，那就是提交...
摘要：但是還是會阻塞事件，所以會可能在觸發(fā)前或后執(zhí)行，但是一定會在事件前觸發(fā)。當(dāng)監(jiān)聽到該圖片元素進(jìn)入可視窗口時，即將自定義屬性中的地址存儲到屬性中，達(dá)到懶加載的效果。當(dāng)代碼執(zhí)行，線程被凍結(jié)。所以的性能讓變慢。 概括 涉及到的分類 網(wǎng)絡(luò)層面 構(gòu)建層面 瀏覽器渲染層面 服務(wù)端層面 涉及到的功能點(diǎn) 資源的合并與壓縮 圖片編解碼原理和類型選擇 瀏覽器渲染機(jī)制 懶加載預(yù)加載 瀏覽器存儲 緩存機(jī)制...
閱讀 3547·2021-11-17 17:01
閱讀 3952·2021-11-08 13:12
閱讀 2509·2021-10-08 10:04
閱讀 735·2021-09-29 09:35
閱讀 1450·2021-09-26 10:12
閱讀 2116·2021-09-07 09:58
閱讀 1985·2019-08-30 15:55
閱讀 2166·2019-08-30 13:14
