29天吐血整理前端學習路線，送給那些正在自學或準備自學前端的人！

阿新 • • 發佈：2020-11-18

前言

最近這段時間經常有朋友問我前端技術現在如此繁雜，我到底應該如何學習。這個話題太大了，幾句話回答不好；也由於這個問題確實困擾了很多前端開發人員，所以我也就著手系統的輸出這篇文章。

雖然這篇文章花了很長時間，肯定也有其侷限性；希望各位不吝指出。

入題

我們儼然能感受到前端崗位現在已經發展成了最重要的研發崗位之一，所以對我們提出的要求也就越來越高。所以我們需要學的也就不僅僅只是CSS & HTML & JavaScript了。但這三大件一直都是前端的根本，這一點從未改變。而這三大件中JavaScript又是重中之重。

接下來我會結合我的一點經驗，給出前端學習路線的一些具體建議。

三大件學習

現在每年依舊有很多初級入門的前端開發。所以對初入門的朋友也給出一點意見。

剛入門的朋友，我覺得不應該一開始就學習像Vue、TypeScript、Webpack等知識。應該把重點放在CSS & HTML & JavaScript基礎知識的學習上。

CSS & HTML

對於剛入門的朋友我依舊建議先將CSS(3) & HTML(5)的知識點認真學習一邊。學習的途中最好是學習完一部分就自己在敲一遍程式碼，加深自己的記憶。

當然如果你願意，建議你可以先仿一個網站的靜態頁面（掘金、知乎等都可以），有一些屬性就可以瞭解他實際的實現場景。

當然剛開始敲程式碼的時候還是不要過分依賴自動補全功能，一開始就使用自動補全對你記憶一些屬性時沒有幫助的；踏實點學習，日後會有回報的。

關於 CSS(3) 你需要了解的一些知識點

盒模型（標準 & IE ）
flex、float、Normal Flow 等的理解
CSS 常用選擇器
行內、內部、外部樣式的區別
CSS 層疊規則
BFC 與 IFC 的瞭解
CSS3 的 transform、transition、animation 等屬性的運用瞭解
響應式佈局的理解
……

CSS 說容易也容易，說複雜也複雜；因為 CSS 總是能給你意外的驚喜。

HTML(5) 你需要了解的一些知識點

說到 HTML 我想有很多人是div一把梭。因為div用的爽，不用擔心預設樣式。

有人說 HTML 語義化的優點很多，比如清晰的頁面結構、有利於 SEO、便於團隊開發和維護；這些我都承認，不過我還是喜歡div一把梭。

HTML 語義化( 不是很理解為什麼面試總會問 )
canvas
本地儲存（ localStorage、sessionStorage、cookie 的理解）
video 和 audio 的使用
應用快取( cache manifest )
……

JavaScript

JavaScript一直都是我們前端的基石，一定程度上JavaScript的理解深度決定了你的發展。所以一定要用心學習。

現在很多人一看到閉包、原型鏈、作用域鏈、繼承之類的文章都是直接跳過，你現在可以自問一下你的確理解這些基礎的知識點嗎？

JavaScript的基礎知識點確實很多，所以《JavaScript 高階程式設計》寫了 700 多頁；不過當你 JS 基礎紮實後，你會發現你在學習框架、亦或是學習框架原始碼的時候會輕鬆許多。

JavaScript（ES6+）你需要了解的一些知識點

型別轉換
this
作用域（作用域鏈）
原型鏈以及繼承
閉包的理解
動態作用域和詞法作用域
JavaScript 執行機制
promise & async
……

上面說的CSS & HTML & JavaScript的基礎知識點並不需要你一入門就全部都理解透徹；有些雖然是基礎，但卻也有它的難度。就算是高階也不敢說自己全都掌握了，有句話說的挺好 —— 書讀百遍、其義自見。

我們第一遍學習不可能盡懂，到最少可以給我留下一個印象。過一段時間再學習這塊知識點的時候，你肯定會有一個全新的理解。學習只一個需要一直線上的任務，重複的學習可以幫助你保持持續的競爭力。

我先宣告一點，我並沒有說其他技術不需要去學習，只不過初入門最好重點是先將基礎夯實。

其實三大件的學習不需要花費多少時間，有基礎的大概 3 個月就可以大致的看一遍。是否真的理解這是後話，不過已經算是入門了。

CSS & HTML & JavaScript 推薦書籍/網站

HTML

《Head First HTML與CSS》

Head Fisrt系列書你懂的，為入門而生，文筆風趣幽默為主，配圖也很豐富，簡單易懂就對了。

《HTML5 權威指南》

豆瓣評分8.5的書，書是沒問題，800多頁的書全面性不用說，但是能不能讀得完這是一個問題，就看決心和“手速”了。

網路教程
- https://www.w3school.com.cn/h.asp
- https://www.runoob.com/html/html-tutorial.html
- https://developer.mozilla.org/

CSS

《CSS權威指南》

放在現在來看是本“老書”了，但是很多基礎的東西在那擺著也得學。CSS東西就是細節多，這本就當是給CSS的知識點做了一個大梳理吧，所以這本書當工具書看是可以。

《CSS揭祕》

這本書展示了47個CSS的技巧，是一本注重實踐的教程，雖然算進階書，但是內容沒那麼難，看完對很多實現思路有啟發。

網路教程
- https://www.runoob.com/css/css-tutorial.html
- https://www.w3school.com.cn/css/index.asp
- https://developer.mozilla.org/

JavaScript語言

《你不知道的 JavaScript》

這本書是翻譯過來的，分好幾卷，黃油油的封面你懂的~ 應該說這本書把JavaScript裡很多複雜且深度的概念進行了細緻講解，比如作用域、閉包、原型、非同步等等，網上書評啥的還是可以的。

《JavaScript DOM程式設計藝術》

這本書並不厚，小白可用，初學時搞定並實踐了這本書裡的內容，應該入門沒啥問題，這樣後面就可以找一些經典甚至聖經類的書來加強和鞏固了。

《JavaScript 高階程式設計》

大名鼎鼎的JS紅寶書，是權威的JavaScript入門書籍，沒錯是入門書籍！不要被名字裡的“高階”兩個字嚇跑~ 內容循序漸進，基礎且全面，不能指望一遍就過，適合精讀也適合回味。

《JavaScript權威指南》

上面是“紅寶書”，這本是“犀牛書”，據說這兩本在一起更搭配哦。

這本書是淘寶前端團隊翻譯的，也算是JavaScript開發者的聖經之一，內容太多太全，如果能多通讀幾遍並有所心得，估計成神之路也就不遠了~

網路教程
- 菜鳥教程：https://www.runoob.com/js/js-tutorial.html
- 現代JavaScript教程：https://zh.javascript.info/
- MDN文件：https://developer.mozilla.org/

庫工具

對於庫工具而言我們常用的有 JQuery、underScore、zepto、Moment 等

JQuery: 降低開發者操作 DOM 的複雜度
UnderScore: 提供實用的函式
Zepto: JQuery 的簡化版
Moment: 日期和時間操作庫

這些庫給我們提供了很大的便利，省去了我們編寫相關方法的時間，同時也是我們的程式更加穩健 —— 我們自己寫的方法很可能在某些情況下就出 bug 了。

當然對於這些庫我們不僅僅只是去了解 API，我們需要去學習它的原始碼。看看如果自己寫相關方法的話是不是也想到了這種方式，這些庫工具是也是一個很好地學習工具，我們不應該忽略。

比如讓你自己實現節流函式，你會如何實現。
過濾物件應該如何實現
……

這種問題的答案不就在 Underscore 原始碼裡面嗎？

我們在學習庫工具的時候，必定是需要回頭看 JavaScript 基礎的；這也就進一步夯實了基礎。

前端框架（ MVVM ）的學習

當下最火的框架想必一定是 React 和 Vue，如果 JQuery 的存在是是我們更加方便的操作 DOM,那麼現在 MVVM 框架則是讓我們從手動更新 DOM 的繁雜操作中解放出來。

至於 React 和 Vue 該學習哪一個，更多的還是看當下公司使用的是哪一個（也不是必然）。對於 Vue(React) 該如何使用其實不用多久就能上手，我們更應該關心的是他們背後的設計思想和實現原理。

一些問題

響應式的基本原理是什麼
釋出訂閱模式的理解
Virtual DOM 的理解
前端路由的實現原理
nextTick / setState 的實現原理
diff 演算法
單頁面應用（SPA）的原理和優缺點
……

我們對於框架的 API 使用沒必要花太多時間，應該多研究他們背後的設計思想和實現原理。

Vue 和 React 我該選擇哪一個？

對於這個問題相比很多人都有困擾（有些人兩個都學，也就沒有這個困擾），這個問題已經有很多人回答了。但我還是覺得不是非要選擇哪一個才是政治正確，選擇你需要的。

感興趣的可以看看這篇文章：
React or Vue: Which Javascript UI Library Should You Be Using?

以下是提煉的文中觀點：

Vue的優勢是：

模板和渲染函式的彈性選擇
簡單的語法和專案配置
更快的渲染速度和更小的體積

React的優勢是：

更適合大型應用和更好的可測試性
同時適用於 Web 端和原生 App
更大的生態系統，更多的支援和好用的工具

Vue 相關資料

對於框架的一些學習資料我個人更傾向於推薦官方文件，有很多問題官方文件已經說得很清楚了。市面上有些書籍也就是對官方文件進行了一個擴寫（不排除有精良之作）。

瀏覽器 & 計算機基礎

如果你希望能能快速進階到高階工程師，那麼對於瀏覽器 & 計算機基礎的知識你就必要又有一定的掌握。因為這能讓你更好的理解前端。

瀏覽器一直是 JavaScript 最重要的宿主環境，所以我們必須去了解 JavaScript 在瀏覽器中是如何執行的。

我們前端開發接觸最多的應該就是瀏覽器了，記得工作第一年最頭痛的就是處理 IE 的相容問題。工作中出現的很多問題都和瀏覽器有關，所以我覺得了解瀏覽器工作原理是非常有必要的。

為何要學習瀏覽器工作原理？

準確評估 Web 開發專案的可行性
從更高維度審視頁面
解決面試中遇到的絕大部分瀏覽器問題

計算機基礎

對於計算機基礎我們需要做到大體瞭解，這樣的話我們對整體的流程會有一個大概的把握。在實際開發過程中不會過於被動。

需要了解的一些知識點

瀏覽器快取機制
瀏覽器中 JavaScript 的執行機制
頁面渲染原理
瀏覽器安全問題
瀏覽器為什麼會跨域
如何系統的優化頁面
HTTP 與 HTTPS 的區別
TCP/IP 協議
三次握手和四次揮手
CDN 的作用和原理
正向代理與反向代理的特點
……

這裡僅僅列出了一部分知識點，如果想全面的學習可以看下面推薦的資料。

瀏覽器 & 網路基礎推薦書籍/資料

《瀏覽器工作原理與實踐》專欄
《圖解 HTTP》
《網路是怎樣連線的》

前端工程化

從事前端稍微久一點的開發就一定會有這個感受 —— 前端開發越來越工程化，越來越複雜。

對於前端開發來說，現在前端要做的不只是切頁面調介面這麼簡單，我們需要了解的技術無疑更加廣泛。

前端工程化的一點淺見

由於專案的複雜度越來越高，前端需要做的工作就越來越繁重。當專案複雜就會產生許多問題，比如：

如何進行高效的多人協作？
如何保證專案的可維護性？
如何提高專案的開發質量？
如何降低專案生產的風險？

前端工程化細分的話我覺得可以分成模組化、元件化、規範化三個方向。或者說一切能提升前端開發效率，提高前端應用質量的手段和工具都是前端工程化的實踐。

模組化

JavaScript 模組化
CSS 模組化
資源模組化

元件化

從 UI 拆分下來的每個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，我們稱之為元件。

也就是將複雜頁面按功能拆分成多個獨立的元件。

規範化

編碼規範
介面規範
git 使用規範
CodeReview
UI 元素規範

前端工程化一些知識點

理解 Babel、ESLint、webpack 等工具在專案中的作用
Babel 的核心原理
Webpack 的編譯原理、構建流程、熱更新原理
nginx 的基本理解
理解 Git 的工作流程
Mock 的意義及優點

效能優化

提起效能優化，大家最先想到的是什麼？我最先想到的是一道面試題：

從輸入 URL 到頁面載入完成的具體過程

因為從直觀層面來看，我們前端需要優化的步驟基本都在這個載入工程當中。

效能優化現在對於前端來說已經是必不可少的技能了，當然現在有些所謂的效能優化的技巧現在都成為了一種需要遵從的規範。

我們需要關注兩個方向的效能優化：

執行時的優化
開發時的優化

效能優化一些知識點

前端效能衡量指標、效能監控（performance,LightHouse）
常見的效能優化方案有哪些
SSR 方案的效能優化
Webpack 的效能優化方案
React、Vue 等框架使用效能優化方案
網路層面的優化方案
頁面渲染層面的優化方案
白屏的優化方案
……

Nodejs

我們知道由於 Nodejs 的出現，前端開發出現了一個新的高潮。JS 開始可以涉及後端領域，JS 的可能性更大了。

Nodejs 一些知識點

Nodejs 在應用程式中的作用
Express 和 Koa 的區別
Nodejs 的底層執行原理、和瀏覽器的異同
Nodejs 非阻塞機制的實現原理
……

資料結構和演算法

這一點我也比較薄弱，就不展開了。關於這部分你可以刷 leetcode。

另外推一本書《學習 JavaScript 資料結構與演算法》（第三版）

依葫蘆畫瓢

我們在專案開發的過程中可以接觸到很多優秀的庫工具或者是 UI 庫。如 lodash、underscore、moment、element-ui、antd design 等。

我們可能自己設計不出來這麼優秀的工具，但是我們完全可以依葫蘆畫瓢自己按著這些工具寫一遍，你就會發現裡面有很多不可思議的技巧、優秀的思想。

依葫蘆畫瓢對學習來說也是一個非常有用的技巧。

最後

說個題外話，我在一線網際網路企業工作十餘年裡，指導過不少同行後輩。幫助很多人得到了學習和成長。

我意識到有很多經驗和知識值得分享給大家，也可以通過我們的能力和經驗解答大家在IT學習中的很多困惑，所以在工作繁忙的情況下還是堅持各種整理和分享。

我可以將最近整理的前端面試題免費分享出來，其中包含HTML、CSS、JavaScript、服務端與網路、Vue、瀏覽器等等，還在持續整理更新中，希望大家都能找到心儀的工作。

有需要的朋友點選這裡免費領取題目+解析PDF。

篇幅有限，僅展示部分內容
篇幅有限，僅展示部分內容
篇幅有限，僅展示部分內容