隨著最近幾年來 網際網路 的迅猛發展和普及， Web 前端工程師已經成為 網際網路 時代軟體產品研發中不可缺少的一種專業的研發角色。總是會看到很多人問，我現在想學習 Web前端開發 該如何下手？學習路線是怎樣的？
一、基礎
首先前端的基礎，相信大家閉著眼睛都能知道HTML+CSS+Javascript，但是它們的輕重緩急該如何去選擇呢？檸檬認為在學習優先級上HTML > CSS > Javsscript，之所以這麼排並不是因為Javascript最不重要，而是因為HTML和CSS的學習上可以不用花太多時間，而且檸檬覺得Javascript是前端一切學習的基礎。
HTML與CSS可以在一起學習，因為HTML的標籤只有配合CSS樣式才能達成優美的頁面效果，沒有CSS的頁面只能是很多年前的門戶網站的樣子。隨著HTML5和CSS3的普及，以及瀏覽器對它們的支持，越來多的產品都選擇用HTML5開發，HTML5甚至可以直接作為一個前端開發方向。
檸檬覺得學習了HTML後，面對這樣的問題，應該不會被難到。
- cookie，localStorage，sessionStorage的區別；
- HTML5新特性canvas標籤；
- 瀏覽器緩存機制，各有什麼優缺點？
- 如何看待HTML5的一些新特性？
學習了CSS之後，面對這樣的問題，也應該不會被難到。
- 元素水平垂直居中的實現；
- 瀏覽器的幾種盒模型；
- 行內元素與塊級元素；
- 元素相對定位與絕對定位；
- 偽元素:before與::before差別以及用途；
學習了Javascript後，面對這樣的問題，應該不會被難到。
- 常見的閉包問題，比如for循環內部執行輸出函數；
- this關鍵字輸出問題；
- 常用的事件類型；
- ajax建立過程，常用的狀態碼；
- Javascript內存回收機制；
二、框架
說到框架學習，如果說JS框架的話，相信很多人一定會脫口而出jQuery，這是很多當初進入前端開發領域一定會學習的內容，我也不例外。但是現在檸檬卻並不會推薦把很多的時間放在學習jQuery上，因為如果你深入學習之後會發現，對於jQuery的使用已經變少了。下面檸檬細細來說。
針對HTML布局上，當然Bootstrap是不能少的，我們不用把每個類都研究的很透徹，但是對於常用的class一定要熟練使用。
針對字體圖標庫上，推薦使用font-awaresome，還有某寶圖標庫iconfont，都包含了非常實用的圖標。其實重點想說的是對於前端MVVM框架的學習，相信很多人都知道就是AngularJS，Vue，React。
那麼針對這些新興的框架，我們該如何學習呢？
首先有一點，ES6是一定要去學習的，在Vue2.X，AngularJS2，React中都對ES6提供了原生的支持，以後很多新的特性肯定也會使用ES6的語法去編寫。
AngularJS
AngularJS在由AngularJS1升級到AngularJS2以後，完全是一個新的東西，原來在AngularJS1中的controller，service，filter等內容在AngularJS2中都變成一個個的module，component。所以如果還沒學過AngularJS部分內容的同學可以直接選擇學習AngularJS2。但是需要注意的是AngularJS2是以Typescript語言編寫的，所以對Typescript的學習就必不可少了。
Vue
檸檬認為Vue學習是相對來說成本比較低的框架，目前官方文檔已經很詳細，關於Vue全家桶的內容像Vue-resource，Vue-router，Vuex等越來越完善，而且在Github上開源是項目也有很多，可以很容易掌握。
React
React採用了Virtual DOM這一個很獨特的概念，提高了頁面渲染的效率。但是也是由於Virtual DOM的存在，在編程方式上，React和Vue,AngularJS稍有不同，如果習慣了Vue開發，可能還不太習慣React的開發。
在針對框架層面，在學習之後，應該能回答下面這些問題。
- AngularJS和Vue的雙向數據綁定的實現；
- Vuex工作機制；
- React的Virtual DOM基本實現，如何自己實現一個Virtual DOM；
三、算法模塊化&組件化
前端開發已經從原來的整體化開發發展到現在的模塊化開發，甚至是組件化開發，開發過程愈發精細，講求的是代碼的可復用性。以前一個頁面從上到下一次編寫的過程，現在已經發展為先將頁面進行拆分成模塊甚至是組件，不同的人關注不同的模塊，組件，提高開發效率。在模塊化開發中，不得不提到CommonJS，AMD和CMD規範，並且有不同的實現，比如RequireJS。對於模塊化編程的規範已經有很多的文章有講到，可以認真去學習下。
四、構建工具
前端開發是離不開構建工具的，自己寫的代碼如何打包壓縮，ES6的代碼如何編譯成JS，Sass，less代碼如何編譯成原生CSS，這些都是構建工具去完成的。有了構建工具，可以極大的提高我們的開發速度，這裡不得不提到的就是gulp+Webpack。
gulp是一種任務驅動型的構建工具，通過管道處理數據流，提高了數據處理速度，而且其提供的一系列插件也很方便使用。
而Webpack的作用就是把所有瀏覽器端需要發布的靜態資源做相應的準備，比如資源的解析、合併和打包，它提供了強大的加載器和插件機制，例如vue-loader提供了對vue的支持，babel-loader提供了對ES6的支持。其他的構架工具還有工程化構建的Yeoman，Slush，FIS等。
在學習了常用的構建工具後，應該可以回答出下面的問題。
- Gulp和Webpack的不同；
- Webpack打包速度比較慢，可能原因是什麼？有沒有什麼解決辦法？
五、全棧
Web前端開發到最後就是要走全棧開發的道路了，全棧開發以NodeJS作為服務端語言，基於NodeJS實現的服務端框架有Express，KOA，目前也發展的越來越成熟。既然講到全棧開發，肯定會通過服務端語言操縱資料庫，因此對於資料庫的知識也肯定要掌握的。
給自己半年的時間去盡心盡力的學習Web前端開發，按照上面的學習路線，一步一步來，紮實掌握Web前端發技術才是找到高薪工作的重要法寶！