互聯(lián)網(wǎng)時(shí)代，只要公司有開發(fā)互聯(lián)網(wǎng)產(chǎn)品的需要，包括網(wǎng)站、網(wǎng)頁、H5、小程序、App等，就一定少不了前端開發(fā)工程師崗位。如今的“大前端時(shí)代”，前端也已不限于傳統(tǒng)PC端和移動(dòng)手機(jī)端，隨著VR、可穿戴設(shè)備、車載系統(tǒng)、智能投影等設(shè)備的出現(xiàn)， Web前端直接進(jìn)入了各個(gè)垂直領(lǐng)域，前端開發(fā)將有更?闊的發(fā)展空間。【文末獲取】
那么該如何學(xué)習(xí)前端技術(shù)呢？網(wǎng)上攻略很多，本文從自學(xué)前端該閱讀什么書的角度為你解惑。首先送上前端學(xué)習(xí)閱讀路線圖：
高清大圖下載：看文末
夯實(shí)前端基礎(chǔ)
入門前端開發(fā)主要需要學(xué)習(xí) html，css 和 JAVAScript 三大件。之后學(xué)習(xí)前端主流框架（React/Vue）的使用，并基于已學(xué)內(nèi)容開發(fā)一個(gè)小項(xiàng)目進(jìn)行實(shí)戰(zhàn)。當(dāng)我們把這些學(xué)習(xí)并理解透徹以后，就算入門前端了。
階段一：HTML + CSS
前端對(duì)于入門者相當(dāng)友好，開始學(xué)習(xí)的時(shí)候只需要一個(gè)瀏覽器。HTML 和 CSS 可以直接運(yùn)行在瀏覽器中，瀏覽器就是它們的運(yùn)行環(huán)境。我們也可以使用編輯器，推薦 VSCode，這是前端開發(fā)使用最多的編輯器。
對(duì)于初學(xué)者，在這個(gè)階段最適合系統(tǒng)的去學(xué)習(xí)基礎(chǔ)知識(shí)，首先就是把前端三大件HTML+CSS+JavaScript的基礎(chǔ)教程學(xué)完。這“三大件”是每個(gè)前端人都逃不開的，下面這本書可以幫我們快速搞定HTML、CSS，以及初識(shí)JS：
《Web前端工程師修煉之道（原書第5版）》
想零基礎(chǔ)入門前端？從這本書開始吧！閱讀本書不需要任何預(yù)備知識(shí)。不需要以前制作過網(wǎng)頁，也不需要知道在哪里可以獲得代碼編輯器。本書從頭帶你學(xué)前端！是一本完整的Web 設(shè)計(jì)（網(wǎng)站的視覺設(shè)計(jì)）和開發(fā)（網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)）的“敲門磚”：包含Web開發(fā)的重要概念、基本原理，HTML、CSS和JavaScript的具體使用方法與技巧，以及Web圖像制作等。
階段二：JavaScript
前端三大件中JavaScript是重中之重。JavaScript是Web前端之本，也是進(jìn)階全棧的基石。它的知識(shí)點(diǎn)非常繁雜，是前端開發(fā)知識(shí)體系中比較難的區(qū)域。
對(duì)JavaScript理解的深度決定了未來的發(fā)展前景。這就很需要一本大而全的書來鞏固JS知識(shí)，幫我們更好的深入理解JS。那該如何全面掌握J(rèn)avaScript的知識(shí)呢！自然是繞不開前端圈公認(rèn)的兩大寶典之一的“犀牛書”。
《JavaScript權(quán)威指南 原書第7版》
犀牛書”憑著完整的內(nèi)容、細(xì)致的講解以及海量針對(duì)性的示例而受到讀者的一致好評(píng)，已經(jīng)成為JavaScript程序員心中公認(rèn)的權(quán)威指南。這本巨著主要講述的內(nèi)容涵蓋JavaScript語言本身，以及Web瀏覽器所實(shí)現(xiàn)的JavaScriptAPI。初學(xué)者讀完本書，將會(huì)對(duì)JS有全面的認(rèn)識(shí)，快速掌握J(rèn)S最核心的技術(shù)。而有經(jīng)驗(yàn)的開發(fā)者讀完本書，會(huì)讓你對(duì)JS的理解有從量變到質(zhì)變的深層次飛躍。如今，全球暢銷25年的JS犀牛書全新升級(jí)，新版涵蓋了ES2020特性，同時(shí)刪去了已過時(shí)的內(nèi)容。
值得注意的是，作者在前言中已經(jīng)明確指出了本書的適讀人群：
所以，犀牛書不是一本零基礎(chǔ)入門的書，如果閱讀犀牛書時(shí)感到吃力，又不想“從入門到放棄”那么不妨先閱讀前面那本《Web前端工程師修煉之道（原書第5版）》。
（感謝掘金原創(chuàng)作者--清秋制作導(dǎo)圖）
JavaScript的基礎(chǔ)知識(shí)點(diǎn)非常多，新版犀牛書即使瘦身后還有600頁！在入門階段，我們不需要將整本書一字不差地看完，只需要抓住幾塊核心內(nèi)容，將它們快速過一遍就行，太細(xì)節(jié)的內(nèi)容不用記，等之后工作中遇到問題了再回來查找。
PS：新版犀牛書刪去的知識(shí)點(diǎn)（如Jquery）都是已過時(shí)的內(nèi)容，可以不用學(xué)；新版犀牛書增加的內(nèi)容（如Node.js、迭代器、生成器、異步、元編程 等）則是必須掌握的。
階段三：入門前端框架
學(xué)完前端三大件，打好了大樹的根基，并不算真正入門，因?yàn)榍岸斯こ處煵荒苤豢棵刻鞂戫撁孢^日子。
我們需要開始擴(kuò)展技能樹了：學(xué)習(xí)前端框架。目前國內(nèi)企業(yè)主流的主要是兩大框架：Vue和React。這兩個(gè)框架的官方文檔上有詳細(xì)的講解。
Vue網(wǎng)址：https://cn.vuejs.org/；React網(wǎng)址：
https://react.docschina.org/。新人不必糾結(jié)于選擇哪個(gè)框架，學(xué)了一個(gè)，另一個(gè)也很容易學(xué)。看官網(wǎng)文檔太枯燥？推薦一本入門+實(shí)戰(zhàn)書籍：
《Vue.js入門與商城開發(fā)實(shí)戰(zhàn)》
本書主要面向Vue.js的初級(jí)入門者，涵蓋詳細(xì)的理論知識(shí)、布局分析和邏輯分析。并帶你完成一個(gè)小項(xiàng)目實(shí)戰(zhàn)：使用Vue.js和JavaScript的基礎(chǔ)知識(shí)構(gòu)建一個(gè)完整的Vue商城。
至此我們已經(jīng)成功入門前端開發(fā)了。以上都學(xué)差不多了，就可以找一些算法題，例如 LeetCode，找一些自己感興趣的項(xiàng)目，找一些大廠面試題，學(xué)起來做起來，不斷鞏固自己知識(shí)的掌握程度。
階段四：TypeScript
近幾年隨著TypeScript越來越熱，現(xiàn)在已是是前端工程師在進(jìn)階路上必備的技能了。在GitHub2020年度項(xiàng)目活躍度語言分布上顯示，TypeScript的排名已經(jīng)躍居第三位。隨著Vue3的發(fā)布，我們可以看到Vue、React都在朝TS靠攏，未來幾年，TS將會(huì)是前端工程師繞不開的話題，這也將會(huì)直接體現(xiàn)在企業(yè)的前端招聘需求中。
TypeScript從入門到進(jìn)階
入門：《TypeScript入門與實(shí)戰(zhàn)》適合正在考慮使用或已經(jīng)開始使用TypeScript的讀者閱讀，系統(tǒng)、全面介紹TypeScript編程語言的基礎(chǔ)知識(shí)及應(yīng)用，從基本語法到類型系統(tǒng)，從參數(shù)配置到工具集成，包含大量示例代碼。
進(jìn)階：《TypeScript項(xiàng)目開發(fā)實(shí)戰(zhàn)》是一本TS進(jìn)階實(shí)踐指南，通過9個(gè)實(shí)用項(xiàng)目，詳細(xì)講解如何使用TS和不同的JS框架開發(fā)高質(zhì)量的應(yīng)用程序。書中不僅介紹TS的核心概念與技術(shù)，還涵蓋Angular和React的一些新功能，以及GraphQL、微服務(wù)和機(jī)器學(xué)習(xí)等相關(guān)的新技術(shù)。
階段五：Webpack
從前那種直接在JS中寫腳本。通過src嵌入到頁面，然后按F5刷新頁面查看結(jié)果的開發(fā)方式已經(jīng)漸行漸遠(yuǎn)，如今選擇一款合適的編譯和資源管理工具已經(jīng)成為了所有前端工程中的標(biāo)配，而在諸多的構(gòu)建工具中，Webpack以其豐富的功能和靈活的配置占據(jù)了壟斷地位。不管使用哪種框架，都會(huì)用到它。如果是在小廠，在官網(wǎng)文檔學(xué)會(huì)使用已經(jīng)配置好的Webpack就可以應(yīng)付工作中的難題。Webpack網(wǎng)址：
https://www.webpackjs.com/
但如果目標(biāo)是進(jìn)大廠，僅僅會(huì)使用還遠(yuǎn)遠(yuǎn)不夠，還要懂得如何優(yōu)化Webpack。
《Webpack實(shí)戰(zhàn)：入門、進(jìn)階與調(diào)優(yōu)》
這是一本能指導(dǎo)讀者零基礎(chǔ)快速掌握Webpack并輕松進(jìn)階的實(shí)戰(zhàn)性著作。作者在Webpack領(lǐng)域有深厚的積累，是知名開源打包工具YKit的主導(dǎo)者和核心開發(fā)者。本書從功能特性、工作原理、應(yīng)用實(shí)踐、性能優(yōu)化4個(gè)維度對(duì)Webpack進(jìn)行了全面的講解，內(nèi)容上盡力避免了網(wǎng)絡(luò)上已經(jīng)公開發(fā)表的各種資料和文檔，而是從作者的實(shí)際經(jīng)驗(yàn)出發(fā)，將更有價(jià)值的內(nèi)容呈現(xiàn)給讀者，盡量幫助讀者少走彎路。
學(xué)習(xí)熱門技術(shù)
此時(shí)我們便可以開始觸類旁通，學(xué)習(xí)熱門技術(shù)，加強(qiáng)實(shí)踐水平。在深入學(xué)習(xí)的同時(shí)，也可以探索自己感興趣的方向，哪里不會(huì)補(bǔ)哪里，為求職面試打好基礎(chǔ)。
由于前端開發(fā)的入門門檻相對(duì)較低，與服務(wù)器端語言先慢后快的學(xué)習(xí)曲線相比，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。經(jīng)過初級(jí)接觸后，深度學(xué)習(xí)成為必然，《JavaScript權(quán)威指南》需要一直放在案頭，隨時(shí)翻閱。
1、WASM
伴隨著WebAssembly核心規(guī)范成為WorldWide Web Consortium (W3C) 的標(biāo)準(zhǔn)，繼HTML、CSS和JS之后，像C/C++、Rust、Go等語言編寫的高性能模塊也在瀏覽器上運(yùn)行。相信在不久的將來，Web應(yīng)用的桌面客戶端化，也將成為一種趨勢。
《WebAssembly原理與核心技術(shù)》
本書是WebAssembly入門和進(jìn)階的必讀書，它不僅對(duì)WebAssembly的工作原理、核心技術(shù)和規(guī)范進(jìn)行了全面的剖析和解讀，而且給出了實(shí)現(xiàn)WebAssembly解釋器和AOT編譯器的思路和代碼。
2、Electron
控制技術(shù)棧的復(fù)雜度，一直以來都是許多開發(fā)者和項(xiàng)目管理人員的追求。Electron 為我們提供了一種舒適且優(yōu)雅的方案，只需要使用熟悉的開發(fā)工具、熟悉的 Web 開發(fā)語言和框架，就可以輕松開發(fā)跨平臺(tái)桌面應(yīng)用。
《Electron實(shí)戰(zhàn)：入門、進(jìn)階與性能優(yōu)化》
以實(shí)戰(zhàn)為導(dǎo)向，講解了如何用Electron結(jié)合現(xiàn)代前端技術(shù)來開發(fā)桌面應(yīng)用。不僅全面介紹了Electron入門需要掌握的功能和原理，而且還針對(duì)Electron開發(fā)中的重點(diǎn)和難點(diǎn)進(jìn)行了重點(diǎn)講解，旨在幫助讀者實(shí)現(xiàn)快速進(jìn)階。
3、WebRTC音視頻
由于直播行業(yè)的火熱，以及疫情的影響，音視頻技術(shù)急速發(fā)展。在前端領(lǐng)域，WebRTC技術(shù)持續(xù)升溫，下面兩本書幫我們低學(xué)習(xí)門檻，快人一步掌握WebRTC技術(shù)：
《WebRTC從入門到進(jìn)階》
入門：《WebRTC技術(shù)詳解：從0到1構(gòu)建多人視頻會(huì)議系統(tǒng)》詳細(xì)講解了WebRTC規(guī)范和全部API、信令系統(tǒng)、底層技術(shù)、移動(dòng)端和服務(wù)端實(shí)現(xiàn)，總結(jié)了作者多年來的“踩坑”經(jīng)驗(yàn)，助你快速入門并實(shí)戰(zhàn)。
進(jìn)階：《WebRTC音視頻實(shí)時(shí)互動(dòng)技術(shù)：原理、實(shí)戰(zhàn)與源碼分析》深入刨析WebRTC技術(shù)原理、架構(gòu)、工作流程和源代碼，通過實(shí)例幫你深入理解WebRTC實(shí)現(xiàn)機(jī)理和應(yīng)用開發(fā)方法。
4、低代碼
前端開發(fā)工程師們對(duì)于如何提高研發(fā)效率也是各顯神通。其中通過圖形化的界面“拖拉拽”即可生成網(wǎng)頁應(yīng)用的低代碼概念更是炙手可熱。很多結(jié)構(gòu)簡單，大量重復(fù)的頁面，可以通過低代碼平臺(tái)快速搭建，大幅減少重復(fù)勞動(dòng)。
《實(shí)戰(zhàn)低代碼》
本書系統(tǒng)講解了低代碼平臺(tái)的能力、價(jià)值、應(yīng)用場景和實(shí)操方案，旨在幫助行業(yè)、企業(yè)及每一位數(shù)字公民快速理解低代碼平臺(tái)的核心價(jià)值，并實(shí)現(xiàn)數(shù)字化轉(zhuǎn)型。
計(jì)算機(jī)基礎(chǔ)知識(shí)
前端技術(shù)發(fā)展日新月異，練好“內(nèi)功”才能走的更遠(yuǎn)。想快速進(jìn)階到高級(jí)工程師、全棧工程師，對(duì)于計(jì)算機(jī)基礎(chǔ)的知識(shí)(如操作系統(tǒng)、數(shù)據(jù)結(jié)構(gòu)、算法、設(shè)計(jì)模式等）我們就要又有一定的了解。為了能更加深入的理解前端，建議從這本書開始：
《深入理解計(jì)算機(jī)系統(tǒng)》
本書是從程序員的角度來撰寫，講述應(yīng)用程序員如何利用系統(tǒng)知識(shí)來編寫出更好的程序。它告訴我們計(jì)算機(jī)是如何設(shè)計(jì)和工作的，操作系統(tǒng)有哪些重點(diǎn)，它們的作用又是什么。CSAPP的目標(biāo)其實(shí)便是要講清楚原理，但并不會(huì)把某個(gè)話題挖掘地過于深入，過于細(xì)節(jié)。看過這本書后，我們就可以對(duì)計(jì)算機(jī)系統(tǒng)各組件的工作方式有了理性的認(rèn)識(shí)。在一定程度上，其實(shí)它是在鍛煉我們的思維方式 -- 計(jì)算思維。
前端知識(shí)體系繁雜，像小程序、React.js/Vue.js、ReactNative、Flutter框架、自動(dòng)化測試、Serverless 等，都可以在實(shí)際工作中不斷學(xué)習(xí)，這里就不一一介紹了。
如果你的目標(biāo)是成為一名全棧工程師，像數(shù)據(jù)庫、linux 和 Nginx 這些知識(shí)也得掌握。 在 Node.js 出現(xiàn)之前，php 是很多前端工程師開發(fā)后端應(yīng)用的首選，相比 Java、.Net 或 Golang 等語言更容易上手。對(duì)于想成為全棧工程師的前端開發(fā)者來說，PHP 仍是一個(gè)不錯(cuò)的選擇。
《PHP和MySQL Web開發(fā)（原書第5版）》
這是一本經(jīng)典全球暢銷的軟件開發(fā)寶典，書中內(nèi)容豐富完備，用例簡單實(shí)用。既包括PHP語言的基礎(chǔ)知識(shí)和編程技巧，又包括MySQL數(shù)據(jù)庫的使用基礎(chǔ)和實(shí)戰(zhàn)沉淀。對(duì)于開發(fā)安全的、適用于全球用戶的Web應(yīng)用來說，是一本不可多得的寶典。
結(jié)語
真正拉開我們與周圍人之間差距的，是自學(xué)能力！希望看到這篇文章的朋友，都可以在前端開發(fā)學(xué)習(xí)路上找到自己的方向，越走越遠(yuǎn)，征服屬于自己的星辰大海！
