關於前端學習路線的一些建議（內含經典自測題）

前言

這幾個月幾乎天天都會有朋友加我微信，而他們問的最多的問題就是 —— 前端技術如今如此繁雜，我到底應該如何學習。這個話題太大了，幾句話回答很差；也因爲這個問題確實困擾了不少前端開發人員，因此我也就着手系統的輸出這篇文章。

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

入題

咱們儼然能感覺到前端崗位如今已經發展成了最重要的研發崗位之一，因此對咱們提出的要求也就愈來愈高。因此咱們須要學的也就不只僅只是 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 推薦書籍/網站

0. _ W3C 的 CSS&HTML 網絡教程
1. 《CSS 權威指南》
2. 《CSS 揭祕》
3. 《JavaScript 高級程序設計》
4. 《你不知道的 JavaScript》上卷
5. _ 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 相關資料

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

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

瀏覽器 & 計算機基礎

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

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

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

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

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

計算機基礎

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

須要瞭解的一些知識點

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

這裏僅僅列出了一部分知識點，若是想全面的學習能夠看下面推薦的資料。

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

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

前端工程化

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

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

前端工程化的一點淺見

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

• 如何進行高效的多人協做？
• 如何保證項目的可維護性？
• 如何提升項目的開發質量？
• 如何下降項目生產的風險？

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

模塊化

• 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 等。

咱們可能本身設計不出來這麼優秀的工具，可是咱們徹底能夠依葫蘆畫瓢本身按着這些工具寫一遍，你就會發現裏面有不少難以想象的技巧、優秀的思想。

依葫蘆畫瓢對學習來講也是一個很是有用的技巧。

最後

你能夠關注個人同名公衆號【小生方勤】，這裏我會分享優質的文章，咱們一同進步。

若是你想進【大前端交流羣】，點擊加羣交流即刻加入。