極度溫馨的前端開發學習路線，解開新手全部迷惑

前端技術如今如此繁雜，我到底應該如何學習。這個話題太大了，幾句話回答很差；也因爲這個問題確實困擾了不少前端開發人員，因此我也就着手系統的輸出這篇文章。

入題

咱們儼然能感覺到前端崗位如今已經發展成了最重要的研發崗位之一，因此對咱們提出的要求也就愈來愈高。因此咱們須要學的也就不只僅只是 CSS&HTML&JavaScript 了。但這三大件一直都是前端的根本，這一點從未改變。而這三大件中 JavaScript 又是重中之重。

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

目錄

三大件學習
庫工具
前端框架（ MVVM ）的學習
瀏覽器 & 計算機基礎
前端工程化
性能優化
Nodejs學習

01 三大件學習

如今每一年依舊有不少初級入門的前端開發。因此對初入門的朋友也給出一點意見。

剛入門的朋友，我以爲不該該一開始就學習像 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 推薦書籍/網站

W3C 的 CSS&HTML 網絡教程
《CSS 權威指南》
《CSS 揭祕》
《JavaScript 高級程序設計》
《你不知道的 JavaScript》上卷
ECMAScript 6 入門
HTML 不知道推薦什麼書。我我的以爲看教程和動手實踐就基本沒什問題。
接下來咱們就能夠學習一些工具類的庫了。

02 庫工具

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

JQuery: 下降開發者操做 DOM 的複雜度
UnderScore: 提供實用的函數
Zepto: JQuery 的簡化版
Moment: 日期和時間操做庫
這些庫給咱們提供了很大的便利，省去了咱們編寫相關方法的時間，同時也是咱們的程序更加穩健 —— 咱們本身寫的方法極可能在某些狀況下就出 bug 了。

固然對於這些庫咱們不只僅只是去了解 API，咱們須要去學習它的源碼。看看若是本身寫相關方法的話是否是也想到了這種方式，這些庫工具是也是一個很好的學習工具，咱們不該該忽略。
好比讓你本身實現節流函數，你會如何實現。
過濾對象應該如何實現
……
這種問題的答案不就在 Underscore 源碼裏面嗎？
咱們在學習庫工具的時候，一定是須要回頭看 JavaScript 基礎的；這也就進一步夯實了基礎。

03 前端框架（MVVM）學習

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

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

一些典型問題

響應式的基本原理是什麼
發佈訂閱模式的理解
Virtual DOM 的理解
前端路由的實現原理
nextTick / setState 的實現原理
diff 算法
單頁面應用（SPA）的原理和優缺點
……
咱們對於框架的 API 使用不必花太多時間，應該多研究他們背後的設計思想和實現原理。
Vue 和 React 我該選擇哪個？

對於這個問題相比不少人都有困擾（有些人兩個都學，也就沒有這個困擾），這個問題已經有不少人回答了。但我仍是以爲不是非要選擇哪個纔是政治正確，選擇你須要的。

如下是提煉的文中觀點：

Vue的優點是：

模板和渲染函數的彈性選擇
簡單的語法和項目配置
更快的渲染速度和更小的體積
React的優點是：

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

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

Vue 官網 & Vue Router 官網 & Vuex 官網
剖析 Vue.js 內部運行機制 掘金小冊
vue 技術揭祕

04 瀏覽器 & 計算機基礎

若是你但願能能快速進階到高級工程師，那麼對於瀏覽器 & 計算機基礎的知識你就必要又有必定的掌握。由於這能讓你更好的理解前端。

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

咱們前端開發接觸最多的應該就是瀏覽器了，記得工做第一年最頭痛的就是處理 IE 的兼容問題。工做中出現的不少問題都和瀏覽器有關，因此我以爲了解瀏覽器工做原理是很是有必要的。

爲什麼要學習瀏覽器工做原理？

準確評估 Web 開發項目的可行性
從更高維度審視頁面
解決面試中遇到的絕大部分瀏覽器問題
計算機基礎

對於計算機基礎咱們須要作到大致瞭解，這樣的話咱們對總體的流程會有一個大概的把握。在實際開發過程當中不會過於被動。

須要瞭解的一些知識點

瀏覽器緩存機制
瀏覽器中 JavaScript 的執行機制
頁面渲染原理
瀏覽器安全問題
瀏覽器爲何會跨域
如何系統的優化頁面
HTTP 與 HTTPS 的區別
TCP/IP 協議
三次握手和四次揮手
CDN 的做用和原理
正向代理與反向代理的特色
……
這裏僅僅列出了一部分知識點，若是想全面的學習能夠看下面推薦的資料。

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

《瀏覽器工做原理與實踐 》專欄
《圖解 HTTP》
《網絡是怎樣鏈接的》

05 前端工程化

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

對於前端開發來講，如今前端要作的不僅是切頁面調接口這麼簡單，咱們須要瞭解的技術無疑更加普遍。

前端工程化的一點淺見

因爲項目的複雜度愈來愈高，前端須要作的工做就愈來愈繁重。當項目複雜就會產生許多問題，好比：

如何進行高效的多人協做？
如何保證項目的可維護性？
如何提升項目的開發質量？
如何下降項目生產的風險？
前端工程化細分的話我以爲能夠分紅模塊化、組件化、規範化三個方向。或者說一切能提高前端開發效率，提升前端應用質量的手段和工具都是前端工程化的實踐。
模塊化

JavaScript 模塊化
CSS 模塊化
資源模塊化
組件化

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

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

規範化

編碼規範
接口規範
git 使用規範
CodeReview
UI 元素規範
前端工程化一些知識點

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

06 性能優化

提起性能優化，你們最早想到的是什麼？我最早想到的是一道面試題：

從輸入 URL 到頁面加載完成的具體過程
由於從直觀層面來看，咱們前端須要優化的步驟基本都在這個加載工程當中。

性能優化如今對於前端來講已是必不可少的技能了，固然如今有些所謂的性能優化的技巧如今都成爲了一種須要聽從的規範。

咱們須要關注兩個方向的性能優化：

運行時的優化
開發時的優化
性能優化一些知識點

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

《大型網站性能優化實戰》
《前端性能優化原理與實踐》掘金小冊

07 Nodejs學習

咱們知道因爲 Nodejs 的出現，前端開發出現了一個新的高潮。JS 開始能夠涉及後端領域，JS 的可能性更大了。

Nodejs 一些知識點

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

後話

好的資源會達到事半功倍的效果。像那些一文搞懂 xxxxxx，10分鐘搞懂 xxxxxx。別作夢了，學習沒有捷徑。想學好就必須系統深刻學習。若是真的想學好一門技術，有經濟能力的，仍是要去參加系統的課程。

技術更新迭代快，只有在有限的時間中，掌握好技術，才能快人一籌，在有基本技術上，擴張領域。

專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和須要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（網頁製做，網站開發，web開發，從0基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端HTML5的項目實戰【視頻＋工具＋系統路線圖】全棧工程師學習路線以及規劃都有整理，分享給小夥伴）點：學習前端，咱們是認真的