給女朋友寫了一份前端學(xué)習(xí)路線。

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

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

這篇文章，我會通過自己的前端從零自學(xué)經(jīng)歷，把前端的每個學(xué)習(xí)階段應(yīng)該學(xué)習(xí)哪些內(nèi)容，以及各個階段最低要求掌握的什么程度，整個知識體系如何循環(huán)漸進的學(xué)習(xí)和攻破有層次的分享給大家伙兒～

入門階段主要學(xué)習(xí)的內(nèi)容是 HTML 和 CSS。

對于一個初學(xué)者，剛接觸到前端首先應(yīng)該建立起對前端的一個淺層次的認(rèn)知，知道前端用來干什么的。當(dāng)然是網(wǎng)頁，最好的方式就是通過 HTML 和 CSS 搭建起你的第一個頁面，也是為了能夠更好的建立起你對前端學(xué)習(xí)的信心和興趣。

HTML的學(xué)習(xí)依次如下：

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

然后學(xué)習(xí) HTML 最基本的元素、屬性、頭部、表格、列表、鏈接、圖像、表單、段落、標(biāo)題等。有精力的同學(xué)，可以再去學(xué)習(xí)一下 HTML5 中的一些基礎(chǔ)知識，比如語義化的標(biāo)簽等。

對以上基礎(chǔ)內(nèi)容有了大體的了解之后，開始學(xué)習(xí) CSS，從 CSS 的語法開始入手，以及盒子模型、選擇器、浮動、定位、字體、文本、基本屬性、各種布局。

推薦網(wǎng)站：菜鳥教程、極客學(xué)院、慕課網(wǎng)等。

以上這些是相對于非常基礎(chǔ)的內(nèi)容，主要目的是讓你建立起對前端學(xué)習(xí)的熱情和信心的以及對前端網(wǎng)頁有個大體的認(rèn)識和了解。

有能力的同學(xué)可以學(xué)習(xí)思維導(dǎo)圖中 CSS 部分的內(nèi)容。這部分是我在大大小小的面試中總結(jié)出頻率最高的知識點。

對于 HTML 和 CSS 學(xué)到什么程度才算合格，比如給你一個網(wǎng)站，你能快速的仿寫出一摸一樣的布局和排版。

小鹿給大家準(zhǔn)備了十個實戰(zhàn)項目，在小鹿的公眾號后臺回復(fù)：「實戰(zhàn)一」～「實戰(zhàn)十」。

如果這十個實戰(zhàn)項目能夠完全做出來，那么恭喜你，從小白到前端入門了。

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

進階階段，開始攻 JS，對于剛接觸 JS 的初學(xué)者，確實比學(xué)習(xí) HTML 和 CSS 有難度，但是只要肯下功夫，這部分對于你來說，也不是什么大問題。

JS 內(nèi)容涉及到的知識點較多，看到網(wǎng)上有很多人建議你從頭到尾抱著那本《JavaScript高級程序設(shè)計》學(xué)，小鹿是不建議的，畢竟剛接觸 JS 誰能看得下去，當(dāng)時我也不能，也沒那樣做。

這部分的學(xué)習(xí)技巧是，增加次數(shù)，減少單次看的內(nèi)容。就是說，第一遍學(xué)習(xí) JS 走馬觀花的看，看個大概，去找視頻以及網(wǎng)站學(xué)習(xí)，不建議直接看書。因為看書看不下去的時候很打擊你學(xué)下去的信心。

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

在這個過程你會發(fā)現(xiàn)，有很多 JS 知識點你并不能更好的理解為什么這么設(shè)計，以及這樣設(shè)計的好處是什么，這就逼著讓你去學(xué)習(xí)這單個知識點的來龍去脈，去哪學(xué)？第一，書籍，我知道你不喜歡看，那我只好給你準(zhǔn)備好了。

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

其實 JS 學(xué)習(xí)這些還遠遠不夠的，要想真的把 JS 學(xué)精，終究還是逃不過紅寶石《JavaScript高級程序設(shè)計》，每看一遍，相信你都有不同的收獲。

書籍推薦：《JavaScript高級程序設(shè)計》《你不知道的JavaScript》《JavaScript DOM編程藝術(shù)(第2版)》《高性能JavaScript》

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

書籍推薦：《ES6 標(biāo)準(zhǔn)入門（第3版）》《深入理解 ES6》

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

學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)和算法真的很痛苦，但這也是以后面試的絆腳石，誰能夠經(jīng)歷住這段痛苦，誰就能享受到別人不能享受的待遇。

對于數(shù)據(jù)結(jié)構(gòu)如何學(xué)習(xí)，下面這篇文章，分享我的學(xué)習(xí)方式。

我是如何學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法的？

對于算法的刷題，小鹿是分類刷題，首先現(xiàn)將《劍指 offer》上的經(jīng)典題型，好像每一道都是經(jīng)典題型，都要弄的明明白白才可以。

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

對于網(wǎng)絡(luò)原理，不僅面試常問，而且日常開發(fā)中，也會用到，比如性能優(yōu)化、代理、緩存、加密算法等等。

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

既然說到瀏覽器，Google V8 引擎的實現(xiàn)原理也去學(xué)習(xí)學(xué)習(xí)吧，相信你會有很大的收獲，這部分思維導(dǎo)圖和學(xué)習(xí)路線正在整理中，整理好之后會陸陸續(xù)續(xù)在公眾號分享出來。

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

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

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

對于框架的使用看視頻也好還是看官方文檔也好，最主要的是以上 Vue 的實現(xiàn)原理方面，需要系統(tǒng)的去了解和探究一下，會讓你對整個框架的實現(xiàn)有更深刻的理解和認(rèn)識。

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

我們最終目的就是把項目的包打到體積最小，以及構(gòu)建速度達到最快。對于打包工具，沒有太多要強調(diào)的，原理性的內(nèi)容也給大家都整理好了，文末獲取就可以。

當(dāng)你工作之后，你發(fā)現(xiàn)大部分的問題是代碼架構(gòu)和維護以及擴展性的問題，才知道設(shè)計模式的重要性。

之所以我把它歸結(jié)為高級進階，真的能將設(shè)計模式運用靈活多變，真的需要大量的項目實踐和思考總結(jié)。

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

最后

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

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

文章中設(shè)計到的思維導(dǎo)圖和《前端小冊子》都可以在小鹿的公眾號「小鹿動畫學(xué)編程」后臺回復(fù)「PDF」「思維導(dǎo)圖」獲取文章中的圖片和小冊子。