Web前端學習路漫漫，說說我對前端學習的一些理解
前言
最近總是會看到後很多人會問，我現在想學習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上開源是項目也有很多，可以很容易掌握。感興趣的可以關注下我自己用Vue開發的一個簡書網站，下面是Github地址。
https://github.com/zhouxiongking/vue2.0-vuex2.0-demo-jianshu
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
gulp是一種任務驅動型的構建工具，通過管道處理數據流，提高了數據處理速度，而且其提供的一系列插件也很方便使用。
Webpack
而webpack的作用就是把所有瀏覽器端需要發佈的靜態資源做相應的準備，比如資源的解析、合併和打包，它提供了強大的加載器和插件機制，例如vue-loader提供了對vue的支持，babel-loader提供了對ES6的支持。
其他的構架工具還有工程化構建的Yeoman，Slush，FIS等。
在學習了常用的構建工具後，應該可以回答出下面的問題。
Gulp和Webpack的不同
Webpack打包速度比較慢，可能原因是什麼？有沒有什麼解決辦法？
全棧
前端開發到最後就是要走全棧開發的道路了，全棧開發以NodeJS作為服務端語言，基於NodeJS實現的服務端框架有Express，KOA，目前也發展的越來越成熟。
既然講到全棧開發，肯定會通過服務端語言操縱數據庫，因此對於數據庫的知識也肯定要掌握的。
總結
今天這篇文章主要通過自己對於前端學習的一些看法，可能有些片面，希望能給你帶來幫助。