前言

最近總是會看到後很多人會問，我現在想學習Web前端開發，該如何下手，學習路線是怎樣的？今天這篇文章，我來說說我自己對前端學習的理解，並結合一些面試中會常問到的問題來談談，如何才能在前端坑中，爬的遊刃有餘？www.nainaitea.com

Web前端

基礎

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

在這裡我還是要推薦下我自己建的web前端開發學習群：617327703，群裡都是學web前端開發的，如果你正在學習前端 ，小編歡迎你加入，今天分享的這個案例已經上傳到群檔案，大家都是軟體開發黨，不定期分享乾貨（只有前端軟體開發相關的），包括我自己整理的一份2018最新的前端進階資料和高階開發教程，歡迎進階中和進想深入前端的小夥伴。

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開發的一個簡書網站。

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

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

總結

今天這篇文章主要通過自己對於前端學習的一些看法，可能有些片面，希望能給你帶來幫助。 ---------------------  作者：qq_41726885  來源：CSDN  原文：https://blog.csdn.net/qq_41726885/article/details/79433346  版權宣告：本文為博主原創文章，轉載請附上博文連結！