2020年最新前端学习路线
這段日子在 B 站上收到小伙伴最多的要求就是出一個前端學習路線，我能夠充分的感受到大家抓耳撓腮加撓墻的迷茫~所以在這里給大家總結了一套前端學習路線。先從初級前端工程師所需的技能開始，然后一路升級到高級工程師該掌握的技能，層層相扣，讓大家在工作中能游刃有余。最后附上我自己是如何從一個后端工程師轉成了前端工程師^^。希望我的經歷能對大家有幫助。
俗話說知己知彼百戰(zhàn)不殆，要成為一名前端大神，首先知道它是做什么的。單純從工作角度看，無非就是寫寫前端樣式，連接下后臺 api，解析解析數(shù)據(jù)，然后顯示給用戶，核心邏輯是這樣沒錯，只是這中間摻雜著無數(shù)個邊邊角角的問題，比如框架選擇、性能優(yōu)化、兼容性調整、工程化等等。不過呢，這些并不需要一次性掌握，隨著一次一次完成工作任務，解決 bug，這些自然而然就學會了~
在正式開始之前，咱們先把心態(tài)放平，就像玩游戲，游戲滿級也不是一天兩天的事，滿級之后也才是一個新的開始。。。無盡的追求完美~。時間上，掌握前端工程師的基本技能大概需要 4 個月到 1 年的時間（看自己的意志力和上進心），之后就是在工作實踐中不斷的提升自己，時刻關注業(yè)界新聞，保持在科技的最前沿。工作是一個長期的事情，咱們靜下心來慢慢學。
#完整技能大圖
先來看 github 上一大神制作的路線圖：
https://roadmap.sh/frontend
#核心技能
?
好了，相信你已經開始下定決心要成為前端大神了，那咱們第一步就是把前端的核心裝備拿下，它們分別是?html,?css?和?JavaScript。前端的初衷是開發(fā)網頁來讓其他人看的，可以向全世界分享信息，直到最近幾年才誕生了利用這些核心知識去開發(fā)移動 APP、小程序等多終端前端應用的工具，學好核心是前端工程師必備的素養(yǎng)。下邊就是核心技能的簡介：
#HTML
HTML 是用來編寫網頁代碼結構的，它有一系列的標簽用于顯示不同的頁面元素，比如用?<a/>?顯示一個超鏈接，<img/>?顯示一張圖片，就跟寫一個 word 文檔一樣，只是單純用 html 只能寫內容，不能進行排版和美化樣式，如果讓網頁變得漂亮，需要 CSS。
學習 HTML ：指南與教程
書籍：Web 開發(fā)經典叢書：HTML & CSS 設計與構建網站
#CSS
CSS 是用來美化 HTML 編寫的頁面的，通過一些語法選擇特定的 html 標簽，然后用一些屬性來給它們添加樣式，比如文字顏色，背景，位置，邊距，定位等等，還可以添加動畫效果讓頁面顯示的栩栩如生~。重點要掌握 CSS 的盒子模型、常用的布局方式，比如 flex、grid 等。
CSS - 設計 web
書籍：CSS 權威指南（第四版）（上下冊）
#JavaScript
在寫完 html、css 之后，咱們就可以寫漂亮的頁面了，那么接下來就是需要學習 JavaScript，讓網頁能和人進行互動，比如點擊按鈕彈出個對話框，處理用戶輸入的表單信息，添加一些復雜的動畫，使用 ajax 加載遠程數(shù)據(jù)等等。它可以直接操作 HTML 元素，給網頁開發(fā)提供了無限可能~這里咱們一定要把 JavaScript 基礎語法掌握扎實，可以觀看我 B 站上的 JavaScript 視頻：
JavaScript 基礎教程 | 2020 年最新
JavaScript — 用戶端動態(tài)腳本
書籍：JavaScript 權威指南（第 6 版）
書籍：Eloquent JavaScript 3rd edition (包括 HTTP)
#網絡基礎
現(xiàn)在咱們可以做成型的網站了，那咱們該如何讓全世界的人看到咱們的杰作呢？那這里網絡基礎就派上用場了，不需要精通，只需要掌握幾個基本概念就好了。
#域名
訪問網站咱們都知道需要使用 url (網址)，比如 www.baidu.com，這個 baidu.com 就是域名，域名可以從域名提供商購買，比如阿里云。在購買域名之后要通過 DNS 解析服務把它對應到一臺服務器的 IP 地址上。
什么是域名？
阿里云
#服務器
服務器就是一臺安裝了服務器程序的電腦。用戶用域名訪問一個網站時，會有 DNS 解析服務把域名解析成 IP，再通過 IP 找到相應的服務器，服務器程序就把網站內容傳遞給用戶的瀏覽器。咱們的網站就部署在服務器上，它也是從阿里云之類的提供商購買。
阿里云
#Linux
服務器的操作系統(tǒng)一般是 linux，它可以沒有用戶界面，可以節(jié)省很多 CPU 和內存資源，這樣就要求咱們掌握一些常用命令，比如創(chuàng)建文件，切換目錄，復制和移動文件，顯示文件列表等。另外訪問服務器常用的工具是 SSH 和 FTP，咱們需要通過這幾個工具來從自己的電腦連接到遠程的服務器，然后安裝服務器程序和上傳網站程序。
書籍：鳥哥的 Linux 私房菜 基礎學習篇(第 4 版)
#服務器程序
常用的服務器程序有 apache、nginx，它們都是基于 HTTP 協(xié)議的，有了服務器程序，網站文件比如 html 頁面才能發(fā)送到用戶的瀏覽器上。
Nginx 中文文檔
apache 中文文檔
#HTTP 協(xié)議
協(xié)議好比如說醫(yī)生開藥方，寫的龍飛鳳舞，但是藥房藥師居然都看得懂~這個可以說他們都有固定套路來理解對方~那么在計算機領域，協(xié)議就是電腦之間用來交換數(shù)據(jù)的規(guī)則。HTTP 協(xié)議是用來在網絡上交換和傳輸數(shù)據(jù)的，比如說咱們的網站 html、css 和 js 就是通過這個 http 協(xié)議來發(fā)送到瀏覽器的。
HTTP 概述
#進階技能
?
上邊核心技能都掌握了的話，你就已經超過一半的前端工程師了，接下來就是成長為更高級一些的前端工程師，這里的目的是除了理解一些高級的概念之外，還要提高開發(fā)效率，也就是用到所謂的框架。
#響應式布局
現(xiàn)在手機和平板差不多要比電腦都流行了，所以一個網站要適應不同尺寸的屏幕，有這種特性的網站就叫做響應式網站。實現(xiàn)響應式主要就是通過 css 的?media query?針對不同的屏幕寬度，編寫不同的 CSS 樣式。
響應式 Web 設計
#兼容性調整
網站需要在不同的操作系統(tǒng)和瀏覽器下都要保持一致。對于 CSS，可以使用 css hack 來對不同的瀏覽器加載不同的樣式。 對于 JavaScript，則可以使用 Babel 等轉化工具，把新的 JS 語法轉換成舊的，或者使用 polyfill 加上瀏覽器不支持的語法。
跨瀏覽器測試介紹
#UI 框架
UI 框架提供了頁面的基本 UI 樣式和布局系統(tǒng)，比如按鈕、對話框、輪播圖，省了自己去開發(fā)，常用的有 Boostrap, Semantic UI， Tailwind CSS。
Bootstrap
Semantic UI
Tailwind CSS
#SEO
SEO 全稱是 Search Engine Optimization，搜索引擎優(yōu)化。咱們常見的百度、谷歌這些搜索引擎會定期爬取線上的網站內容，然后進行收錄，網站內容質量優(yōu)秀、結構良好、訪問量大的還會排名比較靠前。為了給自己的網站增加曝光量，這就需要針對搜索引擎給咱們的網站添加一些內容，比如關鍵字。
如何帶著 SEO 的思維將 MDN 的 Web 文檔寫的更符合搜索引擎展現(xiàn)
SEO 基礎知識教程
#Node.js、npm / yarn
因為 Node.js 的出現(xiàn)，JavaScript 的開發(fā)可以脫離瀏覽器了，這樣就產生了好多借助 Node.js 來寫前端代碼的方式，然后用相應的打包工具去打包成瀏覽器可用的代碼。這樣的好處是，咱們可以充分利用 node.js 的包管理工具來方便開發(fā)，比如使用 npm 或者 yarn 管理項目的依賴。
Node.js
npm
yarn
書籍：Node.js 實戰(zhàn) 第 2 版
#CSS 預編譯
咱們在寫 CSS 的時候可能一段代碼要重復好多次，寫一連串的選擇器，重復的屬性組合等等。這時 CSS 預編譯工具就派上用場了，比如 SASS、LESS，它們支持 CSS 選擇器嵌套、定義變量、Mixins、函數(shù)、繼承等等。
SASS
LESS
#自動化工具
自動化工具有 grunt、gulp 等，可以監(jiān)控文件變動，或者做一些自動化操作，比如編譯 SASS 或 LESS 的代碼為 CSS 等。
gulp
grunt
#React, Vue, Angular
這里就不得不提當下十分熱門的前端開發(fā)框架了，React、Vue、Angular 三大件。它們都提供組件化開發(fā)的方式，這就讓前端開發(fā)模式發(fā)生了巨大的變化，以往以頁面為核心現(xiàn)在轉為了以組件為核心，有了這些組件可以方便的在不頁面進行復用。另外基于狀態(tài)的數(shù)據(jù)管理，也讓改變組件狀態(tài)變得十分簡單。這三個框架可以都學，但是工作中基本上只會用到一個，深入一個就可以了。至于它們的 UI 框架也可以根據(jù)工作的需要去學習比如 ant design、element UI 等。
React
Vue
Angular
Ant Design
Element UI
#模塊化 CSS
因為 React 等組件化工程的出現(xiàn)，CSS 分散在不同的組件中，很容易因為命名沖突而導致樣式被覆蓋，模塊化的 CSS 開發(fā)方式通過使用 css modules， 或者 styled-components (css-in-js 方式) 工具能很好的避免這些問題，它們也提供了其它類似 SASS/LESS 的功能。
CSS Modules
styled-components
#工程化工具
所謂工程化的工具，也就是打包工具，前端項目的各種 JS、SASS 源代碼可能分散的不同的地方，利用打包工具，比如 webpack、parcel，可以把它們打包成一個單一的 js 和 css 文件，它們支持按需打包，用到的代碼才會打包到最終產品上，沒用到的則不會。另外圖片等靜態(tài)資源也可以指定規(guī)則進行打包。
webpack
parcel
#測試工具
沒有人想要不健壯的代碼，在改動一個地方之后引起全局崩塌~，咱們寫好的組件需要進行詳盡的測試才能確保不出問題，另外也方便咱們工程師節(jié)省時間，因為只要添加的新功能保證測試結果還是正常，那么就不需要再人工去測試了。常用的 UI 測試工具有 jest, enzyme 等等。
Jest
Enzyme
Puppeteer
#高級技能
?
在把編寫網頁的技能掌握熟練以后，就要從多端開始拓展自己的技能了，另外還要深入已經掌握的技能。
#TypeScript
TypeScript 是微軟編寫的一款帶類型的 JavaScript 語言，它的代碼可以編譯成普通的 JavaScript，但是編寫的時候支持強類型，并且支持完全面向對象的形式。它的好處在于帶有了類型之后，代碼更容易維護，適合大型項目的開發(fā)。
TypeScript
#移動開發(fā)
移動開發(fā)包括移動的頁面 H5 開發(fā)、小程序和移動 APP 開發(fā)，好在這些有統(tǒng)一的開發(fā)平臺，使用 React 或者 Vue 就可以進行一次開發(fā)，多平臺使用。React 生態(tài)的有開發(fā)移動 APP 的 React Native，開發(fā)多端平臺的 taro。 Vue 有多端開發(fā)的 uni-app。
React Native
Taro
Uni-App
#桌面開發(fā)
桌面應用到現(xiàn)在還是有用武之地的，比如音樂軟件，聊天軟件，寫作軟件等等，這些也可以用前端技術開發(fā)，具體的工具有 eletron、proton native 等等。
Electron
Proton Native
#靜態(tài)網站生成工具
靜態(tài)網站因為是純 html、css 和 JavaScript 網站，所以擁有最快的速度、對 SEO 搜索引擎優(yōu)化友好，最適合用于數(shù)據(jù)不常變動的展示、博客類的網站的搭建，常用的工具有 hexo, gatsby, docusaurus 等。
Hexo
Gatsby
Docusaurus
#SSR（服務端渲染）
如果使用 React、Vue 等前端框架開發(fā)網站，那么最終的頁面源代碼是沒有 html 的，因為它們是用 JavaScript 去動態(tài)生成 html 代碼，這樣對 SEO 很不利，不過有了 serer side rendering，服務端渲染技術，就可以解決這個問題，它是把 JavaScript 生成好 HTML 之后，再把頁面發(fā)送給瀏覽器。常用的有 react 系的 next.js，vue 系的 nuxt.js。
Next.js
Nuxt.js
#GraphQL
GraphQL 是一種查詢語言，跟普通的 restful 結構不一樣，它是按照類型來組織數(shù)據(jù)的，不同的類型之間也會有對應關系，就像數(shù)據(jù)一樣，前端開發(fā)者根據(jù)自己的需要編寫 graphql 語句來按需查詢想要的數(shù)據(jù)，它的這種模式非常適合 React 這種項目結構的開發(fā)。
GraphQL
Apollo
Relay
#性能優(yōu)化
性能優(yōu)化的概念比較廣泛，而且根據(jù)應用的用戶量、用戶類別而不同?？傮w來說就是提高頁面首次加載的時間、動畫執(zhí)行的效率、事件響應的效率。這些可以通過優(yōu)化代碼結構、文件大小、DNS 緩存、lazy loading 等來實現(xiàn)。
Web 性能
書籍：Web 性能權威指南
#安全
安全也是一個寬泛的概念，要了解 CORS（跨域資源共享）, XSS（跨站腳本攻擊）, CSRF（跨站請求偽造） 等常見安全問題，也要了解 HTTPS 等安全協(xié)議，要盡量以周全的形式考慮，不要相信任何用戶的輸入，嚴格檢查需要接收用戶輸入的地方。
Web 安全
書籍：Web 安全測試
#工作與團隊技能
工作與團隊技能是在工作中所必備的，無論是初級還是高級前端工程師，這些只要在工作遇到了，就都需要掌握。
#Git
Git 是一個分布式的代碼協(xié)作工具，幾乎所有的公司都在用。Github 是 git 的一個遠程倉庫，咱們可以把代碼發(fā)布到 github 上，既可以作為公開的向全世界展示自己的代碼、進行合作，也可以作為私有的只限自己或者公司內部使用。
Git
Github
書籍：精通 Git 第 2 版
#Docker
Docker 是一種新的虛擬化技術，介于虛擬機和操作系統(tǒng)之間，它所用的資源少，并且能自動化管理鏡像的運行環(huán)境和集群。因為前后端開發(fā)的分離的方式，大型的前端應用也會部署到 Docker 上。
Docker
#CI
CI，持續(xù)集成，是一個自動化的部署過程，開發(fā)人員只需要改動代碼，提交到 git 倉庫，CI 系統(tǒng)會抓取代碼進行打包部署并發(fā)布，節(jié)省了人工運維的時間。
Jenkins
#ESLint 和 Prettier
代碼合作經常會有風格和規(guī)范不統(tǒng)一的情況。ESLint 除了可以檢查語法錯誤外，還可以定義開發(fā)規(guī)范，比如縮進字符的數(shù)量、命名方式等，而 prettier 則可以根據(jù)一些規(guī)范自動格式化代碼。
EsLint
#最新技術
#WebAssembly
Web Assembly 是瀏覽器新支持的編程語言，用于輔助 JavaScript。確切的說，它不是一個編程語言，咱們可以用它的編譯器編譯其它語言，用來編寫更強大的功能，它目前支持 c++和 rust
Web Assembly
#Web Components
Web Components 是類似 React、Vue 開發(fā)的方式，但是是 JS 原生支持的方式，不再需要依賴額外的庫。它的核心概念有 Custom elements（自定義元素），Shadow DOM（影子 DOM），HTML templates（HTML 模板）。
Web Components
#最佳實踐
在前端開發(fā)過程中有一些最佳實踐需要了解，比如 JavaScript 的設計模式、組件設計原則、代碼結構等。
JavaScript 設計模式
#持續(xù)進步
在掌握了上邊所有技能之后~咱們等級就算滿級了，現(xiàn)在就是真正的開始了，要不斷精進自己的技能。前端技術的發(fā)展相比其它技術要快的多，咱們要時常關注一些前端新聞還有業(yè)界大佬的博客或微博，自己主動去搜索一些新的前端庫或者設計模式，然后應用到工作中去，這樣才不至于落后。另外，因為好多技術都是外國人寫的，所以要想得到第一手且最準確的消息，一定要把英語學好，一些包和工具的官方文檔就算是靠著翻譯也要把它們看懂，相信我，過不了幾天，你會發(fā)現(xiàn)需要查的詞越來越少，閱讀速度也越來越快。
總結
以上是生活随笔為你收集整理的2020年最新前端学习路线的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 经济数据分析
- 下一篇： 中台创业潮起，你中台创业了吗？