前言
最近常有朋友加我微信芬探，而他們問的最多的問題就是 ——前端技術現(xiàn)在如此繁雜神得，我到底應該如何學習。這個話題太大了偷仿，幾句話回答不好哩簿；也由于這個問題確實困擾了很多前端開發(fā)人員，所以我也就著手系統(tǒng)的輸出這篇文章酝静。
雖然這篇文章花了很長時間节榜，肯定也有其局限性；希望各位不吝指出别智。
入題
我們儼然能感受到前端崗位現(xiàn)在已經(jīng)發(fā)展成了最重要的研發(fā)崗位之一宗苍，所以對我們提出的要求也就越來越高。所以我們需要學的也就不僅僅只是CSS&HTML&JavaScript了薄榛。但這三大件一直都是前端的根本讳窟，這一點從未改變。而這三大件中JavaScript又是重中之重敞恋。
接下來我會結合我的一點經(jīng)驗丽啡，給出前端學習路線的一些具體建議。
目錄
三大件學習
庫工具
前端框架（ MVVM ）的學習
瀏覽器 & 計算機基礎
前端工程化
性能優(yōu)化
Nodejs
數(shù)據(jù)結構和算法
依葫蘆畫瓢
三大件學習
現(xiàn)在每年依舊有很多初級入門的前端開發(fā)耳舅。所以對初入門的朋友也給出一點意見碌上。
剛入門的朋友，我覺得不應該一開始就學習像Vue浦徊、TypeScript馏予、Webpack等知識。應該把重點放在CSS&HTML&JavaScript基礎知識的學習上盔性。
CSS & HTML
對于剛入門的朋友我依舊建議先將CSS(3)&HTML(5)的知識點認真學習一遍霞丧。學習的途中最好是學習完一部分就自己在敲一遍代碼，加深自己的記憶冕香。
當然如果你愿意蛹尝，建議你可以先仿一個網(wǎng)站的靜態(tài)頁面（掘金、知乎等都可以）悉尾，有一些屬性就可以了解他實際的實現(xiàn)場景突那。
當然剛開始敲代碼的時候還是不要過分依賴自動補全功能，一開始就使用自動補全對你記憶一些屬性時沒有幫助的构眯；踏實點學習愕难，日后會有回報的。
關于 CSS(3) 你需要了解的一些知識點
盒模型（標準 & IE ）
flex、float猫缭、Normal Flow 等的理解
CSS 常用選擇器
行內葱弟、內部、外部樣式的區(qū)別
CSS 層疊規(guī)則
BFC 與 IFC 的了解
CSS3 的 transform猜丹、transition芝加、animation 等屬性的運用了解
響應式布局的理解
……
CSS 說容易也容易，說復雜也復雜射窒；因為 CSS 總是能給你意外的驚喜藏杖。
HTML(5) 你需要了解的一些知識點
說到 HTML 我想有很多人是div一把梭。因為div用的爽轮洋，不用擔心默認樣式制市。
有人說 HTML 語義化的優(yōu)點很多，比如清晰的頁面結構弊予、有利于 SEO祥楣、便于團隊開發(fā)和維護；這些我都承認汉柒，不過我還是喜歡div一把梭误褪。
HTML 語義化( 不是很理解為什么面試總會問 )
canvas
本地存儲（ localStorage、sessionStorage碾褂、cookie 的理解 ）
video 和 audio 的使用
應用緩存( cache manifest )
……
JavaScript
JavaScript一直都是我們前端的基石兽间，一定程度上JavaScript的理解深度決定了你的發(fā)展。所以一定要用心學習正塌。
現(xiàn)在很多人一看到閉包嘀略、原型鏈、作用域鏈乓诽、繼承之類的文章都是直接跳過帜羊，你現(xiàn)在可以自問一下你的確理解這些基礎的知識點嗎？
JavaScript的基礎知識點確實很多鸠天，所以《JavaScript 高級程序設計》 寫了 700 多頁讼育；不過當你 JS 基礎扎實后，你會發(fā)現(xiàn)你在學習框架稠集、亦或是學習框架源碼的時候會輕松許多奶段。
JavaScript（ES6+） 你需要了解的一些知識點
類型轉換
this
作用域（作用域鏈）
原型鏈以及繼承
閉包的理解
動態(tài)作用域和詞法作用域
JavaScript 執(zhí)行機制
promise & async
……
上面說的CSS&HTML&JavaScript的基礎知識點并不需要你一入門就全部都理解透徹；有些雖然是基礎剥纷，但卻也有它的難度痹籍。就算是高級也不敢說自己全都掌握了，有句話說的挺好 —— 書讀百遍晦鞋、其義自見词裤。
我們第一遍學習不可能盡懂刺洒，到最少可以給我留下一個印象。過一段時間再學習這塊知識點的時候吼砂，你肯定會有一個全新的理解。學習只一個需要一直在線的任務鼎文，重復的學習可以幫助你保持持續(xù)的競爭力渔肩。
我先聲明一點，我并沒有說其他技術不需要去學習拇惋，只不過初入門最好重點是先將基礎夯實周偎。
其實三大件的學習不需要花費多少時間，有基礎的大概 3 個月就可以大致的看一遍撑帖。是否真的理解這是后話蓉坎，不過已經(jīng)算是入門了。
CSS & HTML & JavaScript 推薦書籍/網(wǎng)站
_ W3C 的 CSS&HTML 網(wǎng)絡教程
《CSS 權威指南》
《CSS 揭秘》
《JavaScript 高級程序設計》
《你不知道的 JavaScript》上卷
_?ECMAScript 6 入門
HTML 不知道推薦什么書胡嘿。我個人覺得看教程和動手實踐就基本沒什問題蛉艾。
接下來我們就可以學習一些工具類的庫了。
庫工具
對于庫工具而言我們常用的有 JQuery衷敌、underScore勿侯、zepto、Moment 等
JQuery: 降低開發(fā)者操作 DOM 的復雜度
UnderScore: 提供實用的函數(shù)
Zepto: JQuery 的簡化版
Moment: 日期和時間操作庫
這些庫給我們提供了很大的便利缴罗，省去了我們編寫相關方法的時間助琐，同時也是我們的程序更加穩(wěn)健 —— 我們自己寫的方法很可能在某些情況下就出 bug 了。
當然對于這些庫我們不僅僅只是去了解 API面氓，我們需要去學習它的源碼兵钮。看看如果自己寫相關方法的話是不是也想到了這種方式舌界，這些庫工具是也是一個很好的學習工具掘譬，我們不應該忽略。
比如讓你自己實現(xiàn)節(jié)流函數(shù)禀横，你會如何實現(xiàn)屁药。
過濾對象應該如何實現(xiàn)
……
這種問題的答案不就在 Underscore 源碼里面嗎？
我們在學習庫工具的時候柏锄，必定是需要回頭看 JavaScript 基礎的酿箭；這也就進一步夯實了基礎。
前端框架（ MVVM ）的學習
當下最火的框架想必一定是 React 和 Vue趾娃，如果 JQuery 的存在是是我們更加方便的操作 DOM,那么現(xiàn)在 MVVM 框架則是讓我們從手動更新 DOM 的繁雜操作中解放出來缭嫡。
至于 React 和 Vue 該學習哪一個，更多的還是看當下公司使用的是哪一個（也不是必然）抬闷。對于 Vue(React) 該如何使用其實不用多久就能上手妇蛀，我們更應該關心的是他們背后的設計思想和實現(xiàn)原理耕突。
一些問題
響應式的基本原理是什么
發(fā)布訂閱模式的理解
Virtual DOM 的理解
前端路由的實現(xiàn)原理
nextTick / setState 的實現(xiàn)原理
diff 算法
單頁面應用（SPA）的原理和優(yōu)缺點
……
我們對于框架的 API 使用沒必要花太多時間，應該多研究他們背后的設計思想和實現(xiàn)原理评架。
Vue 和 React 我該選擇哪一個眷茁？
對于這個問題相比很多人都有困擾（有些人兩個都學，也就沒有這個困擾）纵诞，這個問題已經(jīng)有很多人回答了上祈。但我還是覺得不是非要選擇哪一個才是政治正確，選擇你需要的浙芙。
感興趣的可以看看這篇文章：
React or Vue: Which Javascript UI Library Should You Be Using?
以下是提煉的文中觀點：
Vue的優(yōu)勢是：
模板和渲染函數(shù)的彈性選擇
簡單的語法和項目配置
更快的渲染速度和更小的體積
React的優(yōu)勢是：
更適合大型應用和更好的可測試性
同時適用于 Web 端和原生 App
更大的生態(tài)系統(tǒng)登刺，更多的支持和好用的工具
Vue 相關資料
對于框架的一些學習資料我個人更傾向于推薦官方文檔，有很多問題官方文檔已經(jīng)說得很清楚了嗡呼。市面上有些書籍也就是對官方文檔進行了一個擴寫（不排除有精良之作）纸俭。
Vue 官網(wǎng)?&?Vue Router 官網(wǎng)?&?Vuex 官網(wǎng)
剖析 Vue.js 內部運行機制?掘金小冊
vue 技術揭秘
瀏覽器 & 計算機基礎
如果你希望能能快速進階到高級工程師，那么對于瀏覽器 & 計算機基礎的知識你就必要又有一定的掌握南窗。因為這能讓你更好的理解前端揍很。
瀏覽器一直是 JavaScript 最重要的宿主環(huán)境，所以我們必須去了解 JavaScript 在瀏覽器中是如何執(zhí)行的矾瘾。
我們前端開發(fā)接觸最多的應該就是瀏覽器了女轿，記得工作第一年最頭痛的就是處理 IE 的兼容問題。工作中出現(xiàn)的很多問題都和瀏覽器有關壕翩，所以我覺得了解瀏覽器工作原理是非常有必要的蛉迹。
為何要學習瀏覽器工作原理？
準確評估 Web 開發(fā)項目的可行性
從更高維度審視頁面
解決面試中遇到的絕大部分瀏覽器問題
計算機基礎
對于計算機基礎我們需要做到大體了解放妈，這樣的話我們對整體的流程會有一個大概的把握北救。在實際開發(fā)過程中不會過于被動。
需要了解的一些知識點
瀏覽器緩存機制
瀏覽器中 JavaScript 的執(zhí)行機制
頁面渲染原理
瀏覽器安全問題
瀏覽器為什么會跨域
如何系統(tǒng)的優(yōu)化頁面
HTTP 與 HTTPS 的區(qū)別
TCP/IP 協(xié)議
三次握手和四次揮手
CDN 的作用和原理
正向代理與反向代理的特點
……
這里僅僅列出了一部分知識點芜抒，如果想全面的學習可以看下面推薦的資料珍策。
瀏覽器 & 網(wǎng)絡基礎推薦書籍/資料
《瀏覽器工作原理與實踐?》專欄
《圖解 HTTP》
《網(wǎng)絡是怎樣連接的》
前端工程化
從事前端稍微久一點的開發(fā)就一定會有這個感受 —— 前端開發(fā)越來越工程化，越來越復雜宅倒。
對于前端開發(fā)來說攘宙，現(xiàn)在前端要做的不只是切頁面調接口這么簡單，我們需要了解的技術無疑更加廣泛拐迁。
前端工程化的一點淺見
由于項目的復雜度越來越高蹭劈，前端需要做的工作就越來越繁重。當項目復雜就會產(chǎn)生許多問題线召，比如：
如何進行高效的多人協(xié)作铺韧？
如何保證項目的可維護性？
如何提高項目的開發(fā)質量缓淹？
如何降低項目生產(chǎn)的風險哈打？
前端工程化細分的話我覺得可以分成模塊化塔逃、組件化、規(guī)范化三個方向料仗⊥宓粒或者說一切能提升前端開發(fā)效率，提高前端應用質量的手段和工具都是前端工程化的實踐罢维。
模塊化
JavaScript 模塊化
CSS 模塊化
資源模塊化
組件化
從 UI 拆分下來的每個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元淹仑，我們稱之為組件。
也就是將復雜頁面按功能拆分成多個獨立的組件肺孵。
規(guī)范化
編碼規(guī)范
接口規(guī)范
git 使用規(guī)范
CodeReview
UI 元素規(guī)范
前端工程化一些知識點
理解 Babel、ESLint颜阐、webpack 等工具在項目中的作用
Babel 的核心原理
Webpack 的編譯原理平窘、構建流程、熱更新原理
nginx 的基本理解
理解 Git 的工作流程
Mock 的意義及優(yōu)點
性能優(yōu)化
提起性能優(yōu)化凳怨，大家最先想到的是什么瑰艘？我最先想到的是一道面試題：
從輸入 URL 到頁面加載完成的具體過程
因為從直觀層面來看，我們前端需要優(yōu)化的步驟基本都在這個加載工程當中肤舞。
性能優(yōu)化現(xiàn)在對于前端來說已經(jīng)是必不可少的技能了紫新，當然現(xiàn)在有些所謂的性能優(yōu)化的技巧現(xiàn)在都成為了一種需要遵從的規(guī)范。
我們需要關注兩個方向的性能優(yōu)化：
運行時的優(yōu)化
開發(fā)時的優(yōu)化
性能優(yōu)化一些知識點
前端性能衡量指標李剖、性能監(jiān)控（performance,LightHouse）
常見的性能優(yōu)化方案有哪些
SSR 方案的性能優(yōu)化
Webpack 的性能優(yōu)化方案
React芒率、Vue 等框架使用性能優(yōu)化方案
網(wǎng)絡層面的優(yōu)化方案
頁面渲染層面的優(yōu)化方案
白屏的優(yōu)化方案
……
推薦資料
《大型網(wǎng)站性能優(yōu)化實戰(zhàn)》
《前端性能優(yōu)化原理與實踐》掘金小冊
Nodejs
我們知道由于 Nodejs 的出現(xiàn)，前端開發(fā)出現(xiàn)了一個新的高潮篙顺。JS 開始可以涉及后端領域偶芍，JS 的可能性更大了。
Nodejs 一些知識點
Nodejs 在應用程序中的作用
Express 和 Koa 的區(qū)別
Nodejs 的底層運行原理德玫、和瀏覽器的異同
Nodejs 非阻塞機制的實現(xiàn)原理
……
數(shù)據(jù)結構和算法
這一點我也比較薄弱匪蟀，就不展開了。關于這部分你可以刷 leetcode宰僧。
另外推一本書《學習 JavaScript 數(shù)據(jù)結構與算法》（第三版）
依葫蘆畫瓢
我們在項目開發(fā)的過程中可以接觸到很多優(yōu)秀的庫工具或者是 UI 庫材彪。如 lodash、underscore琴儿、moment段化、element-ui、antd design 等凤类。
我們可能自己設計不出來這么優(yōu)秀的工具穗泵，但是我們完全可以依葫蘆畫瓢自己按著這些工具寫一遍，你就會發(fā)現(xiàn)里面有很多不可思議的技巧谜疤、優(yōu)秀的思想佃延。
依葫蘆畫瓢對學習來說也是一個非常有用的技巧现诀。
