前言 對於剛開始學習前端的伙伴倆說，問得最多的問題就是 ——前端技術現在如此繁雜，我到底應該如何學習。這個話題太大了，幾句話回答不好；也由於這個問題確實困擾了很多前端開發人員，所以我也就著手系統的輸出這篇文章。 雖然這篇文章花了很長時間，肯定也有其局限性；希望各位不吝指出。 入題 我們儼然能感受到前 ...
前言
對於剛開始學習前端的伙伴倆說，問得最多的問題就是 ——前端技術現在如此繁雜，我到底應該如何學習。這個話題太大了，幾句話回答不好；也由於這個問題確實困擾了很多前端開發人員，所以我也就著手系統的輸出這篇文章。
雖然這篇文章花了很長時間，肯定也有其局限性；希望各位不吝指出。
入題
我們儼然能感受到前端崗位現在已經發展成了最重要的研發崗位之一，所以對我們提出的要求也就越來越高。所以我們需要學的也就不僅僅只是CSS&HTML&JavaScript了。但這三大件一直都是前端的根本，這一點從未改變。而這三大件中JavaScript又是重中之重。
接下來我會結合我的一點經驗，給出前端學習路線的一些具體建議。
目錄
三大件學習
庫工具
前端框架（ MVVM ）的學習
瀏覽器 & 電腦基礎
前端工程化
性能優化
Nodejs
數據結構和演算法
依葫蘆畫瓢
三大件學習
現在每年依舊有很多初級入門的前端開發。所以對初入門的朋友也給出一點意見。
剛入門的朋友，我覺得不應該一開始就學習像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 不知道推薦什麼書。我個人覺得看教程和動手實踐就基本沒什問題。
接下來我們就可以學習一些工具類的庫了。
庫工具
對於庫工具而言我們常用的有 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 相關資料
對於框架的一些學習資料我個人更傾向於推薦官方文檔，有很多問題官方文檔已經說得很清楚了。市面上有些書籍也就是對官方文檔進行了一個擴寫（不排除有精良之作）。
Vue 官網 & Vue Router 官網 & Vuex 官網
剖析 Vue.js 內部運行機制 掘金小冊
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 到頁面載入完成的具體過程
因為從直觀層面來看，我們前端需要優化的步驟基本都在這個載入工程當中。
性能優化現在對於前端來說已經是必不可少的技能了，當然現在有些所謂的性能優化的技巧現在都成為了一種需要遵從的規範。
我們需要關註兩個方向的性能優化：
1 .運行時的優化
2.開發時的優化
性能優化一些知識點
前端性能衡量指標、性能監控（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 等。
我們可能自己設計不出來這麼優秀的工具，但是我們完全可以依葫蘆畫瓢自己按著這些工具寫一遍，你就會發現裡面有很多不可思議的技巧、優秀的思想。
依葫蘆畫瓢對學習來說也是一個非常有用的技巧。
自己是從事了五年的前端工程師，自己整理了一份最全面前端學習資料，從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理，送給每一位前端小伙伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小伙伴，需要可以私聊我喲，這是我的前端開發qun，【六零三】【九八五】【九九三】，直接群里下載，對於學習web前端有任何問題（學習方法，學習效率，如何就業）都可以問我，最後可以點一波關註喲！
