圖片降級(jí)方案原來(lái)這么簡(jiǎn)單？
大廠技術(shù) 高級(jí)前端 Node進(jìn)階
點(diǎn)擊上方 程序員成長(zhǎng)指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群
在做項(xiàng)目?jī)?yōu)化的時(shí)候，發(fā)現(xiàn)頁(yè)面加載很慢。結(jié)果一看主要的問(wèn)題就是就是圖片的大小過(guò)慢，然后呢準(zhǔn)備呢去做優(yōu)化， 本來(lái)想去用webp，去優(yōu)化的，但是呢這個(gè)圖片是不是我們就用不了呢，然后看了下業(yè)界優(yōu)化王，直接打開(kāi)了淘寶網(wǎng)的首頁(yè)。淘寶的首屏加載是很快的，然后 我就去看了下他圖片的格式：
這種圖片其實(shí)是做了降級(jí)處理如果說(shuō) 支持webp就使用， 如果不支持的話就使用jpg
為什么要做圖片降級(jí)
圖片的格式有很多 jpeg png webp等,我們經(jīng)常使用webp格式的圖片,因?yàn)閣ebp格式的圖片擁有無(wú)損壓縮和有損壓縮兩種模式而且壓縮率更高等優(yōu)點(diǎn)。但是webp格式的圖片同樣也有缺點(diǎn)，ios webview和IE不支持webp。所以我們要檢測(cè)瀏覽器是否支持webp格式的圖片,如果不支持webp則展示圖片的其它格式。
降級(jí)方案
-
html 圖片懶加載
<div class="box">
<img alt="">
</div>
復(fù)制代碼
-
檢測(cè)瀏覽器是否支持該webp
function isSupportWebp(cb) {
let img = new Image();
img.src = webpPath;
img.onload = function() {
cb(true);
}
img.onerror = function() {//瀏覽器不支持該圖片格式時(shí)會(huì)觸發(fā)
cb(false);
}
}
復(fù)制代碼
-
img path 截取 圖片展示
function LoadImg() {
let img = document.getElementsByTagName('img')[0];
isSupportWebp(function(isSupport) {
if(isSupport) {
img.src = webpPath;
} else {
let index = webpPath.indexOf('_.webp');
if(index!=-1) {
webpPath = webpPath.slice(0,index);
}
img.src = webpPath;
}
});
}
復(fù)制代碼
-
完整代碼
<body>
<div class="box">
<img alt="">
</div>
<script>
let webpPath = './img/O1CN01xYaPxM1CgQAujTNvy_!!0-saturn_solar.jpg_220x220.jpg_.webp';
function isSupportWebp(cb) {
let img = new Image();
img.src = webpPath;
img.onload = function() {
cb(true);
}
img.onerror = function() {
cb(false);
}
}
function LoadImg() {
let img = document.getElementsByTagName('img')[0];
isSupportWebp(function(isSupport) {
if(isSupport) {
img.src = webpPath;
} else {
let index = webpPath.indexOf('_.webp');
if(index!=-1) {
webpPath = webpPath.slice(0,index);
}
img.src = webpPath;
}
});
}
LoadImg();
</script>
</body>
總結(jié)
前端性能優(yōu)化永遠(yuǎn)是一個(gè)永無(wú)止境的話題， 還是需要結(jié)合項(xiàng)目具體問(wèn)題具體分析。近期會(huì)寫「canvas性能優(yōu)化」、 和「從0-1開(kāi)發(fā)一款vscode 插件」。還在寫作中， 對(duì)文章有任何問(wèn)題，或者哪里不對(duì)的地方歡迎指正， 我看到了之后肯定會(huì)采納的，我們下期再見(jiàn)????哦
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
“分享、點(diǎn)贊、在看” 支持一波??