這段日子在 B 站上收到小伙伴最多的要求就是出一個(gè)前端學(xué)習(xí)路線，我能夠充分的感受到大家抓耳撓腮加撓墻的迷茫~所以在這里給大家總結(jié)了一套前端學(xué)習(xí)路線。先從初級(jí)前端工程師所需的技能開始，然后一路升級(jí)到高級(jí)工程師該掌握的技能，層層相扣，讓大家在工作中能游刃有余。最后附上我自己是如何從一個(gè)后端工程師轉(zhuǎn)成了前端工程師^^。希望我的經(jīng)歷能對(duì)大家有幫助。

俗話說知己知彼百戰(zhàn)不殆，要成為一名前端大神，首先知道它是做什么的。單純從工作角度看，無非就是寫寫前端樣式，連接下后臺(tái) api，解析解析數(shù)據(jù)，然后顯示給用戶，核心邏輯是這樣沒錯(cuò)，只是這中間摻雜著無數(shù)個(gè)邊邊角角的問題，比如框架選擇、性能優(yōu)化、兼容性調(diào)整、工程化等等。不過呢，這些并不需要一次性掌握，隨著一次一次完成工作任務(wù)，解決 bug，這些自然而然就學(xué)會(huì)了~

在正式開始之前，咱們先把心態(tài)放平，就像玩游戲，游戲滿級(jí)也不是一天兩天的事，滿級(jí)之后也才是一個(gè)新的開始。。。無盡的追求完美~。時(shí)間上，掌握前端工程師的基本技能大概需要 4 個(gè)月到 1 年的時(shí)間（看自己的意志力和上進(jìn)心），之后就是在工作實(shí)踐中不斷的提升自己，時(shí)刻關(guān)注業(yè)界新聞，保持在科技的最前沿。工作是一個(gè)長(zhǎng)期的事情，咱們靜下心來慢慢學(xué)。

#完整技能大圖
先來看 github 上一大神制作的路線圖：

https://roadmap.sh/frontend

#核心技能
?

好了，相信你已經(jīng)開始下定決心要成為前端大神了，那咱們第一步就是把前端的核心裝備拿下，它們分別是?html,?css?和?JavaScript。前端的初衷是開發(fā)網(wǎng)頁來讓其他人看的，可以向全世界分享信息，直到最近幾年才誕生了利用這些核心知識(shí)去開發(fā)移動(dòng) APP、小程序等多終端前端應(yīng)用的工具，學(xué)好核心是前端工程師必備的素養(yǎng)。下邊就是核心技能的簡(jiǎn)介：

#HTML
HTML 是用來編寫網(wǎng)頁代碼結(jié)構(gòu)的，它有一系列的標(biāo)簽用于顯示不同的頁面元素，比如用?<a/>?顯示一個(gè)超鏈接，<img/>?顯示一張圖片，就跟寫一個(gè) word 文檔一樣，只是單純用 html 只能寫內(nèi)容，不能進(jìn)行排版和美化樣式，如果讓網(wǎng)頁變得漂亮，需要 CSS。

學(xué)習(xí) HTML ：指南與教程

書籍：Web 開發(fā)經(jīng)典叢書：HTML & CSS 設(shè)計(jì)與構(gòu)建網(wǎng)站

#CSS
CSS 是用來美化 HTML 編寫的頁面的，通過一些語法選擇特定的 html 標(biāo)簽，然后用一些屬性來給它們添加樣式，比如文字顏色，背景，位置，邊距，定位等等，還可以添加動(dòng)畫效果讓頁面顯示的栩栩如生~。重點(diǎn)要掌握 CSS 的盒子模型、常用的布局方式，比如 flex、grid 等。

CSS - 設(shè)計(jì) web

書籍：CSS 權(quán)威指南（第四版）（上下冊(cè)）

#JavaScript
在寫完 html、css 之后，咱們就可以寫漂亮的頁面了，那么接下來就是需要學(xué)習(xí) JavaScript，讓網(wǎng)頁能和人進(jìn)行互動(dòng)，比如點(diǎn)擊按鈕彈出個(gè)對(duì)話框，處理用戶輸入的表單信息，添加一些復(fù)雜的動(dòng)畫，使用 ajax 加載遠(yuǎn)程數(shù)據(jù)等等。它可以直接操作 HTML 元素，給網(wǎng)頁開發(fā)提供了無限可能~這里咱們一定要把 JavaScript 基礎(chǔ)語法掌握扎實(shí)，可以觀看我 B 站上的 JavaScript 視頻：

JavaScript 基礎(chǔ)教程 | 2020 年最新

JavaScript — 用戶端動(dòng)態(tài)腳本

書籍：JavaScript 權(quán)威指南（第 6 版）

書籍：Eloquent JavaScript 3rd edition (包括 HTTP)

#網(wǎng)絡(luò)基礎(chǔ)
現(xiàn)在咱們可以做成型的網(wǎng)站了，那咱們?cè)撊绾巫屓澜绲娜丝吹皆蹅兊慕茏髂?#xff1f;那這里網(wǎng)絡(luò)基礎(chǔ)就派上用場(chǎng)了，不需要精通，只需要掌握幾個(gè)基本概念就好了。

#域名

訪問網(wǎng)站咱們都知道需要使用 url (網(wǎng)址)，比如 www.baidu.com，這個(gè) baidu.com 就是域名，域名可以從域名提供商購買，比如阿里云。在購買域名之后要通過 DNS 解析服務(wù)把它對(duì)應(yīng)到一臺(tái)服務(wù)器的 IP 地址上。

什么是域名？

阿里云

#服務(wù)器

服務(wù)器就是一臺(tái)安裝了服務(wù)器程序的電腦。用戶用域名訪問一個(gè)網(wǎng)站時(shí)，會(huì)有 DNS 解析服務(wù)把域名解析成 IP，再通過 IP 找到相應(yīng)的服務(wù)器，服務(wù)器程序就把網(wǎng)站內(nèi)容傳遞給用戶的瀏覽器。咱們的網(wǎng)站就部署在服務(wù)器上，它也是從阿里云之類的提供商購買。

阿里云

#Linux

服務(wù)器的操作系統(tǒng)一般是 linux，它可以沒有用戶界面，可以節(jié)省很多 CPU 和內(nèi)存資源，這樣就要求咱們掌握一些常用命令，比如創(chuàng)建文件，切換目錄，復(fù)制和移動(dòng)文件，顯示文件列表等。另外訪問服務(wù)器常用的工具是 SSH 和 FTP，咱們需要通過這幾個(gè)工具來從自己的電腦連接到遠(yuǎn)程的服務(wù)器，然后安裝服務(wù)器程序和上傳網(wǎng)站程序。

書籍：鳥哥的 Linux 私房菜 基礎(chǔ)學(xué)習(xí)篇(第 4 版)

#服務(wù)器程序

常用的服務(wù)器程序有 apache、nginx，它們都是基于 HTTP 協(xié)議的，有了服務(wù)器程序，網(wǎng)站文件比如 html 頁面才能發(fā)送到用戶的瀏覽器上。

Nginx 中文文檔

apache 中文文檔

#HTTP 協(xié)議

協(xié)議好比如說醫(yī)生開藥方，寫的龍飛鳳舞，但是藥房藥師居然都看得懂~這個(gè)可以說他們都有固定套路來理解對(duì)方~那么在計(jì)算機(jī)領(lǐng)域，協(xié)議就是電腦之間用來交換數(shù)據(jù)的規(guī)則。HTTP 協(xié)議是用來在網(wǎng)絡(luò)上交換和傳輸數(shù)據(jù)的，比如說咱們的網(wǎng)站 html、css 和 js 就是通過這個(gè) http 協(xié)議來發(fā)送到瀏覽器的。

HTTP 概述

#進(jìn)階技能
?

上邊核心技能都掌握了的話，你就已經(jīng)超過一半的前端工程師了，接下來就是成長(zhǎng)為更高級(jí)一些的前端工程師，這里的目的是除了理解一些高級(jí)的概念之外，還要提高開發(fā)效率，也就是用到所謂的框架。

#響應(yīng)式布局
現(xiàn)在手機(jī)和平板差不多要比電腦都流行了，所以一個(gè)網(wǎng)站要適應(yīng)不同尺寸的屏幕，有這種特性的網(wǎng)站就叫做響應(yīng)式網(wǎng)站。實(shí)現(xiàn)響應(yīng)式主要就是通過 css 的?media query?針對(duì)不同的屏幕寬度，編寫不同的 CSS 樣式。

響應(yīng)式 Web 設(shè)計(jì)

#兼容性調(diào)整
網(wǎng)站需要在不同的操作系統(tǒng)和瀏覽器下都要保持一致。對(duì)于 CSS，可以使用 css hack 來對(duì)不同的瀏覽器加載不同的樣式。 對(duì)于 JavaScript，則可以使用 Babel 等轉(zhuǎn)化工具，把新的 JS 語法轉(zhuǎn)換成舊的，或者使用 polyfill 加上瀏覽器不支持的語法。

跨瀏覽器測(cè)試介紹

#UI 框架
UI 框架提供了頁面的基本 UI 樣式和布局系統(tǒng)，比如按鈕、對(duì)話框、輪播圖，省了自己去開發(fā)，常用的有 Boostrap, Semantic UI， Tailwind CSS。

Bootstrap

Semantic UI

Tailwind CSS

#SEO
SEO 全稱是 Search Engine Optimization，搜索引擎優(yōu)化。咱們常見的百度、谷歌這些搜索引擎會(huì)定期爬取線上的網(wǎng)站內(nèi)容，然后進(jìn)行收錄，網(wǎng)站內(nèi)容質(zhì)量?jī)?yōu)秀、結(jié)構(gòu)良好、訪問量大的還會(huì)排名比較靠前。為了給自己的網(wǎng)站增加曝光量，這就需要針對(duì)搜索引擎給咱們的網(wǎng)站添加一些內(nèi)容，比如關(guān)鍵字。

如何帶著 SEO 的思維將 MDN 的 Web 文檔寫的更符合搜索引擎展現(xiàn)

SEO 基礎(chǔ)知識(shí)教程

#Node.js、npm / yarn
因?yàn)?Node.js 的出現(xiàn)，JavaScript 的開發(fā)可以脫離瀏覽器了，這樣就產(chǎn)生了好多借助 Node.js 來寫前端代碼的方式，然后用相應(yīng)的打包工具去打包成瀏覽器可用的代碼。這樣的好處是，咱們可以充分利用 node.js 的包管理工具來方便開發(fā)，比如使用 npm 或者 yarn 管理項(xiàng)目的依賴。

Node.js

npm

yarn

書籍：Node.js 實(shí)戰(zhàn) 第 2 版

#CSS 預(yù)編譯
咱們?cè)趯?CSS 的時(shí)候可能一段代碼要重復(fù)好多次，寫一連串的選擇器，重復(fù)的屬性組合等等。這時(shí) CSS 預(yù)編譯工具就派上用場(chǎng)了，比如 SASS、LESS，它們支持 CSS 選擇器嵌套、定義變量、Mixins、函數(shù)、繼承等等。

SASS

LESS

#自動(dòng)化工具
自動(dòng)化工具有 grunt、gulp 等，可以監(jiān)控文件變動(dòng)，或者做一些自動(dòng)化操作，比如編譯 SASS 或 LESS 的代碼為 CSS 等。

gulp

grunt

#React, Vue, Angular
這里就不得不提當(dāng)下十分熱門的前端開發(fā)框架了，React、Vue、Angular 三大件。它們都提供組件化開發(fā)的方式，這就讓前端開發(fā)模式發(fā)生了巨大的變化，以往以頁面為核心現(xiàn)在轉(zhuǎn)為了以組件為核心，有了這些組件可以方便的在不頁面進(jìn)行復(fù)用。另外基于狀態(tài)的數(shù)據(jù)管理，也讓改變組件狀態(tài)變得十分簡(jiǎn)單。這三個(gè)框架可以都學(xué)，但是工作中基本上只會(huì)用到一個(gè)，深入一個(gè)就可以了。至于它們的 UI 框架也可以根據(jù)工作的需要去學(xué)習(xí)比如 ant design、element UI 等。

React

Vue

Angular

Ant Design

Element UI

#模塊化 CSS
因?yàn)?React 等組件化工程的出現(xiàn)，CSS 分散在不同的組件中，很容易因?yàn)槊麤_突而導(dǎo)致樣式被覆蓋，模塊化的 CSS 開發(fā)方式通過使用 css modules， 或者 styled-components (css-in-js 方式) 工具能很好的避免這些問題，它們也提供了其它類似 SASS/LESS 的功能。

CSS Modules

styled-components

#工程化工具
所謂工程化的工具，也就是打包工具，前端項(xiàng)目的各種 JS、SASS 源代碼可能分散的不同的地方，利用打包工具，比如 webpack、parcel，可以把它們打包成一個(gè)單一的 js 和 css 文件，它們支持按需打包，用到的代碼才會(huì)打包到最終產(chǎn)品上，沒用到的則不會(huì)。另外圖片等靜態(tài)資源也可以指定規(guī)則進(jìn)行打包。

webpack

parcel

#測(cè)試工具
沒有人想要不健壯的代碼，在改動(dòng)一個(gè)地方之后引起全局崩塌~，咱們寫好的組件需要進(jìn)行詳盡的測(cè)試才能確保不出問題，另外也方便咱們工程師節(jié)省時(shí)間，因?yàn)橹灰砑拥男鹿δ鼙ＷC測(cè)試結(jié)果還是正常，那么就不需要再人工去測(cè)試了。常用的 UI 測(cè)試工具有 jest, enzyme 等等。

Jest

Enzyme

Puppeteer

#高級(jí)技能
?

在把編寫網(wǎng)頁的技能掌握熟練以后，就要從多端開始拓展自己的技能了，另外還要深入已經(jīng)掌握的技能。

#TypeScript
TypeScript 是微軟編寫的一款帶類型的 JavaScript 語言，它的代碼可以編譯成普通的 JavaScript，但是編寫的時(shí)候支持強(qiáng)類型，并且支持完全面向?qū)ο蟮男问健Ｋ暮锰幵谟趲в辛祟愋椭?#xff0c;代碼更容易維護(hù)，適合大型項(xiàng)目的開發(fā)。

TypeScript

#移動(dòng)開發(fā)
移動(dòng)開發(fā)包括移動(dòng)的頁面 H5 開發(fā)、小程序和移動(dòng) APP 開發(fā)，好在這些有統(tǒng)一的開發(fā)平臺(tái)，使用 React 或者 Vue 就可以進(jìn)行一次開發(fā)，多平臺(tái)使用。React 生態(tài)的有開發(fā)移動(dòng) APP 的 React Native，開發(fā)多端平臺(tái)的 taro。 Vue 有多端開發(fā)的 uni-app。

React Native

Taro

Uni-App

#桌面開發(fā)
桌面應(yīng)用到現(xiàn)在還是有用武之地的，比如音樂軟件，聊天軟件，寫作軟件等等，這些也可以用前端技術(shù)開發(fā)，具體的工具有 eletron、proton native 等等。

Electron

Proton Native

#靜態(tài)網(wǎng)站生成工具
靜態(tài)網(wǎng)站因?yàn)槭羌?html、css 和 JavaScript 網(wǎng)站，所以擁有最快的速度、對(duì) SEO 搜索引擎優(yōu)化友好，最適合用于數(shù)據(jù)不常變動(dòng)的展示、博客類的網(wǎng)站的搭建，常用的工具有 hexo, gatsby, docusaurus 等。

Hexo

Gatsby

Docusaurus

#SSR（服務(wù)端渲染）
如果使用 React、Vue 等前端框架開發(fā)網(wǎng)站，那么最終的頁面源代碼是沒有 html 的，因?yàn)樗鼈兪怯?JavaScript 去動(dòng)態(tài)生成 html 代碼，這樣對(duì) SEO 很不利，不過有了 serer side rendering，服務(wù)端渲染技術(shù)，就可以解決這個(gè)問題，它是把 JavaScript 生成好 HTML 之后，再把頁面發(fā)送給瀏覽器。常用的有 react 系的 next.js，vue 系的 nuxt.js。

Next.js

Nuxt.js

#GraphQL
GraphQL 是一種查詢語言，跟普通的 restful 結(jié)構(gòu)不一樣，它是按照類型來組織數(shù)據(jù)的，不同的類型之間也會(huì)有對(duì)應(yīng)關(guān)系，就像數(shù)據(jù)一樣，前端開發(fā)者根據(jù)自己的需要編寫 graphql 語句來按需查詢想要的數(shù)據(jù)，它的這種模式非常適合 React 這種項(xiàng)目結(jié)構(gòu)的開發(fā)。

GraphQL

Apollo

Relay

#性能優(yōu)化
性能優(yōu)化的概念比較廣泛，而且根據(jù)應(yīng)用的用戶量、用戶類別而不同。總體來說就是提高頁面首次加載的時(shí)間、動(dòng)畫執(zhí)行的效率、事件響應(yīng)的效率。這些可以通過優(yōu)化代碼結(jié)構(gòu)、文件大小、DNS 緩存、lazy loading 等來實(shí)現(xiàn)。

Web 性能

書籍：Web 性能權(quán)威指南

#安全
安全也是一個(gè)寬泛的概念，要了解 CORS（跨域資源共享）, XSS（跨站腳本攻擊）, CSRF（跨站請(qǐng)求偽造） 等常見安全問題，也要了解 HTTPS 等安全協(xié)議，要盡量以周全的形式考慮，不要相信任何用戶的輸入，嚴(yán)格檢查需要接收用戶輸入的地方。

Web 安全

書籍：Web 安全測(cè)試

#工作與團(tuán)隊(duì)技能
工作與團(tuán)隊(duì)技能是在工作中所必備的，無論是初級(jí)還是高級(jí)前端工程師，這些只要在工作遇到了，就都需要掌握。

#Git
Git 是一個(gè)分布式的代碼協(xié)作工具，幾乎所有的公司都在用。Github 是 git 的一個(gè)遠(yuǎn)程倉庫，咱們可以把代碼發(fā)布到 github 上，既可以作為公開的向全世界展示自己的代碼、進(jìn)行合作，也可以作為私有的只限自己或者公司內(nèi)部使用。

Git

Github

書籍：精通 Git 第 2 版

#Docker
Docker 是一種新的虛擬化技術(shù)，介于虛擬機(jī)和操作系統(tǒng)之間，它所用的資源少，并且能自動(dòng)化管理鏡像的運(yùn)行環(huán)境和集群。因?yàn)榍昂蠖碎_發(fā)的分離的方式，大型的前端應(yīng)用也會(huì)部署到 Docker 上。

Docker

#CI
CI，持續(xù)集成，是一個(gè)自動(dòng)化的部署過程，開發(fā)人員只需要改動(dòng)代碼，提交到 git 倉庫，CI 系統(tǒng)會(huì)抓取代碼進(jìn)行打包部署并發(fā)布，節(jié)省了人工運(yùn)維的時(shí)間。

Jenkins

#ESLint 和 Prettier
代碼合作經(jīng)常會(huì)有風(fēng)格和規(guī)范不統(tǒng)一的情況。ESLint 除了可以檢查語法錯(cuò)誤外，還可以定義開發(fā)規(guī)范，比如縮進(jìn)字符的數(shù)量、命名方式等，而 prettier 則可以根據(jù)一些規(guī)范自動(dòng)格式化代碼。

EsLint

#最新技術(shù)
#WebAssembly
Web Assembly 是瀏覽器新支持的編程語言，用于輔助 JavaScript。確切的說，它不是一個(gè)編程語言，咱們可以用它的編譯器編譯其它語言，用來編寫更強(qiáng)大的功能，它目前支持 c++和 rust

Web Assembly

#Web Components
Web Components 是類似 React、Vue 開發(fā)的方式，但是是 JS 原生支持的方式，不再需要依賴額外的庫。它的核心概念有 Custom elements（自定義元素），Shadow DOM（影子 DOM），HTML templates（HTML 模板）。

Web Components

#最佳實(shí)踐
在前端開發(fā)過程中有一些最佳實(shí)踐需要了解，比如 JavaScript 的設(shè)計(jì)模式、組件設(shè)計(jì)原則、代碼結(jié)構(gòu)等。

JavaScript 設(shè)計(jì)模式

#持續(xù)進(jìn)步
在掌握了上邊所有技能之后~咱們等級(jí)就算滿級(jí)了，現(xiàn)在就是真正的開始了，要不斷精進(jìn)自己的技能。前端技術(shù)的發(fā)展相比其它技術(shù)要快的多，咱們要時(shí)常關(guān)注一些前端新聞還有業(yè)界大佬的博客或微博，自己主動(dòng)去搜索一些新的前端庫或者設(shè)計(jì)模式，然后應(yīng)用到工作中去，這樣才不至于落后。另外，因?yàn)楹枚嗉夹g(shù)都是外國(guó)人寫的，所以要想得到第一手且最準(zhǔn)確的消息，一定要把英語學(xué)好，一些包和工具的官方文檔就算是靠著翻譯也要把它們看懂，相信我，過不了幾天，你會(huì)發(fā)現(xiàn)需要查的詞越來越少，閱讀速度也越來越快。

總結(jié)

以上是生活随笔為你收集整理的2020年最新前端学习路线的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。