最近總是會看到后很多人會問，我現在想學習Web前端開發，該如何下手，學習路線是怎樣的？今天這篇文章，我來說說我自己對前端學習的理解，并結合一些面試中會常問到的問題來談談，如何才能在前端坑中，爬的游刃有余？想學習前端朋友可以加我們的前端學習群：617327703

Web前端

基礎

首先前端的基礎，相信大家閉著眼睛都能知道HTML+CSS+Javascript，但是它們的輕重緩急該如何去選擇呢？我個人認為在學習優先級上HTML > CSS > Javsscript，之所以這么排并不是因為Javascript最不重要，而是因為HTML和CSS的學習上可以不用花太多時間，而且我覺得Javascript是前端一切學習的基礎。

HTML與CSS可以在一起學習，因為HTML的標簽只有配合CSS樣式才能達成優美的頁面效果，沒有CSS的頁面只能是很多年前的門戶網站的樣子。隨著HTML5和CSS3的普及，以及瀏覽器對它們的支持，越來多的產品都選擇用HTML5開發，HTML5甚至可以直接作為一個前端開發方向。想學習前端朋友可以加我們的前端學習群：617327703

我覺得學習了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的開發。

在針對框架層面，在學習之后，應該能回答下面這些問題。想學習前端朋友可以加我們的前端學習群：617327703

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，目前也發展的越來越成熟。

既然講到全棧開發，肯定會通過服務端語言操縱數據庫，因此對于數據庫的知識也肯定要掌握的。

總結

今天這篇文章主要通過自己對于前端學習的一些看法，可能有些片面，希望能給你帶來幫助。