小鹿利用這幾天的碎片化時間，給在座的各位“女朋友”整理了一份適合大部分開發者的前端自學開發路線。

無論你是非科班還是在校的大專生，或者是其他領域的開發者，希望這份開發路線可以更好的幫助你去建立起前端的開發知識體系。

這篇文章，我會通過自己的前端從零自學經歷，把前端的每個學習階段應該學習哪些內容，以及各個階段最低要求掌握的什麼程度，整個知識體系如何迴圈漸進的學習和攻破有層次的分享給大家夥兒～

一、入門階段

入門階段主要學習的內容是 HTML 和 CSS。

對於一個初學者，剛接觸到前端首先應該建立起對前端的一個淺層次的認知，知道前端用來幹什麼的。當然是網頁，最好的方式就是通過 HTML 和 CSS 搭建起你的第一個頁面，也是為了能夠更好的建立起你對前端學習的信心和興趣。

HTML的學習依次如下：

HTML 的編輯器，市面上有很多，比如 VSCode、Hbuilder、SublimeText3、Atom等，反正有很多，可以選一個自己喜歡的。

然後學習 HTML 最基本的元素、屬性、頭部、表格、列表、連結、影象、表單、段落、標題等。有精力的同學，可以再去學習一下 HTML5 中的一些基礎知識，比如語義化的標籤等。

對以上基礎內容有了大體的瞭解之後，開始學習 CSS，從 CSS 的語法開始入手，以及盒子模型、選擇器、浮動、定位、字型、文字、基本屬性、各種佈局。

推薦網站：菜鳥教程、極客學院、慕課網等。

以上這些是相對於非常基礎的內容，主要目的是讓你建立起對前端學習的熱情和信心的以及對前端網頁有個大體的認識和了解。

有能力的同學可以學習思維導圖中 CSS 部分的內容。這部分是我在大大小小的面試中總結出頻率最高的知識點。

對於 HTML 和 CSS 學到什麼程度才算合格，比如給你一個網站，你能快速的仿寫出一摸一樣的佈局和排版。

小鹿給大家準備了十個實戰專案，在小鹿的公眾號後臺回覆：「實戰一」～「實戰十」。

如果這十個實戰專案能夠完全做出來，那麼恭喜你，從小白到前端入門了。

書籍推薦：《CSS世界》《CSS揭祕》《Head First HTML與CSS(第2版)》《CSS 權威指南(第三版)》

二、進階階段

進階階段，開始攻 JS，對於剛接觸 JS 的初學者，確實比學習 HTML 和 CSS 有難度，但是隻要肯下功夫，這部分對於你來說，也不是什麼大問題。

JS 內容涉及到的知識點較多，看到網上有很多人建議你從頭到尾抱著那本《JavaScript高階程式設計》學，小鹿是不建議的，畢竟剛接觸 JS 誰能看得下去，當時我也不能，也沒那樣做。

這部分的學習技巧是，增加次數，減少單次看的內容。就是說，第一遍學習 JS 走馬觀花的看，看個大概，去找視訊以及網站學習，不建議直接看書。因為看書看不下去的時候很打擊你學下去的信心。

然後通過一些網站的小例子，開始動手敲程式碼，一定要去實踐、實踐、實踐，這一遍是為了更好的去熟悉 JS 的語法。別隻顧著來回的看知識點，眼高手低可不是個好習慣，我在這吃過虧，你懂的。

1、JavaScript 和 ES6

在這個過程你會發現，有很多 JS 知識點你並不能更好的理解為什麼這麼設計，以及這樣設計的好處是什麼，這就逼著讓你去學習這單個知識點的來龍去脈，去哪學？第一，書籍，我知道你不喜歡看，那我只好給你準備好了。

我把 JS 中的每個重要基礎知識點的來龍去脈，都整理好了，寫成了一本小冊子，可以在小鹿公眾號後臺回覆「前端」免費獲取。偷偷告訴你，這也是將來你參加各種大小廠經常面試的知識點，這也是我參加很多面試總結整理出來的。

其實 JS 學習這些還遠遠不夠的，要想真的把 JS 學精，終究還是逃不過紅寶石《JavaScript高階程式設計》，每看一遍，相信你都有不同的收穫。

書籍推薦：《JavaScript高階程式設計》《你不知道的JavaScript》《JavaScript DOM程式設計藝術(第2版)》《高效能JavaScript》

接下來開始搞 ES6 吧，ES6 推薦阮一峰老師寫的教程，寫的很詳細了。對於 ES6 的一些常用面試知識點，我也給大夥兒整理好了，都在我寫的**《前端面試小冊》**中。

書籍推薦：《ES6 標準入門（第3版）》《深入理解 ES6》

2、資料結構與演算法

聽到很多人說，前端不用學演算法，學了也沒用，你可千萬別聽，到了面試上就吃虧，演算法真的有時候就決定了你能否進入一家好公司。

學習資料結構和演算法真的很痛苦，但這也是以後面試的絆腳石，誰能夠經歷住這段痛苦，誰就能享受到別人不能享受的待遇。

對於資料結構如何學習，下面這篇文章，分享我的學習方式。

傳送門：我是如何學習資料結構與演算法的？

對於演算法的刷題，小鹿是分類刷題，首先現將《劍指 offer》上的經典題型，好像每一道都是經典題型，都要弄的明明白白才可以。

然後在 leetcode 上分類刷題，比如先刷二叉樹的內容，通過刷題，總結出這些題型的套路和門道。以及一道題有多種解法，每個解法的時間和空間複雜度又是多少，這些都是要通過大量刷題來訓練的，沒啥特別好的技巧，就是刷！刷！刷！當時我刷了大約有 200 多道吧，對於很多演算法大佬來說，真的不算多，但是幸運的是，面試會遇到很多的原題。

3、網路原理

對於網路原理，不僅面試常問，而且日常開發中，也會用到，比如效能優化、代理、快取、加密演算法等等。

這部分內容如果想系統的掌握起來確實不容易，以上這些知識點還遠遠不夠，還有很長一段路要走，對於面試，掌握以上這些，感覺問題不大，當然，掌握的越多當然越好了。

4、瀏覽器

作為一個前端，你會經常和瀏覽器打交道的，就算你假裝不認識它，它也會每天來找你，所以勸你最好理解瀏覽器的實現原理。

既然說到瀏覽器，Google V8 引擎的實現原理也去學習學習吧，相信你會有很大的收穫，這部分思維導圖和學習路線正在整理中，整理好之後會陸陸續續在公眾號分享出來。

瀏覽器裡邊的坑也不少，也夠你折騰一陣子了，最近我也一直在和瀏覽器打交道，深深的體會到瀏覽器帶來的威力。

5、前端框架

前端框架太多了，真的學不動了，別慌，其實對於前端的三大馬車，Angular、React、Vue 只要把其中一種框架學明白，底層原理實現，其他兩個學起來不會很吃力，這也取決於你以後就職的公司要求你會哪一個框架了，當然，會的越多越好，但是往往每個人的時間是有限的，對於自學的學生，或者即將面試找工作的人，當然要選擇一門框架深挖原理。

以 Vue 為例，我整理了如下知識體系。

對於框架的使用看視訊也好還是看官方文件也好，最主要的是以上 Vue 的實現原理方面，需要系統的去了解和探究一下，會讓你對整個框架的實現有更深刻的理解和認識。

6、webpack

對於打包工具，我主要將 Webpack 的知識體系整理了一番。

我們最終目的就是把專案的包打到體積最小，以及構建速度達到最快。對於打包工具，沒有太多要強調的，原理性的內容也給大家都整理好了，文末獲取就可以。

三、高階進階

當你工作之後，你發現大部分的問題是程式碼架構和維護以及擴充套件性的問題，才知道設計模式的重要性。

之所以我把它歸結為高階進階，真的能將設計模式運用靈活多變，真的需要大量的專案實踐和思考總結。

其次，還有一些編譯原理等比較偏向底層的東西，我沒過多的接觸，就不在這廢話多說了，等以後涉及到，再和大家分享吧。

最後

好了，這就是整理的前端從入門到放棄的學習體系，還有很多沒有整理到，小鹿也算是邊學邊去整理，後續還會慢慢完善，這些相信夠你學一陣子了，哈哈哈。

以上知識體系中，很多知識點都在歷史文章中更新過，可以通過選單欄檢視。

文章中設計到的思維導圖和《前端小冊子》都可以在小鹿的公眾號「小鹿動畫學程式設計」後臺回覆「PDF」「思維導圖」獲取文章中的圖片和小冊子。

拒絕做白嫖黨，歡迎點贊！！我們下期再見！

我是小鹿，一個三本混出來的程式設計師，維護著一個既有技術又有溫度的原創號，一直認為能把複雜的東西講明白是一件很牛逼的事情。