前端的圖片優化的6種方案

1、使用base64編碼代替圖片

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

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

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

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

css代替圖片

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

canvas代替圖片

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

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

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

優勢：兼容性好，應用廣，目前使用也很廣泛

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

4、響應式圖片

場景：不同終端對同一個圖片需求不一樣，可以根據終端加載不同的圖片來節省沒必要的流量 原理：通過picture元素，picturefill或平臺判斷來為不同終端平臺輸出不同的圖片 優勢：減少沒必

現在的Web前端開發不得不說是火透了整個互聯網，Web前端、微信、小程序似乎已經是不得不談的未來趨勢。市場火證明未來缺口大，不少人認為學習Web前端開發，高薪指日可待。

第一：基礎的重要性

無論做什么都一定要有扎實的基礎，只有基礎牢固，才能更深入的學習新技能。Web前端開發的入門門檻其實很低的，與其他語言先慢后快的學習節奏相比，他是一個先快后慢的過程。所以在前期的學習過程中，你會很容易的掌握其基礎的技能。而隨著Web前端技術的廣泛應用，學習也會變得更加簡單。

第二：細節的重要性

有句俗語是這樣說的：“細節決定成敗”，很多Web前端開發者在工作過程中為了追求速度，而忽略了一些細節性的東西。比如：給代碼加備注，代碼的命名規范，代碼的簡潔等。所有的這些看似不重要，其實卻嚴重影響了項目的進度以及自身能力的提升。在開發過程中，適當的添加備注，能夠加深對技術點的印象，也便于以后在修改的過程中迅速查找;規范的代碼命名能夠方便團隊之間的溝通，提高工作效率;而簡潔的代碼能夠直觀的展現某一塊代碼的作用。

第三：網站布局的重要性

做網站的目的除了向大眾群體直觀的展現公司的形象以外，更重要的還是便于SEO優化，為了提升網站在百度搜索引擎中的排名，以獲取更多的瀏覽量。因為網站沒有排名，不能讓更多的人了解到公司，盈利從何談起呢?

第四：學習的重要性

優秀的Web前端開發工程師之所以優秀，不是因為工作的年限有多久，而是具備快速學習的能力。Web前端開發是一個特殊的工作，涵蓋的知識面非常廣，而且互聯網行業技術的更新速度是非常快的，如果沒有快速學習的能力，就很難跟上時代的步伐。所以，作為Web前端開發工程師一定要不斷的學習，提升技能。

如果你想快速的掌握Web前端技術，想要了解這方面的學習內容，可以報班專業學習，建議你實地考察一下，先了解具體情況后，再做要不要學習的決定。

Web前端開發工程師已經成為了很多年輕人心中的理想工作，不僅入行門檻低、而且薪資待遇和發展前景都不錯，自然吸引了大批人加入行業。那么，怎么樣學習才能成為一名合格的web前端開發工程師呢？相信很多初學者都會有這個疑問，下面，就帶大家來看看吧！

零基礎能入門web前端嗎?

新人想要學WEB前端技術，最為關心的是成為WEB前端工程師要多久，學習web前端路線是怎樣的。如果你真想知道學web前端技術的時間是多長，那么就得了解它究竟要學什么東西。

web前端開發技術的入門門檻其實并不算高，服務器端語言的學習特點是先慢后快，而前端開發的學習曲線則是反過來的，前期學習速度很快非常容易上手。前端工程師，也叫Web前端開發工程師。它是隨著web發展，細分出來的行業。

學習web前端要掌握哪些內容？

Web前端開發技術主要學習的內容有三方面：HTML、CSS和JavaScript。近些年前端領域發展迅速，技術更新迭代也很快，這就要求web前端人員除了要掌握必備的知識之外，還需要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。

如何成為優秀的web前端開發工程師？

不管是web前端技術還是其他IT技術也好，其實都是從零基礎開始的，你可以直接學習或者是通過相近經歷轉行。所以新人不需要因零基礎而擔心自己學不會。想要成為合格的WEB前端工程師，其實也不是很難的事情，主要是要選擇科學的學習方式。

優秀的Web前端開發工程師應該具備快速學習能力。如果沒有快速學習能力，就跟不上Web發展的步伐。不斷提升自己，不斷學習新技術、新模式。對于新手來說，新技術就是新技術：對于一個高手來說，新技術不過是舊技術的延伸。因此，不斷學習，才是重中之重!

而零基礎學習者想要快速學習web前端，參加學習班是最行之有效的方法。