Web前端開發(fā)好不好學(xué)？

前端的圖片優(yōu)化的6種方案

1、使用base64編碼代替圖片

場景：適用于圖片大小小于2KB，頁面上引用圖片總數(shù)不多的情況 原理：將圖片轉(zhuǎn)換為base64編碼字符串inline到頁面或css中 優(yōu)勢：減少http的請求次數(shù)，并可以放到后臺數(shù)據(jù)庫中，只傳輸字符串，有較多的構(gòu)建工具可以直接實(shí)現(xiàn)劣勢：這種方法僅限于圖片總數(shù)較少，而且圖片大小小于2KB的情況。否則圖片字符串會(huì)變得很長很長

2、合并圖片sprite(雪碧圖)

場景：任何用到頁面圖片的場景 原理：將多個(gè)頁面上用到的背景圖片合并成一個(gè)大的圖片在頁面中引用 優(yōu)勢：可以有效的較少請求個(gè)數(shù)，而且，而不影響開發(fā)體驗(yàn)，使用構(gòu)建插件可以做到對開發(fā)者透明。適用于頁面圖片多且豐富的場景。劣勢：生成的圖片體積較大，減少請求個(gè)數(shù)同時(shí)也增加了圖片大小，不合理拆分將不利于并行加載

3、使用css、svg、canvas或iconfont代替圖片

css代替圖片

場景：適用于移動(dòng)端或較高級的瀏覽器，而且繪制的圖案較為簡單。 原理：css方式可以用來繪制相對簡單的團(tuán)來代替圖片，一般使用before或者after偽元素來豐富圖案的復(fù)雜度。 優(yōu)勢：具有實(shí)現(xiàn)簡單，圖片體積小的特點(diǎn)，可以實(shí)現(xiàn)簡單的動(dòng)態(tài)效果劣勢：也受限于css的兼容性特點(diǎn)，繪制復(fù)雜圖案困難svg的描述和適用場景上文已說明。

canvas代替圖片

場景：需要高性能的圖片或動(dòng)畫 原理：適用html5的canvas元素繪制創(chuàng)建圖片優(yōu)勢：整個(gè)就是畫2D圖形時(shí)，頁面渲染性能比較高，頁面渲染性能受圖形復(fù)雜度影響小，性能只受圖形的分辨率的影響，畫出來的圖形可以直接保存為 .png 或者.jpg的圖形，適合于畫光柵圖像或者不規(guī)則圖形 劣勢：沒有dom操作，必須依賴定時(shí)器，文字渲染性能差，不能添加描述(title屬性什么的)，兼容性限制

iconfont是一種web字體來代替圖片的解決方案

場景：代替頁面上色彩單一的圖片

優(yōu)勢：兼容性好，應(yīng)用廣，目前使用也很廣泛

劣勢：但是由于字體的顏色設(shè)置單一，只能用于代替顏色單一的圖片，對于色彩復(fù)雜的圖片，iconfont處理起來比較困難

4、響應(yīng)式圖片

場景：不同終端對同一個(gè)圖片需求不一樣，可以根據(jù)終端加載不同的圖片來節(jié)省沒必要的流量 原理：通過picture元素，picturefill或平臺判斷來為不同終端平臺輸出不同的圖片 優(yōu)勢：減少?zèng)]必