前端學習從入門到超神徹底指南

當小白學前端的時候到底學什麼？要按照什麼順序學？怎麼學？

首先說一說考慮這個問題的起源是兩個月前我無心間在V站上發了一個帖子：前端開發老司機擬收一個徒弟~ - V2EX，而後就有不少人灌水，也有不少人誠心想要入坑前端。藉此機會我從新梳理了一下個人前端技術棧，也準備貢獻一些系列化的教程幫助新人入坑~

而後我寫了5篇博文，後來發現入門的知識更適合用視頻的方式來說解，因而去B站作了一名UP主~到如今也錄了4個視頻。

本文梳理了前端學習的知識點，還有建議的學習路線，用於統一回答初學者的問題，若是有什麼遺漏的或者不對的，歡迎補充和幫我改進。我把前端知識圖譜整理成了一個腦圖：

首先咱們看看前端的端

• Web（H5）
• 小程序（快應用，各類平臺的小程序）
• 微信公衆號
• 跨端移動端（RN、Cordova、Flutter）
• 跨端桌面端（Electron）

Web（H5）開發屬於咱們傳統意義上的前端，本文中整理的知識所有適用於Web（H5）端，也許會適用其它的端。有了Web（H5）端的基礎，能夠很快上手其它的端。

前端基礎

• HTML&CSS
  • 標籤語義化
  • 選擇器
  • 盒模型
  • 佈局
  • 動畫&過渡效果
• JavaScript
  • ES6
  • 數據類型
  • 函數防抖&節流
  • Promise、async/await
  • 事件管理（發佈&訂閱）
• 瀏覽器API
  • BOM
  • DOM
  • 頁面渲染和繪製原理

子項列表是我單獨提出來用於強調的關鍵內容（一般須要總結梳理的知識點，常常出如今面試題裏）。理解好了這些關鍵內容點纔算過了基礎這一關。

前端調試

• 使用Chrome調試Web應用

單獨把這個提出一欄，由於在學習基礎的時候就須要掌握這一項！

通用基礎知識

• 網絡協議（HTTP）
• 數據結構與算法
• CDN
• 安全相關

通用基礎知識對於初學者而言，只要求初步瞭解便可。學習這部份內容能夠當作專題針對性的去學習。

前端工程化

• 項目架構/框架選擇
• 工程化工具（打包、發佈、持續集成）
  • Webpack
  • Git
  • Gulp
  • Rollup
• 性能
  • 體系化的性能優化
  • 性能監控
• 系統建設
  • 組件複用（ant-design-pro、飛冰）
  • 跨平臺（RN、Cordova）
  • 獨成一派的Flutter
  • 小程序跨平臺（Taro、Mpvue）
• 監控系統
  • 質量保證
  • 數據監控
  • 安全監控
• 包管理
  • npm
  • yarn

前端工程化一般是中高級開發或者架構師該作的事，可是每個初學者從開發第一個正式的項目開始就要接觸到工程化。包括學習React這樣的框架，第一步也是須要搭建一個開發環境。

工程化屬於一個進階的學習內容，我也把工程化的學習分紅了三個步驟：

1. 瞭解什麼是前端工程化，在大佬們搭建好的工程裏協同工做
2. 理解和使用各類工具來搭建和配置項目工程
3. 融匯貫通，用工程化的思想來解決問題

前端框架

• React

  • 基本使用

  • 生態

    • 腳手架（create-react-app）：用於快速搭建項目環境
    • 路由（react-router）
    • 狀態管理（Redux：Redux-saga）
    • UI庫（ant-design）

  • 實現原理

    • JSX
    • VirtualDOM
• Vue

框架學習的大頭部分應該在於它的生態部分，搭配了生態，React才能被稱之爲一個框架。對框架的學習能夠分紅兩個步驟：

1. 框架及全家桶的基本使用。React和Vue都有友好到過度的中文文檔，必定要看官方文檔！看文檔照着指引就能上手了。上面我整理出的生態就是一套React全家桶。直接看官方文檔便可。（若是想要比官方文檔還要快一點，能夠看我錄的視頻）
2. 理解框架各個概念及實現原理

說明：框架就是用來解決問題的，會用了就能夠了~不過理解了原理才能用的更好，中高級開發是要求理解原理的。會用了以後再使用（靠譜的）搜索引擎對關鍵知識點逐個擊破。

前端庫

• jQuery（操做DOM、事件綁定、其它方法）
• Loadash（JS功能函數）
• 各類UI庫（element、ant-design）
• Axios （http）

前端生態是很完善的，開源社區無所不能。這幾個是我列舉的經常使用的開源庫。學會了使用它們會讓咱們的開發工做事半功倍。

語言擴展

• Typescript
• SASS&LESS

語言擴展的做用是爲了彌補語言的缺陷，提升開發效率或者維護效率的。語言擴展不屬於基礎範疇，能夠排在進階裏學習。

其它

• 代碼檢查ESLint、CSSLint
• 編譯器Babel
• 萬能的NodeJS
  • 腳本工具開發（Webpack、Babel）
  • 服務端開發（Express、Koa）
  • 全棧
• Mock數據接口 這一部分的內容也屬於前端進階篇。

學習前端基礎建議分紅兩個步驟：

1. 學習前端基礎。w3school這個網站：www.w3school.com.cn。不須要花裏胡哨，在這個網站裏學習HTML、CSS、JavaScript這三個欄目足夠了，目錄便是概覽，並且裏面還有例子記得點試一試
2. 學習前端進階知識點。把我上面整理出來的關鍵內容一個一個粘貼到（靠譜的）搜索引擎裏搜索，在前兩頁裏篩選幾篇靠譜的博文來學習。列舉幾個我常常學習的靠譜的來源。

• 來自淘寶FED、騰訊ISUX、凹凸實驗室、百度EUX等知名團隊的技術博客
• 阮一峯、張鑫旭的博客，易於理解。
• 來自掘金的博文，有不少靠譜的總結和整理

說明：對於一些從iOS、Android或者後端開發轉過來的，對於文檔一看就懂的，第一步裏的網站也能夠當作文檔網站來用，直接從下面的2開始。Web開發文檔網站還推薦這個 https://developer.mozilla.org/zh-CN/

整個學習曲線能夠是這樣的：

1. 前端基礎的學習（HTML、CSS、JavaScript、前端調試）
2. 前端基礎學習到50%左右（能夠把w3school或者MDN這樣的網站當作文檔來查閱的時候），能夠開始框架的學習（React）
3. 框架的學習到可使用框架的全家桶來開發完整項目。至此一名入門級的前端開發就誕生了。
4. 在開發項目的時候會遇到各類問題，會考慮到用我在前端基礎裏提到的一些知識點來解決：好比說Promise來解決多層回調嵌套的問題，函數節流/防抖來解決鼠標滑動事件連續觸發的問題。就能夠開始學習進階的一些知識點了。
5. 進階的知識點有不少，一方面是遇到什麼問題學什麼，另外一方面是主動去了解一個問題的最優解決方案。這裏面還包括通用基礎知識的擴充、語言擴展、各類前端庫的使用。這是一個最漫長的過程，能夠一邊項目實踐一邊學習。在這個過程裏若是感受本身已經掌握了60%了，並且遇到了問題會經過搜索引擎和查文檔來解決，那就說明你已是一個合格的初級開發了。
6. 進階的知識點是一個持續學習的過程。至此你可能會主動的去學習前端工程化的知識，瞭解所用框架的實現原理，去考慮性能優化，去嘗試其它這一欄目裏的知識點，那麼恭喜你已經成功上路了。
7. 當你對上面的知識已經融匯貫通，而且開始考慮用系統化的思想（開發一個新的系統、框架、平臺？）來解決問題，那麼你已是一箇中高級的前端開發了，這個時候你已經慢慢脫離了最開始學習的「前端」，跑路成功了。

等初學者學到了第二步，歡迎去B站上關注我：李白的粉兒。

跟我一塊兒學前端，比看文檔更快一點兒~。