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