入門前端學習路線圖【送書】

大家好，我是若川。記得點上方音頻聽小姐姐配音，超級好聽。

華章圖書又贊助了書籍送福利給大家。本次送4本書的抽獎方式是：截止到9月6日（周一）20:00，在留言區留言任意內容。我會在留言區抽取「1位」關注我公眾號最久的小伙伴送1本，此外，在留言區再隨機抽取「3位」小伙伴各送1本。中獎小伙伴可以在本文提到的書籍中任選1本包郵送。

另外：最近組織了源碼共讀活動，1個月，200+人，一起讀了4周源碼，很多小伙伴都表示收獲滿滿，掃碼加我微信 ruochuan12 參加，一起學源碼（為防止中獎失聯記得加微信）。

互聯網時代，只要公司有開發互聯網產品的需要，包括網站、網頁、H5、小程序、APP等，就一定少不了前端開發工程師崗位。如今的“大前端時代”，前端也已不限于傳統PC端和移動手機端，隨著VR、可穿戴設備、車載系統、智能投影等設備的出現， Web前端直接進入了各個垂直領域，前端開發將有更?闊的發展空間。

那么該如何學習前端技術呢？網上攻略很多，本文從自學前端該閱讀什么書的角度為你解惑。首先送上前端學習閱讀路線圖：

夯實前端基礎

入門前端開發主要需要學習?HTML，CSS 和 JavaScript?三大件。之后學習前端主流框架（React/Vue）的使用，并基于已學內容開發一個小項目進行實戰。當我們把這些學習并理解透徹以后，就算入門前端了。

階段一：HTML + CSS

前端對于入門者相當友好，開始學習的時候只需要一個瀏覽器。HTML 和 CSS 可以直接運行在瀏覽器中，瀏覽器就是它們的運行環境。我們也可以使用編輯器，推薦 VSCode，這是前端開發使用最多的編輯器。

對于初學者，在這個階段最適合系統的去學習基礎知識，首先就是把前端三大件HTML+CSS+JavaScript的基礎教程學完。這“三大件”是每個前端人都逃不開的，下面這本書可以幫我們快速搞定HTML、CSS，以及初識JS：

《Web前端工程師修煉之道（原書第5版）》

想零基礎入門前端？從這本書開始吧！閱讀本書不需要任何預備知識。不需要以前制作過網頁，也不需要知道在哪里可以獲得代碼編輯器。本書從頭帶你學前端！是一本完整的Web 設計（網站的視覺設計）和開發（網站的前臺代碼實現）的“敲門磚”：包含Web開發的重要概念、基本原理，HTML、CSS和JavaScript的具體使用方法與技巧，以及Web圖像制作等。

Web前端開發敲門磚 ——《Web前端工程師修煉之道》

階段二：JavaScript

前端三大件中JavaScript是重中之重。JavaScript是Web前端之本，也是進階全棧的基石。它的知識點非常繁雜，是前端開發知識體系中比較難的區域。

對JavaScript理解的深度決定了未來的發展前景。這就很需要一本大而全的書來鞏固JS知識，幫我們更好的深入理解JS。那該如何全面掌握JavaScript的知識呢！自然是繞不開前端圈公認的兩大寶典之一的“犀牛書”。?

《JavaScript權威指南原書第7版》

犀牛書”憑著完整的內容、細致的講解以及海量針對性的示例而受到讀者的一致好評，已經成為JavaScript程序員心中公認的權威指南。這本巨著主要講述的內容涵蓋JavaScript語言本身，以及Web瀏覽器所實現的JavaScriptAPI。初學者讀完本書，將會對JS有全面的認識，快速掌握JS最核心的技術。而有經驗的開發者讀完本書，會讓你對JS的理解有從量變到質變的深層次飛躍。如今，全球暢銷25年的JS犀牛書全新升級，新版涵蓋了ES2020特性，同時刪去了已過時的內容。

大咖發聲 | 聊聊火爆前端圈的“犀牛書”

新版犀牛書該不該入手？來一次開箱評測！

值得注意的是，作者在前言中已經明確指出了本書的適讀人群：

所以，犀牛書不是一本零基礎入門的書，如果閱讀犀牛書時感到吃力，又不想“從入門到放棄”那么不妨先閱讀前面那本《Web前端工程師修煉之道（原書第5版）》。

（感謝掘金原創作者--清秋制作導圖）

JavaScript的基礎知識點非常多，新版犀牛書即使瘦身后還有600頁！在入門階段，我們不需要將整本書一字不差地看完，只需要抓住幾塊核心內容，將它們快速過一遍就行，太細節的內容不用記，等之后工作中遇到問題了再回來查找。

PS：新版犀牛書刪去的知識點（如JQuery）都是已過時的內容，可以不用學；新版犀牛書增加的內容（如Node.js、迭代器、生成器、異步、元編程等）則是必須掌握的。

階段三：入門前端框架

學完前端三大件，打好了大樹的根基，并不算真正入門，因為前端工程師不能只靠每天寫頁面過日子。

我們需要開始擴展技能樹了：學習前端框架。目前國內企業主流的主要是兩大框架：Vue和React。這兩個框架的官方文檔上有詳細的講解。

Vue網址：https://cn.vuejs.org/；React網址：https://react.docschina.org/。新人不必糾結于選擇哪個框架，學了一個，另一個也很容易學。看官網文檔太枯燥？推薦一本入門+實戰書籍：

《Vue.js入門與商城開發實戰》

本書主要面向Vue.js的初級入門者，涵蓋詳細的理論知識、布局分析和邏輯分析。并帶你完成一個小項目實戰：使用Vue.js和JavaScript的基礎知識構建一個完整的Vue商城。

VUE.js入門與商城開發實戰

至此我們已經成功入門前端開發了。以上都學差不多了，就可以找一些算法題，例如 LeetCode，找一些自己感興趣的項目，找一些大廠面試題，學起來做起來，不斷鞏固自己知識的掌握程度。

階段四：TypeScript

近幾年隨著TypeScript越來越熱，現在已是是前端工程師在進階路上必備的技能了。在GitHub2020年度項目活躍度語言分布上顯示，TypeScript的排名已經躍居第三位。隨著Vue3的發布，我們可以看到Vue、React都在朝TS靠攏，未來幾年，TS將會是前端工程師繞不開的話題，這也將會直接體現在企業的前端招聘需求中。

TypeScript從入門到進階

入門：《TypeScript入門與實戰》適合正在考慮使用或已經開始使用TypeScript的讀者閱讀，系統、全面介紹TypeScript編程語言的基礎知識及應用，從基本語法到類型系統，從參數配置到工具集成，包含大量示例代碼。

進階：《TypeScript項目開發實戰》是一本TS進階實踐指南，通過9個實用項目，詳細講解如何使用TS和不同的JS框架開發高質量的應用程序。書中不僅介紹TS的核心概念與技術，還涵蓋Angular和React的一些新功能，以及GraphQL、微服務和機器學習等相關的新技術。

階段五：Webpack

從前那種直接在JS中寫腳本。通過src嵌入到頁面，然后按F5刷新頁面查看結果的開發方式已經漸行漸遠，如今選擇一款合適的編譯和資源管理工具已經成為了所有前端工程中的標配，而在諸多的構建工具中，Webpack以其豐富的功能和靈活的配置占據了壟斷地位。不管使用哪種框架，都會用到它。如果是在小廠，在官網文檔學會使用已經配置好的Webpack就可以應付工作中的難題。Webpack網址：https://www.webpackjs.com/

但如果目標是進大廠，僅僅會使用還遠遠不夠，還要懂得如何優化Webpack。

《Webpack實戰：入門、進階與調優》

這是一本能指導讀者零基礎快速掌握Webpack并輕松進階的實戰性著作。作者在Webpack領域有深厚的積累，是知名開源打包工具YKit的主導者和核心開發者。本書從功能特性、工作原理、應用實踐、性能優化4個維度對Webpack進行了全面的講解，內容上盡力避免了網絡上已經公開發表的各種資料和文檔，而是從作者的實際經驗出發，將更有價值的內容呈現給讀者，盡量幫助讀者少走彎路。

學習熱門技術

此時我們便可以開始觸類旁通，學習熱門技術，加強實踐水平。在深入學習的同時，也可以探索自己感興趣的方向，哪里不會補哪里，為求職面試打好基礎。

由于前端開發的入門門檻相對較低，與服務器端語言先慢后快的學習曲線相比，前端開發的學習曲線是先快后慢。經過初級接觸后，深度學習成為必然，《JavaScript權威指南》需要一直放在案頭，隨時翻閱。

1、WASM

伴隨著WebAssembly核心規范成為WorldWide Web Consortium (W3C) 的標準，繼HTML、CSS和JS之后，像C/C++、Rust、Go等語言編寫的高性能模塊也在瀏覽器上運行。相信在不久的將來，Web應用的桌面客戶端化，也將成為一種趨勢。

《WebAssembly原理與核心技術》

本書是WebAssembly入門和進階的必讀書，它不僅對WebAssembly的工作原理、核心技術和規范進行了全面的剖析和解讀，而且給出了實現WebAssembly解釋器和AOT編譯器的思路和代碼。

WebAssembly及其 API 的完整介紹

2、Electron?

控制技術棧的復雜度，一直以來都是許多開發者和項目管理人員的追求。Electron 為我們提供了一種舒適且優雅的方案，只需要使用熟悉的開發工具、熟悉的 Web 開發語言和框架，就可以輕松開發跨平臺桌面應用。

《Electron實戰：入門、進階與性能優化》

以實戰為導向，講解了如何用Electron結合現代前端技術來開發桌面應用。不僅全面介紹了Electron入門需要掌握的功能和原理，而且還針對Electron開發中的重點和難點進行了重點講解，旨在幫助讀者實現快速進階。

?極客手中的利器Electron

3、WebRTC音視頻

由于直播行業的火熱，以及疫情的影響，音視頻技術急速發展。在前端領域，WebRTC技術持續升溫，下面兩本書幫我們低學習門檻，快人一步掌握WebRTC技術：

《WebRTC從入門到進階》

入門：《WebRTC技術詳解：從0到1構建多人視頻會議系統》詳細講解了WebRTC規范和全部API、信令系統、底層技術、移動端和服務端實現，總結了作者多年來的“踩坑”經驗，助你快速入門并實戰。

進階：《WebRTC音視頻實時互動技術：原理、實戰與源碼分析》深入刨析WebRTC技術原理、架構、工作流程和源代碼，通過實例幫你深入理解WebRTC實現機理和應用開發方法。

WebRTC技術詳解

WebRTC音視頻實時傳輸與服務質量

4、低代碼

前端開發工程師們對于如何提高研發效率也是各顯神通。其中通過圖形化的界面“拖拉拽”即可生成網頁應用的低代碼概念更是炙手可熱。很多結構簡單，大量重復的頁面，可以通過低代碼平臺快速搭建，大幅減少重復勞動。

《實戰低代碼》

本書系統講解了低代碼平臺的能力、價值、應用場景和實操方案，旨在幫助行業、企業及每一位數字公民快速理解低代碼平臺的核心價值，并實現數字化轉型。

數字化轉型時代！你一定要了解的低代碼

計算機基礎知識

前端技術發展日新月異，練好“內功”才能走的更遠。想快速進階到高級工程師、全棧工程師，對于計算機基礎的知識(如操作系統、數據結構、算法、設計模式等）我們就要又有一定的了解。為了能更加深入的理解前端，建議從這本書開始：

《深入理解計算機系統》

本書是從程序員的角度來撰寫，講述應用程序員如何利用系統知識來編寫出更好的程序。它告訴我們計算機是如何設計和工作的，操作系統有哪些重點，它們的作用又是什么。CSAPP的目標其實便是要講清楚原理，但并不會把某個話題挖掘地過于深入，過于細節。看過這本書后，我們就可以對計算機系統各組件的工作方式有了理性的認識。在一定程度上，其實它是在鍛煉我們的思維方式 -- 計算思維。

《深入理解計算機系統》漫游指南

前端知識體系繁雜，像小程序、React.js/Vue.js、ReactNative、Flutter框架、自動化測試、Serverless 等，都可以在實際工作中不斷學習；自從Node.js 出來之后，成為全棧工程師的學習難度也降低了不少，我們可以不用再另外學習新的編程語言來開發后端應用了，像數據庫、Linux 和 Nginx 這些服務端知識在這里就不一一介紹了。

結語

真正拉開我們與周圍人之間差距的，是自學能力！希望看到這篇文章的朋友，都可以在前端開發學習路上找到自己的方向，越走越遠，征服屬于自己的星辰大海！