我經(jīng)常會(huì)看到很多同學(xué)在學(xué)習(xí)前端的時(shí)候比較迷茫，不知道到底應(yīng)該以怎樣的學(xué)習(xí)路線來(lái)入門和進(jìn)階前端領(lǐng)域。每次遇到這種問(wèn)題我也會(huì)分享一下自己的學(xué)習(xí)經(jīng)驗(yàn)，但是發(fā)現(xiàn)這是一個(gè)問(wèn)得非常多的一個(gè)共性問(wèn)題。

作為程序員，肯定是不能容忍重復(fù)無(wú)味的勞動(dòng)的，因此我就系統(tǒng)地總結(jié)分享一下我的前端學(xué)習(xí)路線，希望對(duì)你能夠有所幫助。

[[346922]]

前言

前端學(xué)習(xí)是一個(gè)螺旋上升的過(guò)程，既要反復(fù)地看書，也要抓緊時(shí)間進(jìn)行實(shí)戰(zhàn)。只看書，看了就會(huì)忘，所以必須將看書和寫代碼相結(jié)合。只要你認(rèn)真學(xué)，入門前端的話三個(gè)月左右就可以了。之后我還給出了前端進(jìn)階路線，幫助你提升前端技能水平。我把前端入門和前端進(jìn)階一共分為六個(gè)階段，并對(duì)相應(yīng)階段所需要的大致的學(xué)習(xí)時(shí)間進(jìn)行了標(biāo)注。

前端入門

入門前端開發(fā)主要需要學(xué)習(xí) HTML，CSS 和 JavaScript 三大件。之后學(xué)習(xí)前端主流框架的使用，并基于已學(xué)內(nèi)容開發(fā)一個(gè)小項(xiàng)目進(jìn)行實(shí)戰(zhàn)。當(dāng)你把這些學(xué)習(xí)并理解透徹以后，也就算真正地入門前端了。

階段一：HTML + CSS

前端對(duì)于入門者相當(dāng)友好，因?yàn)殚_始學(xué)習(xí)的時(shí)候你只需要一個(gè)瀏覽器，推薦 Chrome。HTML 和 CSS 可以直接運(yùn)行在瀏覽器中，瀏覽器就是它們的運(yùn)行環(huán)境。你也可以使用編輯器，推薦 VSCode，這是前端開發(fā)使用最多的編輯器。

HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其實(shí)并不是編程語(yǔ)言。HTML 中文名叫做超文本標(biāo)記語(yǔ)言，其實(shí)就是一些標(biāo)簽。CSS 中文名為層疊樣式表，也就是一些樣式的配置。

首先學(xué)習(xí) HTML，非常簡(jiǎn)單。HTML 有非常多的標(biāo)簽，剛?cè)腴T的時(shí)候不要沉浸在記住這些標(biāo)簽中，你也記不住。你只需要整體瀏覽一遍，知道有哪些標(biāo)簽，各自的作用是什么，整體有一個(gè)印象就行了。

學(xué)習(xí)css過(guò)程中千萬(wàn)不要?jiǎng)冸xHTML學(xué)習(xí)。當(dāng)你什么時(shí)候理解了html的重要性（從頁(yè)面開發(fā)角度而言，它可以視為是后續(xù)良好css和js編碼得以實(shí)施的基礎(chǔ)，相當(dāng)于程序中的數(shù)據(jù)結(jié)構(gòu)，設(shè)計(jì)好了可以讓你事半功倍），你才可以稱得上是一個(gè)合格的頁(yè)面開發(fā)對(duì)于新人，我建議除了幾個(gè)關(guān)鍵概念，如布局、盒模型、單位等等，都不應(yīng)該花大量去扣細(xì)節(jié)，甚至背書記憶，瀏覽性學(xué)習(xí)知道有這個(gè)東西就行，在實(shí)際應(yīng)用時(shí)再去加深記憶。

階段二：JavaScript

學(xué)習(xí)了 HTML 和 CSS，可以開始學(xué)習(xí) JavaScript 了。這也是至關(guān)重要的階段。JavaScript 主要包括語(yǔ)言基礎(chǔ)（ECMAScript）、DOM 和 BOM 三部分，如果你是初學(xué)者，會(huì)想這到底是啥，咋還三個(gè)東西。那就開始學(xué)起來(lái)，學(xué)完你就知道啦，其實(shí)沒(méi)那么難。

JavaScript這幾年變化很快，但是對(duì)于初學(xué)者來(lái)說(shuō)要摒棄浮躁的氣氛，靜下心來(lái)打好基礎(chǔ)。記?。鹤约菏浅鯇W(xué)者，玩的東西就是：JavaScript和jQuery，工具就用一個(gè)編輯器和一個(gè)瀏覽器，這些就夠了，別的不要碰

階段三：入門前端框架

學(xué)完前端三大件，打好了大樹的根基，就可以開始擴(kuò)展技能樹了，開始學(xué)習(xí)前端框架。前端的主流框架目前主要為 React，Vue 和 Angular。選擇哪個(gè)框架呢？你可以去知乎或者其他網(wǎng)站搜一搜，然后根據(jù)你的個(gè)人喜好進(jìn)行選擇。一般是在 React 和 Vue 中選一個(gè)。React 的開發(fā)體驗(yàn)更類似于寫原生的 JavaScript，要求你有較好的 JavaScript 基礎(chǔ)。Vue 則引入了模版，將很多實(shí)現(xiàn)封裝成了 API，你需要記住并調(diào)用 API 來(lái)進(jìn)行開發(fā)，因?yàn)楹芏喽际欠庋b好的，所以學(xué)習(xí)起來(lái)較為簡(jiǎn)單，只是編程的感覺(jué)稍微弱了一些。

這兩個(gè)都是非常優(yōu)秀的框架，新人不必糾結(jié)于選擇哪個(gè)框架，學(xué)了一個(gè)，另一個(gè)也很容易學(xué)。如果你不知道選擇哪個(gè)，我推薦你先學(xué)習(xí) React。

前端進(jìn)階

成功入門前端開發(fā)之后就要開啟進(jìn)階部分了，主要是加深對(duì)各個(gè)知識(shí)的理解程度，打牢計(jì)算機(jī)領(lǐng)域基礎(chǔ)知識(shí)，擴(kuò)展技能樹，提升項(xiàng)目開發(fā)和宏觀理解及把控能力。前端進(jìn)階是需要終生學(xué)習(xí)的，活到老學(xué)到老

階段四：語(yǔ)言基礎(chǔ)進(jìn)階

這個(gè)階段就是加深對(duì)編程語(yǔ)言的理解，多閱讀進(jìn)階書籍.

進(jìn)階必讀書籍：

《你不知道的 JavaScript 上/中/下卷》：必買書籍，將 JavaScript 的疑難問(wèn)題，細(xì)節(jié)知識(shí)一網(wǎng)打盡。原版是 GitHub 上開源的電子書，英語(yǔ)水平高的可以去讀英文原版。

《JavaScript 忍者秘籍》：深入講解 JavaScript 的核心知識(shí)點(diǎn)，必買書籍。

《了不起的 JavaScript 工程師》：從宏觀來(lái)看 JavaScript 語(yǔ)言，以及前端工程師所需要掌握的一些技能，推薦閱讀。

《JavaScript 函數(shù)式編程指南》：學(xué)習(xí)函數(shù)式編程思想

《JavaScript 函數(shù)式編程》：也是一本函數(shù)式編程思想的好書

《JavaScript 設(shè)計(jì)模式》：學(xué)習(xí) JavaScript 設(shè)計(jì)模式，推薦閱讀

《JavaScript 設(shè)計(jì)模式與開發(fā)實(shí)踐》：另一本同等分量的設(shè)計(jì)模式書籍，推薦閱讀

《鋒利的 jQuery》：jQuery 現(xiàn)在已經(jīng)很少有人用了，除非是很老的項(xiàng)目或者寫小東西。不過(guò)這本書值得買，學(xué)習(xí) jQuery 的優(yōu)秀思想，還可以去學(xué)習(xí)一下它的源碼，對(duì)你進(jìn)階很有幫助。

階段五：框架和學(xué)習(xí)邊界進(jìn)階

通過(guò)階段三，你已經(jīng)掌握了前端框架的基本使用，開發(fā)一個(gè)完整項(xiàng)目的流程。那么在框架和學(xué)習(xí)邊界進(jìn)階階段，你就可以：

學(xué)習(xí)框架周邊的生態(tài)，社區(qū)總結(jié)出來(lái)的優(yōu)秀組件，以及各種好用的工具庫(kù)。

造一些自己的輪子，使用框架搭建自己的開源項(xiàng)目

學(xué)習(xí) Webpack，Gulp，Babel，ESLint 等工具的使用、思想和原理

帶著問(wèn)題去閱讀框架源碼，學(xué)習(xí)性能優(yōu)化

養(yǎng)成良好的編程習(xí)慣

擴(kuò)展技術(shù)邊界，學(xué)習(xí) Node.js 等后端相關(guān)技能

……

推薦閱讀書籍：

以下推薦的書籍都是比較出名的書籍，你可以根據(jù)自己的技能樹，選擇所需要的書籍進(jìn)行閱讀。并不是一字不差地整本閱讀，而是在每本書中學(xué)習(xí)自己所需要的部分。很多都是非常著名的好書，有精力盡量買來(lái)學(xué)習(xí)。

Webpack 相關(guān)：

《深入淺出 Webpack》

《Webpack 實(shí)戰(zhàn)：入門、進(jìn)階與調(diào)優(yōu)》

React 相關(guān)：

《深入 React 技術(shù)棧》

《深入淺出 React 和 Redux》

《Redux 實(shí)戰(zhàn)》

《React 學(xué)習(xí)手冊(cè)》

《React 快速上手開發(fā)》

《React 設(shè)計(jì)模式與最佳實(shí)踐》

Vue 相關(guān)：

《Vue.js 實(shí)戰(zhàn)》

《Vue.js 開發(fā)實(shí)戰(zhàn)》

《深入淺出 Vue.js》

《Vue.js 權(quán)威指南》

《Vue.js 從入門到項(xiàng)目實(shí)戰(zhàn)》

《Vue.js 前端開發(fā)基礎(chǔ)與項(xiàng)目實(shí)戰(zhàn)》

《Vue.js 項(xiàng)目開發(fā)實(shí)戰(zhàn)》

《Vue.js 快速入門》

《Vue.js 前端開發(fā)》

Node.js 相關(guān)：

《狼書卷1》

《狼書卷2》

《Node 學(xué)習(xí)指南》

《了不起的 Node.js》

《深入淺出 Node.js》

《Node.js 實(shí)戰(zhàn)》

《Node.js 開發(fā)指南》

《Node 即學(xué)即用》

《Node 與 Express 開發(fā)》

樣式和布局相關(guān)：

《Bootstrap 實(shí)戰(zhàn)》

《Bootstrap 用戶手冊(cè)》

《響應(yīng)式 Web 設(shè)計(jì)：HTML5 與 CSS3 實(shí)戰(zhàn)》

性能相關(guān)：

《Web 性能權(quán)威指南》

《高性能網(wǎng)站建設(shè)指南》

PWA 相關(guān)：

《PWA 開發(fā)實(shí)戰(zhàn)》

《PWA 實(shí)戰(zhàn)：面向下一代的 Progressive Web APP》

其他：

《SVG 精髓》

《深入理解 SVG》

《前端架構(gòu)設(shè)計(jì)》

《重構(gòu)：改善既有代碼的設(shè)計(jì)》

《同構(gòu) JavaScript 應(yīng)用開發(fā)》

階段六：計(jì)算機(jī)基礎(chǔ)知識(shí)進(jìn)階

編程編程，萬(wàn)變不離其宗，那就是計(jì)算機(jī)基礎(chǔ)知識(shí)，算法、數(shù)據(jù)結(jié)構(gòu)、計(jì)算機(jī)原理、網(wǎng)絡(luò)等內(nèi)容。在這里我只推薦最經(jīng)典的好書，每一本都是必讀書籍。學(xué)好這些內(nèi)容，大廠任你選。

數(shù)據(jù)結(jié)構(gòu)和算法：

《劍指offer》

《程序員面試金典（第 6 版）》

《編程之美》

《漫畫算法》

《算法圖解》

《程序員代碼面試指南》

《大話數(shù)據(jù)結(jié)構(gòu)》

《趣學(xué)算法》

《學(xué)習(xí) JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法》

《數(shù)據(jù)結(jié)構(gòu)與算法：JavaScript 描述》

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

《HTTP/2 基礎(chǔ)教程》

《HTTPS 權(quán)威指南》

《計(jì)算機(jī)網(wǎng)絡(luò)：自頂向下方法》

《圖解 HTTP》

《圖解 TCP/IP》

《TCP/IP 詳解》

《UNIX 網(wǎng)絡(luò)編程》

操作系統(tǒng)：

《深入理解計(jì)算機(jī)系統(tǒng)》

《現(xiàn)代操作系統(tǒng)》

《UNIX 環(huán)境高級(jí)編程》

《The Linux Programming Interface》

總結(jié)

至此，你已經(jīng)完成了前端開發(fā)從入門到進(jìn)階，已然成為了一個(gè)巨佬，之后再學(xué)什么已經(jīng)了如指掌。希望我的分享對(duì)你有幫助，如果你覺(jué)得有用，可以收藏本文，并分享給你有需要的朋友。讓我們一起學(xué)習(xí)，共同進(jìn)步！