[[412838]]

假如你沒(méi)有明確的目標(biāo)，或許可以按照我說(shuō)的學(xué)習(xí)路線(xiàn)來(lái)學(xué)習(xí)一波，我寫(xiě)的每一份學(xué)習(xí)路線(xiàn)，不會(huì)很全面，因?yàn)槲艺J(rèn)為，東西列的太多，反而不利于新手的學(xué)習(xí)，所以我列舉的，都是比較必要的知識(shí)，當(dāng)你把這些知識(shí)學(xué)了的時(shí)候，我相信你不需要?jiǎng)e人的學(xué)習(xí)路線(xiàn)，也能知道自己接下來(lái)需要學(xué)啥了。

一、入門(mén)前端三劍客

前端和后端相比，需要學(xué)習(xí)的知識(shí)還是要少很多，如果你要入門(mén)后端，你可以要學(xué)習(xí)一大堆只是，但是你入門(mén)前端，只要把 HTML + CSS + JavaScript 這三門(mén)知識(shí)學(xué)習(xí)了，就基本差不多入門(mén)前端了，并且可以利用這三門(mén)知識(shí)，寫(xiě)出很多漂亮的交互頁(yè)面，下面講一講這三門(mén)知識(shí)的學(xué)習(xí)。

1、HTML

html 學(xué)起來(lái)還是挺簡(jiǎn)單的，無(wú)論你是否有編程基礎(chǔ)，我覺(jué)得都可以快速入門(mén)，對(duì)于新手，我推薦找個(gè)入門(mén)的視頻看一下，然后跟著視頻打代碼就可以了，入門(mén)教程隨便在慕課網(wǎng)啥找個(gè)免費(fèi)的視頻就可以了，隨便搜索「html入門(mén)」即可，或者看菜鳥(niǎo)教程的一個(gè)入門(mén)教程也行.

看完視頻，也可以看一下文字版的教程，不知道大家有沒(méi)有看過(guò)阮一峰寫(xiě)過(guò)的教程，我覺(jué)得他寫(xiě)的教程都很棒，所以這里我也推薦下大家看一下阮一峰寫(xiě)的這份 HTML 入門(mén)教程，可能可以讓你理解的更加透徹： https://wangdoc.com/html/

大家切勿眼高手低，一定要跟著視頻或者書(shū)籍上的案例打代碼，寫(xiě)代碼的編輯器，我推薦 VS-Code，反正選一款你喜歡的編輯器就行，現(xiàn)在這些編輯器都有很多插件，像 VS-Code 這些編輯器，用好一款就可以寫(xiě)各種語(yǔ)言的代碼了。

2、CSS

沒(méi)啥好說(shuō)的，和 HTML 相輔相成，你在學(xué)習(xí) HTML 的過(guò)程中，其實(shí)也一直都在接觸 CSS，所以你學(xué)了 HTML 之后，感覺(jué)幾個(gè)小時(shí)就可以學(xué)完 CSS 了，還是一樣，推薦找個(gè)視頻快速入門(mén)，不多說(shuō)。

html 是一門(mén)標(biāo)簽語(yǔ)言，里面有各種各樣的標(biāo)簽，很多初學(xué)者學(xué)了之后可能就把這些標(biāo)簽忘了， 有人可能會(huì)問(wèn)，老是忘了怎么辦？

忘了就忘了，沒(méi)事的，不需要強(qiáng)行記住這些標(biāo)簽，你需要的是：腦子里有個(gè)印象，當(dāng)你這實(shí)現(xiàn)某個(gè)功能的時(shí)候，你知道 HTML 有某個(gè)標(biāo)簽可以實(shí)現(xiàn)這樣的功能就可以了，然后翻開(kāi)對(duì)應(yīng)的教程，你能夠根據(jù)教程使用這個(gè)標(biāo)簽即可。

用的次數(shù)多了，也就記住了，所以學(xué)完 HTML 和 CSS，一定要多多實(shí)踐，隨便打開(kāi)一個(gè)網(wǎng)頁(yè)，對(duì)著葫蘆畫(huà)瓢，自己寫(xiě)一個(gè)和它類(lèi)似的就可以了。

3、JavaScript

比起 HTML 和 CSS，JavaScript 會(huì)難一些，不過(guò)如果你有其他編程語(yǔ)言基礎(chǔ)，例如學(xué)過(guò) C 語(yǔ)言，Python 或者 Java 啥的，那學(xué)期 JavaScript 也是分分鐘的事。

前面的 HTML 和 CSS，我的推薦大家找個(gè)視頻快速入門(mén)即可，但是對(duì)于 JavaScript，假如你時(shí)間不是很緊，那么我推薦你用書(shū)籍系統(tǒng)學(xué)一下，有些知識(shí)，趁著有時(shí)間，一定要系統(tǒng)學(xué)，這樣可以打下很深的底子，如果你覺(jué)得難的話(huà)，也可以先用視頻快速入門(mén)，之后再回過(guò)頭來(lái)鉆研書(shū)籍，系統(tǒng)過(guò)一遍，通過(guò)系統(tǒng)學(xué)習(xí)，你會(huì)明白很多原理，學(xué)到很多設(shè)計(jì)思想，我看過(guò)一本《JavaScript 高級(jí)程序設(shè)計(jì)》，感覺(jué)還好，就推薦這一本吧。

學(xué)了 JavaScript 之后，可以學(xué)一學(xué) ES6，面試貌似也經(jīng)常會(huì)問(wèn)到，可以看一看阮一峰寫(xiě)的一份入門(mén)教程： https://wangdoc.com/es6/

二、框架

目前前端用的比較多的主要有 Vue 和 React ,在學(xué)習(xí)框架之前，一定要先用 HTML + CSS + JavaScript 這些做一些項(xiàng)目，因?yàn)檫@些框架的底層實(shí)現(xiàn)，其實(shí)就是 JavaScript 實(shí)現(xiàn)的，然而，居然還有人知道如何使用 Vue，但沒(méi)學(xué)過(guò) JavaScript，這顯然不合適，只有你體驗(yàn)過(guò) HTML + CSS + JavaScript ，你才能更好著明白 Vue 和 React 的好處。

不過(guò)對(duì)于初學(xué)者，可以先學(xué)習(xí) Vue，Vue 可能更好入門(mén)一些，之前實(shí)習(xí)的時(shí)候，被迫學(xué)習(xí)了幾天的 vue，我是在慕課網(wǎng)先快速入門(mén)看的，學(xué)起來(lái)不難，就是細(xì)節(jié)容易忘，入門(mén)課程直達(dá)： https://www.imooc.com/coursescore/980

或者百度云我也搞好了一份，vue入門(mén)+實(shí)戰(zhàn)： Vue 入門(mén)教程

不過(guò)你看了課程之后，你去做項(xiàng)目的話(huà)，其實(shí)還是會(huì)遇到好多問(wèn)題的，特別是在網(wǎng)絡(luò)請(qǐng)求那塊，在解決問(wèn)題的過(guò)程中，你就能更加理解一些原理了。

學(xué)到什么程度？

對(duì)于初學(xué)者，我的一半建議就是，跟著一份教程，過(guò)一遍，然后做對(duì)應(yīng)的項(xiàng)目即可，之后遇到啥，就去搜索啥，不用糾結(jié)這個(gè)學(xué)到什么程度。

Vue 和 React 隨便選一個(gè)重點(diǎn)學(xué)習(xí)即可，我推薦 vue，不過(guò)學(xué)了 Vue 之后，有時(shí)間的話(huà)，我建議可以了解下 React，快入通過(guò)視頻了解，感覺(jué)幾個(gè)小時(shí)或者一兩天就夠了。

三、數(shù)據(jù)結(jié)構(gòu)

無(wú)論你是走什么崗位，數(shù)據(jù)結(jié)構(gòu)都是必須學(xué)習(xí)的一門(mén)課程，從面試的角度來(lái)講，面試基本比問(wèn)，特別是校招；從個(gè)人的提升上來(lái)看，學(xué)好數(shù)據(jù)結(jié)構(gòu)與算法，可以讓你走的更遠(yuǎn)。

但是，數(shù)據(jù)結(jié)構(gòu)與算法這玩意，可深可淺，不過(guò)我覺(jué)得至少得掌握如下基礎(chǔ)知識(shí)：

1、時(shí)間復(fù)雜度、空間復(fù)雜度

2、鏈表、隊(duì)列、棧

3、樹(shù)：初級(jí)：二叉樹(shù)，查找二叉樹(shù)，進(jìn)階：AVL樹(shù)，紅黑樹(shù)等，至少掌握初級(jí)吧。

4、圖（圖有好多種算法，深度/廣度搜索，最短路徑、最小生存樹(shù)等），對(duì)于圖，其實(shí)無(wú)論是面試還是工作，都挺少用到，學(xué)起來(lái)也有一定難度，假如你時(shí)間不多，我覺(jué)得可以先不學(xué)。

不過(guò)如果你是科班的，那么這些我覺(jué)得你大一第二學(xué)期把這些都學(xué)完是最好的了，沒(méi)學(xué)完也問(wèn)題不大，有些人可能是先教《離散數(shù)學(xué)》這本課，為數(shù)據(jù)結(jié)構(gòu)與算法做鋪墊。

書(shū)籍推薦：你學(xué)過(guò) JavaScript，所以可以用 Javascript 來(lái)寫(xiě)這些數(shù)據(jù)結(jié)構(gòu)，至于書(shū)籍，其實(shí)我也不知道推薦啥，網(wǎng)上根據(jù)目錄找一本：

把基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)學(xué)了之后，我覺(jué)得你要保持刷題，這個(gè)還是挺重要的，例如可以每天保持刷一兩道，剛開(kāi)始刷會(huì)挺吃力，但后面熟練了，就會(huì)快很多，不過(guò)很多人在吃力的那會(huì)，就放棄了，所以也就有了人與人之間的差距。

我覺(jué)得至少把《劍指 offer》刷完吧，刷完之后，可以去把 leetcode 中 top 100 的熱門(mén)題做了。

當(dāng)然，如果你想更加系統(tǒng)著學(xué)習(xí)算法，可以看我之前寫(xiě)的算法學(xué)習(xí)路線(xiàn)： 談一談算法學(xué)習(xí)之路

另外就是強(qiáng)烈推薦這份 GitHub 80+K 的刷題筆記：

兩個(gè)月斬獲 70k star，前字節(jié)大神刷題筆記

四、計(jì)算機(jī)網(wǎng)絡(luò)

無(wú)論是前端開(kāi)發(fā)還是后端開(kāi)發(fā)，說(shuō)到底都是數(shù)據(jù)通過(guò)網(wǎng)絡(luò)在多臺(tái)主機(jī)之間的交互，而且對(duì)于前端，計(jì)算機(jī)網(wǎng)絡(luò)的知識(shí)，用的可能比后端還多，特別是 HTTP 這塊，所以呢，計(jì)算機(jī)網(wǎng)絡(luò)必須好好學(xué)，而且還得重點(diǎn)學(xué)。

入門(mén)我推薦《圖解 HTTP》，不過(guò)看完這本我覺(jué)得還不夠，可以看《計(jì)算機(jī)網(wǎng)絡(luò)：自頂向下》這本書(shū)，多看兩遍，以后面試就可以和面試桿上了。

一邊看一邊犯困怎么辦？

我的建議是，硬著頭皮死磕一邊，因?yàn)楦鶕?jù)讀者的反饋，確實(shí)有挺多人跟我說(shuō)這玩意看著好困，不過(guò)我當(dāng)時(shí)學(xué)習(xí)的時(shí)候，看著好帶勁，就是了解了很多原因，很爽，然而事實(shí)是，有些人，看著卻是一種煎熬，，，，學(xué)計(jì)算機(jī)網(wǎng)絡(luò)，就一條主線(xiàn)：理解一臺(tái)計(jì)算機(jī)是如何找到另外一臺(tái)計(jì)算機(jī)，并且把數(shù)據(jù)交付給他的，或者你可以看我這篇科普文章： 一文讀懂一臺(tái)計(jì)算機(jī)是如何把數(shù)據(jù)發(fā)送給另一臺(tái)計(jì)算機(jī)的

書(shū)籍都整理好了： 少走彎路，必讀計(jì)算機(jī)經(jīng)典書(shū)籍推薦（含下載方式）

我也寫(xiě)過(guò)一份計(jì)算機(jī)網(wǎng)絡(luò)的入門(mén)教程：

0. 計(jì)算機(jī)網(wǎng)絡(luò)入門(mén)簡(jiǎn)介

1. 計(jì)算機(jī)網(wǎng)絡(luò)五層模型入門(mén)

2. 通信雙方如何保證消息不丟失？

3. 集線(xiàn)器、交換機(jī)與路由器有什么區(qū)別？

4. 什么是 TCP 擁塞控制？

5. 什么是 TCP 流量控制

6. 什么是 TCP 三次握手？

7. 什么是 TCP 四次揮手？

8. 什么是 HTTP？

9. 什么是 HTTPS？

10. 什么是 SSL/TLS 協(xié)議？

11. 什么是 DNS？

12. 什么是 DHCP ？

13. 什么是廣播路由算法？

14. 什么是數(shù)字簽名？

15. 什么是 SQL 注入攻擊？

16. 什么是 XSS 攻擊？

五、瀏覽器工作原理

學(xué)前端，基本天天和瀏覽器打交道，因?yàn)榫W(wǎng)頁(yè)上的各種界面，都是由瀏覽器來(lái)渲染的，所以還是非常有必要學(xué)習(xí)一下瀏覽器相關(guān)的知識(shí)。

如果你在瀏覽器按 F12，會(huì)出現(xiàn)一個(gè)「調(diào)試」的界面

里面有很多東西，例如各種網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)，各種腳本數(shù)據(jù)，感興趣的話(huà)，可以去研究研究。

那么具體要學(xué)習(xí)哪些呢？

我覺(jué)得至少得了解一下本地 cookie ，localStorage，SessionStorage 存儲(chǔ)吧，還有就是，如何查看一個(gè) http 的請(qǐng)求狀態(tài)，瀏覽器關(guān)閉后會(huì)做哪些處理之類(lèi)的。

總的來(lái)說(shuō)，就是，從我們發(fā)起一個(gè) http 請(qǐng)求，到頁(yè)面展示如初，瀏覽器都經(jīng)歷了哪些邏輯處理？

六、進(jìn)階

學(xué)完了上面這些，可以學(xué)一些幫助我們更好著構(gòu)建一個(gè)前端項(xiàng)目的工具，比較常見(jiàn)的有如下幾種：

Node.js：這個(gè)必須學(xué)，主要就是可以幫助我們很快著構(gòu)建出一個(gè) web 項(xiàng)目，一條命令就搞定了，入門(mén)可以在慕課網(wǎng)看視頻，我之前看過(guò)一個(gè)，順便推薦一下：

進(jìn)階或者更甚層次了解，一般都得看書(shū)，自己網(wǎng)上搜一本吧。

Webpack：不同瀏覽器對(duì) JavaScript 的特性支持的不一致，可以通過(guò)構(gòu)建工具把 JavaScript 代碼轉(zhuǎn)換成瀏覽器能支持的。使用構(gòu)建工具也能夠做到性能優(yōu)化，比如壓縮代碼，這個(gè) webpack 可以了解一下，在以后做項(xiàng)目的過(guò)程中，還是經(jīng)常用到 node.js 和 webpack 的，我覺(jué)得剛開(kāi)始會(huì)使用就好，后面遇到問(wèn)題了，在通過(guò)問(wèn)題驅(qū)動(dòng)的方式去深入了家。

七、學(xué)習(xí)順序問(wèn)題

這里講一下學(xué)習(xí)順序的問(wèn)題，就是說(shuō)學(xué)習(xí)了 html + css + javascript 之后，我是先學(xué)習(xí)前端的一些框架好啊，還是學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法好啊，還是學(xué)習(xí)計(jì)算機(jī)網(wǎng)絡(luò)，瀏覽器工作原理好呢？

我覺(jué)得這個(gè)和你時(shí)間有關(guān)，假如你還是大一大二的話(huà)，學(xué)校會(huì)有數(shù)據(jù)結(jié)構(gòu)，計(jì)算機(jī)網(wǎng)絡(luò)的課程，我覺(jué)得跟著學(xué)校的順序?qū)W就行，然后的話(huà)，像刷題，我覺(jué)得有些東西同時(shí)做并不會(huì)存在矛盾，例如我就建議刷題這個(gè)時(shí)期，長(zhǎng)期保持，然后一邊做其他的。

總的來(lái)說(shuō)，我覺(jué)得也可以按照我說(shuō)的這個(gè)學(xué)習(xí)順序來(lái)學(xué)，然后算法那一塊，當(dāng)你學(xué)習(xí)了 Javascript 之后，就可以穿拆整個(gè)過(guò)程了。

學(xué)完這些，都可以去面試了，當(dāng)然，也別忘了刷一刷八股文，可以看看這些PDF，跟著學(xué)： 圖解操作系統(tǒng)、網(wǎng)絡(luò)、計(jì)算機(jī)組成 PDF 下載！

最后

再次強(qiáng)調(diào)，這篇文章不是讓你成為大神的，學(xué)完也不是多厲害，而是， 給處于大學(xué)迷茫、不知道學(xué)啥的你，一個(gè)方向，無(wú)論你是否是科班 ,如標(biāo)題所說(shuō)， 普通/大眾 。不過(guò)我相信，當(dāng)你學(xué)完了這些，你應(yīng)該會(huì)有自己的學(xué)習(xí)方向了。

最后，是希望各位還在校的學(xué)生，大一可以好好浪，但也要保持應(yīng)有的學(xué)習(xí)時(shí)間，之后，就好好學(xué)習(xí)吧。不管你是名校還是非名校，我覺(jué)得你在只要這幾年認(rèn)真學(xué)，進(jìn)大公司的幾率，真的非常大，這絕對(duì)不是雞湯。

還有就是，以上說(shuō)到的書(shū)籍，都可以在這個(gè) GitHub 上無(wú)套路下載到： 編程的優(yōu)質(zhì)書(shū)籍整理