web前端培訓需要多長時間?這個問題在不同的培訓機構可能回答的也大不相同，有的web前端培訓機構可能需要的時間比較長，有的機構培訓需要的時間去很短，那么怎么樣的培訓時間才算是比較合理的呢，這個誰也無法確定，最終還是要看學員學到多少web前端技術知識和畢業后是否能夠勝任企業相關的工作。

首先，在web前端開發學習中必須掌握以下幾點才行。

一、必須掌握基本的Web前端開發技術，其中包括：CSS3、HTML、JavaScript等，在掌握這些技術的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。

二、必須學會并且掌握運用前端開發的輔助工具，在開發中工具的應用可以大幅度增加開發效率。

三、除了學習web前端掌握其主要的知識以外，也要拓展一些前端行業相關的其它行業知識，比如設計類。

四、除了現階段學習的web前端技術還要不斷的關注新的技術，時刻掌握行業最新技術方向也是有必要的。

可見，看似簡單的網頁制作，如果要做得更好、更專業，真的是不簡單。這就是前端開發的特點，也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學習起來無從下手，對于老手來說，也時常不知道下一步該學什么。

所以建議想學習web前端開發的同學可以找專門的web培訓機構學習，自學很難達到企業招聘人才的需求，而且耗費時間和精力。還不能全面學到需要掌握的知識，尚硅谷在web培訓上有多年的經驗。而且授課講師都有著豐富的實戰經驗，學習中也會讓學員實際動手操作項目，讓學員可以快速學習及掌握，在求職中也有更大的把握和勝算。

在選專業的web前端培訓機構學習，現在大多數的學習周期在五個月左右，當然了這個也是只限于全程面授班，如果是自學的還時間就需要根據自身的因素決定了，還有一種就是線上班這樣的學習周期可能比較長一些。

前端的圖片優化的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或平臺判斷來為不同終端平臺輸出不同的圖片 優勢：減少沒必

如果要用一句話來概括的話：能直接拿來用的demo才是好demo。

所以demo得按行業按客戶類型按客戶真實需求來進行網站欄目規劃和設計，不僅僅是頁面好不好看這么簡單。

除了設計還需要包括業務需求，比如一個4s店的demo網站就應該包括在線試駕預約模塊，一個大學demo網站就應該包括院系介紹和歷屆領導介紹模塊。

總之就是要貼近客戶掌握真實需求，而不是自己坐辦公室里憑空想象這個demo應該長什么樣子。