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