這份學(xué)習(xí)路線并不完美，也不會(huì)有最終形態(tài)，正如前端不可預(yù)見、永無止境的未來。

大家好，我是魚皮，肝了幾天終于完成了這份保姆級(jí)前端學(xué)習(xí)路線。

?? + ?? = ????

先放一張圖：

是不是有點(diǎn)兒長(zhǎng)，感覺要被勸退了？不過不用擔(dān)心，為了幫助大家更輕松地了解前端知識(shí)體系，我對(duì)這份路線撒了點(diǎn) 糖 ~

建議大家觀看 B 站視頻講解，會(huì)清晰很多~

以下是文檔版：

路線特點(diǎn)

1. 一份全面的前端知識(shí)點(diǎn)大梳理和匯總

2. 分階段學(xué)習(xí)，每個(gè)階段給出學(xué)習(xí)目標(biāo)

3. 使用符號(hào)對(duì)知識(shí)點(diǎn)的重要程度做了區(qū)分，按需學(xué)習(xí)

4. 知識(shí)點(diǎn)附有描述和資源鏈接

5. 提供一份清晰的個(gè)人順序?qū)W習(xí)路線方法

6. 提供大量?jī)?yōu)質(zhì)學(xué)習(xí)資源

符號(hào)表

可根據(jù)知識(shí)點(diǎn)前的符號(hào)按需選學(xué)，并獲取知識(shí)點(diǎn)描述和學(xué)習(xí)資源。

• ?? 必學(xué)（追求速成）

• ? 建議學(xué)（重要知識(shí)）

• ? 面試重點(diǎn)

• ? 一般沒必要學(xué)習(xí)

• ?? 描述

• ?? 資源

• ?? 目標(biāo)

大綱

1. 前言 - 學(xué)編程需要的特質(zhì)

2. 前端學(xué)習(xí)七階段

1. 前端入門

2. 鞏固基礎(chǔ)

3. 前端工程化

4. 前端優(yōu)化

5. 前端生態(tài)

6. 前端求職

7. 前端未來

3. 我的前端學(xué)習(xí)路線

4. 尾聲 - 持續(xù)學(xué)習(xí)

前言 - 學(xué)編程需要的特質(zhì)

相信自己有能力，那么你就真的會(huì)有！

• 興趣

• 堅(jiān)持

• 付出

• 心態(tài)

一、前端入門

• ?? 描述：學(xué)習(xí)前端基礎(chǔ)三件套，建議從實(shí)戰(zhàn)開始，邊學(xué)邊練，培養(yǎng)興趣，快速入門。

• ?? 資源

• freeCodecamp 在線編程：https://learn.freecodecamp.one/

• 阿里云前端實(shí)戰(zhàn)學(xué)習(xí)：https://edu.aliyun.com/roadmap/frontend

• W3Cschool 編程入門實(shí)戰(zhàn)：https://www.w3cschool.cn/codecamp/

• pink老師前端入門教程：https://www.bilibili.com/video/BV14J4114768

• ?? 目標(biāo)：了解和實(shí)踐各語(yǔ)言的基礎(chǔ)語(yǔ)法，并能使用開發(fā)工具來獨(dú)立開發(fā)一個(gè)留言板網(wǎng)站。

?? 開發(fā)工具

• ?? 描述：工欲善其事，必先利其器。

瀏覽器

• ?? Chrome

• ? Edge

• ? Firefox

• ? Opera

• Safari

編輯器

• ?? VSCode

• ? WebStorm

• Atom

• ?? Sublime Text

• HBuilder X

• 記事本

• 在線 IDE

文檔筆記

• ? Markdown 語(yǔ)法

• ? Typora

• 在線筆記

• 語(yǔ)雀

• 騰訊文檔

• 石墨文檔

• 印象筆記

• Mdnice

?? HTML

• ?? 描述：用于定義一個(gè)網(wǎng)頁(yè)結(jié)構(gòu)的基本技術(shù)。

• ?? 資源：https://developer.mozilla.org/zh-CN/docs/Learn/HTML

• ?? 基本語(yǔ)法

• ?? 標(biāo)簽

• 分區(qū) div

• 標(biāo)題 h1 ~ h6

• 段落 p

• 圖像 img

• 列表 ul / ol

• 超鏈接 a

• 表單 form

• 表格 table

• 框架 iframe

• ?? 屬性

• ? HTML5 特性

• localStorage

• sessionStorage

• ? Web SQL

• 語(yǔ)義化標(biāo)簽

• 瀏覽器支持

• 多媒體標(biāo)簽

• Canvas 畫布

• ? 內(nèi)聯(lián) SVG

• 本地存儲(chǔ)

• Web Workers

• 應(yīng)用緩存（Cache Manifest）

• 無障礙

?? CSS

• ?? 描述：層疊樣式表，用于設(shè)計(jì)風(fēng)格和布局。

• ?? 資源：https://developer.mozilla.org/zh-CN/docs/Learn/CSS

• ?? 基本語(yǔ)法

• ?? 引入方式

• 行內(nèi)樣式

• 內(nèi)部樣式表

• 外部樣式表

• ?? 選擇器

• 后代選擇器

• 子元素選擇器

• 相鄰兄弟選擇器

• 通用選擇器

• 標(biāo)簽選擇器

• id 選擇器

• class 選擇器

• 屬性選擇器

• 派生選擇器

• 組合選擇器

• 偽選擇器

• 選擇器優(yōu)先級(jí)

• ?? 屬性

• px

• em

• rem

• vw

• vh

• 單位

• 背景

• 文本

• 字體

• 列表

• 表格

• ?? 文檔流

• 標(biāo)準(zhǔn)流

• 浮動(dòng)流

• 定位流

• ?? 內(nèi)聯(lián)元素 / 塊狀元素

• ?? 盒子模型

• content

• padding

• border

• margin

• ?? 浮動(dòng)

• 設(shè)置浮動(dòng) float

• 清除浮動(dòng) clear

• ?? 定位

• static

• absolute

• fixed

• relative

• sticky

• ?? 層疊規(guī)則

• ? BFC 和 IFC 機(jī)制

• CSS3

• 媒體查詢

• Flex 布局

• Grid 布局

• 瀑布流

• ?? 響應(yīng)式布局

• 動(dòng)畫

• 過渡

• 漸變

• 背景

• 邊框

• 圓角

• 字體

• 2D / 3D 轉(zhuǎn)換

?? JavaScript

• ?? 描述：具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的編程語(yǔ)言。

• ?? 資源：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

• ?? 基本語(yǔ)法

• ?? 數(shù)據(jù)類型

• 對(duì)象 Object

• 數(shù)組 Array

• 函數(shù) Function

• 字符串 String

• 數(shù)組 Number

• 布爾 Boolean

• 空值 Null

• 未定義 Undefined

• Symbol

• 值類型

• 引用類型

• ? 數(shù)據(jù)類型轉(zhuǎn)換

• ? 函數(shù)

• ?? 全局調(diào)用

• 構(gòu)造函數(shù)調(diào)用

• ?? 函數(shù)方法調(diào)用

• apply

• call

• ?? 概念

• ?? 自定義函數(shù)

• 調(diào)用方式

• ?? 閉包

• ? 對(duì)象

• 數(shù)字 Number

• 字符串 String 對(duì)象

• 日期 Date 對(duì)象

• 數(shù)組 Array

• 布爾 Boolean

• 算數(shù) Math

• 概念

• this

• 原型鏈和繼承

• 常用對(duì)象

• 自定義對(duì)象

• ?? 作用域（作用域鏈）

• ? BOM API

• ?? DOM API

• ?? JSON

• ?? Ajax

• ? JavaScript 執(zhí)行機(jī)制

? ES6+ 特性

• ?? 描述：新引入的 JavaScript 語(yǔ)法特性。

• ?? 資源：ES6 入門教程 https://es6.ruanyifeng.com/

• let 和 const

• 變量解構(gòu)賦值

• 對(duì)象擴(kuò)展和新增方法

• Symbol

• Set 和 Map 數(shù)據(jù)結(jié)構(gòu)

• ??? Promise & async / await 異步編程

• Generator 函數(shù)異步編程

二、鞏固基礎(chǔ)

• ?? 描述：學(xué)習(xí)前端、計(jì)算機(jī)、軟件開發(fā)相關(guān)基礎(chǔ)知識(shí)，并復(fù)習(xí)鞏固上階段學(xué)到的前端三件套。

• ?? 資源

• 《JavaScript 高級(jí)程序設(shè)計(jì)》：https://www.code-nav.cn/rd/?rid=28ee4e3e606b1e1a0e3cfd8952d172cf

• 《JavaScript 忍者秘籍》：https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2

• ?? 目標(biāo)：熟悉前端三件套語(yǔ)法，尤其是 JavaScript，并了解互聯(lián)網(wǎng)、域名、瀏覽器、服務(wù)器等，扎實(shí)前端程序員的基本功，為下面進(jìn)入實(shí)戰(zhàn)開發(fā)做準(zhǔn)備。

前端基礎(chǔ)知識(shí)

• ? 互聯(lián)網(wǎng)

• ?? 域名

• ?? DNS

• ?? 服務(wù)器

• ? 瀏覽器

• 瀏覽器 DOM 事件流 / 事件委托

• ?? 瀏覽器加載順序

• ?? 瀏覽器渲染過程

• 瀏覽器事件循環(huán)

• 瀏覽器同源策略

• ? 跨域解決方案

• 瀏覽器緩存

• 控制臺(tái)調(diào)試技巧

• ? HTTP

• 1xx 信息

• 2xx 成功

• 3xx 重定向

• 4xx 客戶端錯(cuò)誤

• 5xx 服務(wù)器錯(cuò)誤

• HTTP 1.0

• ?? HTTP 1.1

• HTTP 2

• HTTP 3

• ? HTTP 請(qǐng)求過程

• 常見 HTTP 協(xié)議

• ?? HTTP 請(qǐng)求類別

• ?? 常見狀態(tài)碼

• WebSocket

• ?? Cookie

• Session

• ?? HTTPS

計(jì)算機(jī)基礎(chǔ)

? 算法和數(shù)據(jù)結(jié)構(gòu)

• ?? 時(shí)間 / 空間復(fù)雜度分析

• 數(shù)據(jù)結(jié)構(gòu)

• 數(shù)組

• 字符串

• 隊(duì)列

• 棧

• 鏈表

• 集合

• 哈希表

• 二叉樹

• 算法

• 排序

• 雙指針

• 查找

• 分治

• 動(dòng)態(tài)規(guī)劃

• 遞歸

• 回溯

• 貪心

• 位運(yùn)算

• DFS

• BFS

• 圖

? 計(jì)算機(jī)網(wǎng)絡(luò)

• HTTP 協(xié)議

• 網(wǎng)絡(luò)模型

• UDP / TCP 協(xié)議

? 操作系統(tǒng)

• 進(jìn)程、線程

• 進(jìn)程 / 線程間通訊方式

• 進(jìn)程調(diào)度算法

• 進(jìn)程 / 線程狀態(tài)

• 死鎖

• 內(nèi)存管理

軟件開發(fā)基礎(chǔ)

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

• 單例模式

• 代理模式

• 工廠模式

• 裝飾者模式

• 觀察者模式

• 策略模式

• 門面模式

?? Git 版本控制

• 常用命令

? Linux 服務(wù)器

• 常用命令

? 正則表達(dá)式

三、前端工程化

• ?? 描述：前端工程化是使用軟件工程的技術(shù)和方法來進(jìn)行前端的開發(fā)流程、技術(shù)、工具、經(jīng)驗(yàn)等規(guī)范化、標(biāo)準(zhǔn)化，其主要目的為了提高開發(fā)過程中的開發(fā)效率，減少不必要的重復(fù)工作時(shí)間。

• ?? 資源

• 什么是前端工程化？https://www.zhihu.com/question/433854153/answer/1713597311

• ?? 目標(biāo)：至少學(xué)會(huì)一門主流的前端開發(fā)框架（Vue / React），并配合腳手架、組件庫(kù)、工具等從 0 開始獨(dú)立搭建并開發(fā)一個(gè)完整的前端網(wǎng)站，可以試著仿一些知名站點(diǎn)。要求遵循企業(yè)開發(fā)規(guī)范，將項(xiàng)目代碼提交到代碼倉(cāng)庫(kù)中，并獨(dú)立發(fā)布上線，供他人訪問。此外，建議抓住機(jī)會(huì)參與一些團(tuán)隊(duì)項(xiàng)目，感受團(tuán)隊(duì)開發(fā)模式和前端工程化的優(yōu)勢(shì)。

?? 研發(fā)流程

1. 技術(shù)選型

2. 初始化

3. 開發(fā)

4. 本地測(cè)試

5. 代碼提交

6. 編譯、打包、構(gòu)建

7. 部署

8. 集成測(cè)試

9. 發(fā)布上線

10. 監(jiān)控運(yùn)維

?? 代碼托管

• ?? 描述：集中存儲(chǔ)、備份你的代碼，還能和團(tuán)隊(duì)成員協(xié)作開發(fā)。

• ?? GitHub

• Gitee

• GitLab

? Node.JS

• ?? 描述：一個(gè)開源與跨平臺(tái)的 JavaScript 運(yùn)行時(shí)環(huán)境。 它是一個(gè)可用于幾乎任何項(xiàng)目的流行工具！

• ?? 資源

• Node.js 官方教程：http://nodejs.cn/learn

• Node.js 入門：https://cnodejs.org/getstart

?? 包管理

• ?? 描述：用于安裝 Node.js 的擴(kuò)展、工具等。

• ?? npm

• ?? yarn

• ? bower

• ? npx

開發(fā)框架

• Express

• Koa

• Egg

開發(fā)框架

• ?? 描述：解決特定的問題,提高開發(fā)效率、簡(jiǎn)化我們的代碼復(fù)雜度。

?? CSS 框架

• ? BootStrap

• ?? Tailwind CSS

?? JavaScript 框架

?? Vue

• Vue Router

• Vuex

?? React

• React DOM

• React Router

• Redux

• MobX

• React Hooks

? Angular

• RxJS

• NgRx

? Svelte

? UmiJS

封裝庫(kù)

?? 組件庫(kù)

• ? LayUI

• ?? ElementUI（Vue）

• ? VantUI（Vue）

• ?? Ant Design（React）

• Material UI

數(shù)據(jù)可視化

• ? AntV

• Apache ECharts

• HighCharts

• D3.js

組件（插件）

• 富文本編輯器

• 彈窗

• 輪播圖

工具庫(kù)

• ? jQuery

• ? Lodash

• ? Axios

• 時(shí)間處理 Moment.js

動(dòng)效庫(kù)

• ? Animate.css

• Ant Motion

字體圖標(biāo)庫(kù)

• ?? IconFont

• IconPark

• Font Awesome

?? 腳手架

• ?? 描述：快速生成新項(xiàng)目的目錄模板，提升開發(fā)效率和開發(fā)舒適性。

• ?? 資源：https://www.jianshu.com/p/25ce8cf2e6a7

• Vue CLI

• create-react-app

• ? Yeoman

?? 前端架構(gòu)設(shè)計(jì)

• ?? 描述：一系列工具和流程的集合，旨在提升前端代碼的質(zhì)量，并實(shí)現(xiàn)高效可持續(xù)的工作流。

• 模塊化

• 組件化

• ? MVVM

• 設(shè)計(jì)原則

• ?? SPA 單頁(yè)應(yīng)用

• ?? 多頁(yè)應(yīng)用

• ? 前端路由

• PWA

• 有損服務(wù)

? 服務(wù)端渲染

• ?? 描述：在服務(wù)端渲染 HTML 頁(yè)面的模式。

• ?? 資源：https://www.zhihu.com/question/379563505

• Next.js（React）

• Nuxt.js（Vue）

• ? Universal（Angular）

BFF

• ?? 描述：Backend For Frontend（服務(wù)于前端的后端），就是服務(wù)器設(shè)計(jì) API 時(shí)會(huì)考慮前端的使用，并在服務(wù)端直接進(jìn)行業(yè)務(wù)邏輯的處理。

• ?? 資源：https://www.jianshu.com/p/eb1875c62ad3

• GraphQL

? 微前端

• ?? 描述：將前端應(yīng)用分解成一些更小、更簡(jiǎn)單的能夠獨(dú)立開發(fā)、測(cè)試、部署的小塊，從而解決龐大的一整塊后端服務(wù)帶來的變更與擴(kuò)展方面的限制。

• ?? 資源：https://zhuanlan.zhihu.com/p/96464401

• qiankun

• single-spa

CSS in JS

• ?? 描述：用 JavaScript 來寫 CSS。

• ?? 資源：http://www.ruanyifeng.com/blog/2017/04/css_in_js.html

• 內(nèi)聯(lián)樣式

• 聲明樣式

• 引入樣式

?? CSS 模塊化

• ?? CSS Modules

• ? styled-components

• ? Styled JSX

• Emotion

? 開發(fā)調(diào)試

• ?? 描述：本地開發(fā)時(shí)熱更新，提升開發(fā)效率。

• webpack-dev-server

• serve

內(nèi)網(wǎng)穿透

• ?? 描述：將內(nèi)網(wǎng)外網(wǎng)通過 nat 隧道打通，讓內(nèi)網(wǎng)的網(wǎng)站、數(shù)據(jù)讓外網(wǎng)可以訪問。

• Ngrok

• NATAPP

?? CSS 預(yù)編譯

• ?? 描述：使用新的擴(kuò)展語(yǔ)言以增強(qiáng) CSS 的能力，并通過預(yù)編譯的方式將其轉(zhuǎn)換為瀏覽器認(rèn)識(shí)的 CSS 代碼。

• ?? SASS

• ? PostCSS

• Stylus

• ? LESS

測(cè)試

測(cè)試分類

• ?? UT 單元測(cè)試

• SIT 系統(tǒng)集成測(cè)試

• E2E 端到端測(cè)試

• UAT 用戶驗(yàn)收測(cè)試

? Mock

• ?? 描述：通過隨機(jī)數(shù)據(jù)，模擬各種場(chǎng)景，增加單元測(cè)試的真實(shí)性。

• Mock.js

? 測(cè)試框架

• ? Jest

• Enzyme

• ? Puppeteer（Headless Browser）

• Mocha

• Jasmine

? 代碼質(zhì)量

開發(fā)規(guī)范

• ?? 描述：依照規(guī)范寫出的代碼會(huì)更加合理。

• ?? 資源：Airbnb 代碼規(guī)范 https://github.com/BingKui/javascript-zh

• CSS Style Guide

• JavaScript Style Guide

類型校驗(yàn)

• TypeScript

代碼檢查

• ESLint

• StyleLint

代碼風(fēng)格

• ?? 描述：根據(jù)配置自動(dòng)格式化代碼，統(tǒng)一格式。

• Prettier

提交規(guī)范

• 約定式提交

提交檢查

• ?? 描述：在提交代碼時(shí)觸發(fā)一些操作，比如檢查代碼的風(fēng)格等。

• pre-commit

• husky

構(gòu)建工具

自動(dòng)化構(gòu)建

• ?? 描述：按照配置好的流程自動(dòng)打包構(gòu)建項(xiàng)目，提高團(tuán)隊(duì)的開發(fā)效率，降低項(xiàng)目的維護(hù)難度。

• Gulp

• ? npm script

• Grunt

打包工具

• ?? 描述：將各種零散的?? 資源文件打包為可在瀏覽器等環(huán)境運(yùn)行的代碼。

• ?? Webpack

• ? Rollup

• ? Vite

• Parcel

• Snowpack

CI / CD

• ?? 描述：通過在應(yīng)用開發(fā)階段引入自動(dòng)化來頻繁向客戶交付應(yīng)用。

• GitLab CI

• ? Jenkins

部署

?? Web 服務(wù)器

?? Nginx

• ?? 描述：高性能的 HTTP 和反向代理 web 服務(wù)器。

• ?? 資源：騰訊云動(dòng)手實(shí)驗(yàn)室 https://cloud.tencent.com/developer/labs/gallery

• 反向代理

• 解決跨域

• 改寫請(qǐng)求

? Apache

容器

? Docker

• ?? 描述：容器是一個(gè)標(biāo)準(zhǔn)化的軟件單元，它將代碼及其所有依賴關(guān)系打包，以便應(yīng)用程序從一個(gè)計(jì)算環(huán)境可靠快速地運(yùn)行到另一個(gè)計(jì)算環(huán)境。Docker容器鏡像是一個(gè)輕量的獨(dú)立的可執(zhí)行的軟件包。包含程序運(yùn)行的時(shí)候所需的一切：代碼，運(yùn)行時(shí)間，系統(tǒng)工具，系統(tǒng)庫(kù)和設(shè)置。

• ?? 資源：Docker 從入門到實(shí)踐 https://vuepress.mirror.docker-practice.com/

• Dockerfile

Kubernetes

部署策略

• 全量發(fā)布

• 藍(lán)綠部署

• 滾動(dòng)發(fā)布

• 灰度發(fā)布

監(jiān)控告警

• 前端埋點(diǎn)

• 錯(cuò)誤監(jiān)控

• 性能監(jiān)控

• 行為監(jiān)控

四、前端優(yōu)化

• ?? 描述：通過分析和優(yōu)化手段，提高網(wǎng)站的性能和用戶體驗(yàn)。

• ?? 目標(biāo)：實(shí)踐前端優(yōu)化方法，從多個(gè)方面優(yōu)化自己做過的項(xiàng)目，最好能將優(yōu)化后的網(wǎng)站與原網(wǎng)站進(jìn)行對(duì)比，得到一些數(shù)據(jù)和體驗(yàn)上的明顯提升。

? 性能優(yōu)化

性能指標(biāo)

• ?? 描述：用于衡量一個(gè) Web 頁(yè)面的性能。

• ?? 資源：https://juejin.cn/post/6844904153869713416

• FP（First Paint）

• ?? 描述：從開始加載到瀏覽器首次繪制像素到屏幕上的時(shí)間，也就是頁(yè)面在屏幕上首次發(fā)生視覺變化的時(shí)間。

• FCP（First Contentful Paint）

• ?? 描述：瀏覽器首次繪制來自 DOM 的內(nèi)容的時(shí)間。

• FMP（First Meaningful Paint）

• ?? 描述：頁(yè)面的主要內(nèi)容繪制到屏幕上的時(shí)間。

• FSP（First Screen Paint）

• ?? 描述：頁(yè)面從開始加載到首屏內(nèi)容全部繪制完成的時(shí)間，用戶可以看到首屏的全部?jī)?nèi)容。

• TTI（Time to Interactive）

• ?? 描述：表示網(wǎng)頁(yè)第一次完全達(dá)到可交互狀態(tài)的時(shí)間點(diǎn)，瀏覽器已經(jīng)可以持續(xù)性的響應(yīng)用戶的輸入。

優(yōu)化手段

• 性能監(jiān)控

• Performance API

• 樣式優(yōu)化

• JavaScript 優(yōu)化

• 防抖

• 節(jié)流

• 代碼分割

• ?? 資源壓縮

• 打包優(yōu)化

• 服務(wù)器優(yōu)化

• 緩存優(yōu)化

• Service Worker

• 動(dòng)畫性能

• dns-prefetch

• Lazy loading

• 優(yōu)化啟動(dòng)性能

• 異步化

• 渲染優(yōu)化

• 網(wǎng)絡(luò)優(yōu)化

• 移動(dòng)端性能優(yōu)化

• ? CDN

• ?? 描述：內(nèi)容分發(fā)網(wǎng)絡(luò)，是構(gòu)建在現(xiàn)有網(wǎng)絡(luò)基礎(chǔ)之上的智能虛擬網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺(tái)的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率。

• ?? 資源：BootCDN https://www.bootcdn.cn/

用戶體驗(yàn)

• 設(shè)計(jì)系統(tǒng)

• 骨架屏

? 兼容性

瀏覽器兼容性

• normalize.css

• html5shiv.js

• respond.js

• Babel

• Polyfill

屏幕分辨率兼容性

跨平臺(tái)兼容性

SEO

• ?? 描述：搜索引擎優(yōu)化，利用搜索引擎的規(guī)則提高網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名。

• ?? 資源：百度搜索?? 資源平臺(tái) https://ziyuan.baidu.com/cooperateresource/index

• robots.txt

• description

• keywords

• SiteMap

• HTML 標(biāo)簽優(yōu)化

• 站內(nèi)鏈接建設(shè)

• 友情鏈接

? 安全

• ?? XSS

• CSRF

• 反爬蟲

• SQL 注入

• DDoS

五、前端生態(tài)

• ?? 描述：如今，前端領(lǐng)域的范圍越來越廣，出現(xiàn)了更多前端工程師需要了解和關(guān)注的技術(shù)。

• ?? 目標(biāo)：能用學(xué)到的前端技術(shù)去做更多的事情，比如開發(fā)個(gè)人博客、文檔網(wǎng)站、小程序、APP 等。

?? 靜態(tài)站點(diǎn)構(gòu)建

開發(fā)

• React Static

博客

• ? Gatsby.js

• ? Docusaurus

• Hugo

• Hexo

文檔

• JekyII

• ?? Docsify

• VuePress

• ? Dumi

? 大前端

?? 描述：前端技術(shù)的融合更加緊密，應(yīng)用的領(lǐng)域也更加廣泛，前端領(lǐng)域的內(nèi)容呈現(xiàn)多樣化，除了網(wǎng)站外，還可以用前端技術(shù)跨平臺(tái)開發(fā) Android、iOS、小程序、虛擬現(xiàn)實(shí)、增強(qiáng)現(xiàn)實(shí)等。

移動(dòng)應(yīng)用

• Hybrid

• WebView

• React Native

• Flutter

移動(dòng)應(yīng)用打包

• Weex

• Cordova

• Phonegap

• Ionic

桌面應(yīng)用

• Electron

• NW.js

• Proton Native

小程序

• 原生

• WebView

跨端開發(fā)框架

• ? uni-app

• ? Taro

• Flutter

• Chameleon

• Wepy

• Rax

移動(dòng)端調(diào)試

• Chrome Dev Tools

• Android Simulator

• IOS Simulator

? Serverless

• ?? 描述：一種構(gòu)建和管理基于微服務(wù)架構(gòu)的完整流程，允許你在服務(wù)部署級(jí)別而不是服務(wù)器部署級(jí)別來管理你的應(yīng)用部署，你甚至可以管理某個(gè)具體功能或端口的部署，這就能讓開發(fā)者快速迭代，更快速地開發(fā)軟件。

? 云開發(fā)

• ?? 描述：云端一體化的后端云服務(wù) ，采用 Serverless 架構(gòu)，免去了移動(dòng)應(yīng)用構(gòu)建中繁瑣的服務(wù)器搭建和運(yùn)維。同時(shí)云開發(fā)提供的靜態(tài)托管、命令行工具（CLI）、Flutter SDK 等能力降低了應(yīng)用開發(fā)的門檻。使用云開發(fā)可以構(gòu)建完整的小程序/小游戲、H5、Web、移動(dòng) App 等應(yīng)用。

• ? 騰訊云云開發(fā)

• 阿里云云開發(fā)

低代碼

• ?? 描述：無需編碼（零代碼）或通過少量代碼就可以快速生成應(yīng)用程序的開發(fā)平臺(tái)。通過可視化進(jìn)行應(yīng)用程序開發(fā)的方法，使具有不同經(jīng)驗(yàn)水平的開發(fā)人員可以通過圖形化的用戶界面，使用拖拽組件和模型驅(qū)動(dòng)的邏輯來創(chuàng)建網(wǎng)頁(yè)和移動(dòng)應(yīng)用程序。

• 騰訊云低碼

• 阿里宜搭

六、前端求職

• ?? 描述：求職是一個(gè)漫長(zhǎng)的過程，建議拉長(zhǎng)戰(zhàn)線，盡早準(zhǔn)備。

• ?? 目標(biāo)：找到理想的工作。

流程

• 2020 秋招面經(jīng)匯總：https://www.nowcoder.com/discuss/205497

簡(jiǎn)歷

• 超級(jí)簡(jiǎn)歷

面試題庫(kù)

• ?？颓岸斯こ處熋嬖噷毜洌篽ttps://www.nowcoder.com/tutorial/96/f5212664ab664984882b00635066ded2

• 前端面試每日 3+1：https://github.com/haizlin/fe-interview

• React 面試題目 & 題解：https://github.com/sudheerj/reactjs-interview-questions

面經(jīng)

• 前端面經(jīng)匯總：https://www.nowcoder.com/discuss/experience?tagId=644

面試實(shí)戰(zhàn)

• AI 模擬面試：https://www.nowcoder.com/interview/ai/cover?jobTagId=644

七、前端未來

• ?? 描述：前端未來可能的發(fā)展趨勢(shì)和熱門技術(shù)。

• ?? 目標(biāo)：關(guān)注前沿，持續(xù)進(jìn)步。

• WebAssembly

• 智能 UI

• React Server Component

• CSS Houdini

WebComponents

• HTML templates（HTML模板）

• Custom elements（自定義元素）

• Shadow DOM（影子DOM）

我的前端學(xué)習(xí)路線

雖然上面整理的學(xué)習(xí)路線知識(shí)點(diǎn)非常多，但是大家也別太擔(dān)心，其實(shí)按照一定順序和方法來學(xué)習(xí)，并不會(huì)很難，聊聊我的學(xué)習(xí)經(jīng)歷。

1. 快速入門，培養(yǎng)興趣

剛開始學(xué)習(xí)前端時(shí)，一定要以培養(yǎng)興趣、快速入門為目標(biāo)。我入門前端時(shí)，由于沒有基礎(chǔ)、啥都不懂，因此選擇在線實(shí)戰(zhàn)教程網(wǎng)站來學(xué)習(xí)，跟著教程案例一行行把代碼敲下來，實(shí)時(shí)瀏覽顯示效果，很輕松地就把 HTML、CSS、JavaScript 的語(yǔ)法基礎(chǔ)過了一遍。但是這時(shí)，我對(duì)看過的知識(shí)點(diǎn)沒有什么印象，基本是看了就忘，當(dāng)我想要自己寫一個(gè)網(wǎng)站，也根本無從下手。

于是，我開始試著死記硬背代碼，結(jié)果發(fā)現(xiàn)背了之后還是不會(huì)寫。那干脆一不做二不休，直接打開編輯器和教程網(wǎng)站，把之前在線實(shí)戰(zhàn)時(shí)敲過的代碼復(fù)制粘貼到編輯器中，然后再修改保存，到瀏覽器中打開文件。這樣雖然要在編輯器和瀏覽器中來回切換，但起碼能看到自己的網(wǎng)頁(yè)文件運(yùn)行的效果了。后來，我利用瀏覽器開發(fā)者工具提升了自己開發(fā)網(wǎng)站的調(diào)試效率，敲出的代碼達(dá)不到滿意的效果時(shí)，就再去查，再改，再瀏覽，最后終于完成了一個(gè)留言板網(wǎng)站！

通過這件事，我明白了一個(gè)道理，既然記不住知識(shí)，那就先別強(qiáng)行記憶，上手多寫，忘了就去查不就好了？不要擔(dān)心自己知識(shí)不夠做不出來，只要你去試，都一定能實(shí)現(xiàn)。

2. 多看多寫，鞏固基礎(chǔ)

在這種操作下，我雖然能使用基礎(chǔ)三件套開發(fā)簡(jiǎn)易網(wǎng)站了，但做的很慢，還老出問題。于是，我開始完整地看了幾本前端入門和項(xiàng)目實(shí)戰(zhàn)書籍，有三件套入門的，也有響應(yīng)式網(wǎng)站設(shè)計(jì)的，還有 JavaScript 綜合講解的，以及一套完整的視頻教程，通過這些來復(fù)習(xí)鞏固之前學(xué)過的知識(shí)，打好了基礎(chǔ)，并且了解了更多實(shí)戰(zhàn)教程上沒見到的知識(shí)。

看書和視頻的過程中，我跟著做了幾個(gè)簡(jiǎn)易的網(wǎng)站，也是邊看邊做。在這之后，我發(fā)現(xiàn)自己漸漸地能夠脫離文檔來寫網(wǎng)站了！

3. 框架學(xué)習(xí)，學(xué)以致用

但是，總感覺開發(fā)網(wǎng)站時(shí)，什么都要自己寫，重復(fù)的代碼寫一大堆，很麻煩。于是，我試著上網(wǎng)搜了解決這些問題的方法，發(fā)現(xiàn)可以用組件庫(kù)減少重復(fù)編寫 HTML 和 CSS 代碼，于是學(xué)了 LayUI，其實(shí)和之前一樣的，就是打開官網(wǎng)找到要用的組件，然后復(fù)制到項(xiàng)目中修改就行了，寫的多了竟然還真記住了一些（雖然這個(gè)沒必要記）。

界面和樣式代碼簡(jiǎn)化了，但是 JavaScript 寫的我依舊頭疼。于是我決定進(jìn)入下一個(gè)階段的學(xué)習(xí)，當(dāng)時(shí)先看了本書叫《鋒利的 jQuery》來學(xué)習(xí) jQuery，學(xué)會(huì)之后使用它趁熱打鐵做了幾個(gè)網(wǎng)站，發(fā)現(xiàn)的確能大大簡(jiǎn)化繁瑣的 JavaScript DOM 操作，讓我嘗到了甜頭，又有了繼續(xù)學(xué)習(xí)前端的動(dòng)力。

在那之后大概半年，我開始學(xué)習(xí)主流前端框架 Vue，也是跟著視頻教程學(xué)，并且結(jié)合 ElementUI 組件庫(kù)開發(fā)了一個(gè)響應(yīng)式網(wǎng)站。不得不說，習(xí)慣了用原生 JavaScript 和 jQuery 開發(fā)后，再去用 Vue 開發(fā)，真的是爽飛了，小有成就感。

4. 根據(jù)需要，自主學(xué)習(xí)

在那之后，我就是通過不斷地做項(xiàng)目來積累經(jīng)驗(yàn)，既然編程知識(shí)太多學(xué)不完，那我就隨需隨學(xué)，逐漸拓寬自己的知識(shí)面。舉個(gè)例子，我要做一個(gè)移動(dòng)端 H5 頁(yè)面，那就去搜 Vue 的移動(dòng)端組件庫(kù)，學(xué)會(huì)了 MintUI、VantUI 等；項(xiàng)目中要處理日期，那我就去搜日期處理庫(kù)，學(xué)會(huì)了 Moment.js；項(xiàng)目重復(fù)文件和代碼太多，我就去網(wǎng)上搜一些組件化、模塊化的最佳實(shí)踐；項(xiàng)目代碼太大、加載太慢，我就去網(wǎng)上搜一些前端壓縮、性能優(yōu)化的方式；要把開發(fā)好的項(xiàng)目變成 APP，那我就去網(wǎng)上搜到了 Cordova 等打包工具；跟其他同學(xué)一起做項(xiàng)目時(shí)比較混亂、開發(fā)效率低，我就去搜了一些代碼規(guī)范、前端工程化等；遇到 Bug 時(shí)，也是自己去網(wǎng)上搜索解決方案，并且還要看看有沒有知識(shí)點(diǎn)是我遺漏的，我會(huì)再去彌補(bǔ)學(xué)習(xí)。通過不斷實(shí)踐、不斷遇到問題和自主解決問題，我始終保持著學(xué)習(xí)的積極性，學(xué)到了越來越多前端的知識(shí)，并通過歸納總結(jié)來加深印象。

5. 漸入佳境，拓寬視野

在那之后，我學(xué)前端技術(shù)非?？炝?，像 React、TypeScript、Redux、Dva、Umi、Lerna 等等都隨用隨學(xué)，隨學(xué)隨用。此外，我不僅僅關(guān)注前端網(wǎng)頁(yè)開發(fā)本身，還同時(shí)關(guān)注前端的生態(tài)和發(fā)展，學(xué)習(xí)了微前端、Serverless、云開發(fā)、低代碼等技術(shù)，因此個(gè)人的能力提升也很大。如今在鵝廠工作中也是，面對(duì)各種不同技術(shù)棧的前端項(xiàng)目，我都能迎難而上，畢竟不會(huì)就學(xué)嘛！

哦，寫的漸入佳境，我都忘了，自己是一名后端工程師，還擱這兒吹牛逼呢（ 所以本路線難免會(huì)有不專業(yè)的地方，請(qǐng)大家見諒~

6. 總結(jié)

總結(jié)一下，學(xué)前端的路線其實(shí)就一句話：基礎(chǔ)三件套 => 鞏固基礎(chǔ) => 學(xué)習(xí)框架 => 多做項(xiàng)目 => 按需學(xué)習(xí) => 拓寬視野。還有一個(gè)學(xué)任何編程技術(shù)都要注意的點(diǎn)，全程多敲代碼！多敲代碼！多敲代碼！

尾聲 - 持續(xù)學(xué)習(xí)

優(yōu)秀前端人的特質(zhì)

• 深厚的功底

• 良好的編碼習(xí)慣

• 發(fā)現(xiàn)問題的洞察力

• 思維靈活，善于思考

• 追求技術(shù)，緊跟前沿

• 有創(chuàng)造力，有行動(dòng)力

• 追求用戶體驗(yàn)

• 時(shí)刻保持好奇

• 全棧意識(shí)

• 解決問題的能力強(qiáng)

• 懂得合作和高效溝通

• 重視工作，同樣重視生活

• 責(zé)任心和全局觀

• 個(gè)人的進(jìn)步能帶動(dòng)團(tuán)隊(duì)的進(jìn)步

學(xué)習(xí)資源

• 編程導(dǎo)航（包含以下所有資源，強(qiáng)烈推薦 ??）：https://www.code-nav.cn

• freeCodecamp 在線編程：https://learn.freecodecamp.one/

• 阿里云前端實(shí)戰(zhàn)學(xué)習(xí)：https://edu.aliyun.com/roadmap/frontend

• W3Cschool 編程入門實(shí)戰(zhàn)：https://www.w3cschool.cn/codecamp/

• 騰訊云動(dòng)手實(shí)驗(yàn)室：https://cloud.tencent.com/developer/labs/gallery

• pink老師前端入門教程：https://www.bilibili.com/video/BV14J4114768

• MDN 前端文檔：https://developer.mozilla.org/zh-CN

• Node.js 入門：https://cnodejs.org/getstart

• 前端清單：https://cheatsheets.devtool.tech/

• 前端小課：https://lefex.github.io/

• 被刪的前端游樂場(chǎng)：http://www.godbasin.com/

• 《ES6 入門教程》：https://es6.ruanyifeng.com/

• 谷歌 Web 開發(fā)者：https://developers.google.com/web

• JavaScript 明星項(xiàng)目：https://risingstars.js.org/2020/zh

• Best of JS：https://bestofjs.org/

• Codewars：https://www.codewars.com/?language=javascript

• Vue.js examples：https://vuejsexamples.com/

前端資訊

• 掘金資訊：https://juejin.cn/news

• InfoQ：https://www.infoq.cn/topic/Front-end

• daily.dev：https://daily.dev/

技術(shù)博客

• 掘金：https://juejin.cn/frontend

• 騰訊前端 IMWEB：http://imweb.io

• 騰訊 Web 前端團(tuán)隊(duì) Alloy Team：http://www.alloyteam.com

• 淘寶前端團(tuán)隊(duì)：http://taobaofed.org

• 百度 Web 前端研發(fā)部：http://fex.baidu.com

• 京東凹凸實(shí)驗(yàn)室：https://aotu.io

• 360 奇舞團(tuán)：https://75team.com

• 七牛團(tuán)隊(duì)技術(shù)博客：http://blog.qiniu.com

• 有贊技術(shù)團(tuán)隊(duì)：https://tech.youzan.com/tag/front-end/

• 百度 EFE Tech：https://efe.baidu.com/

• css-tricks：https://css-tricks.com/archives

• web.dev：https://web.dev/blog/

學(xué)習(xí)要點(diǎn)

• 前期學(xué)習(xí)以培養(yǎng)興趣為主，不要過于追求深層理解。

• 前端學(xué)習(xí)不能靠死記硬背，要多敲代碼、多做項(xiàng)目實(shí)踐。

• 不要急于求成，踏實(shí)積累才是硬道理。

在我的公眾號(hào)【程序員魚皮】后臺(tái)回復(fù) “前端路線” 領(lǐng)取路線圖 + 在線網(wǎng)站。

大家沖鴨！

如果覺得有幫助，求朋友們 點(diǎn)贊 支持下，給俺點(diǎn)創(chuàng)作的動(dòng)力 ??

您好，我是魚皮，98 年生，有野心的天蝎座，20 屆本科畢業(yè)加入 騰訊，從事全棧應(yīng)用開發(fā)，同時(shí)也是 騰訊云開發(fā)高級(jí)布道師 。

我熱愛學(xué)習(xí)和分享編程技術(shù)，在公眾號(hào)、抖音、B 站、知乎、GitHub 等多個(gè)平臺(tái)創(chuàng)作（都叫 “程序員魚皮”），全網(wǎng)累計(jì)收獲近 20w 粉絲的關(guān)注。

我熟悉多種編程語(yǔ)言和技術(shù)棧，包括但不限于 Java 后端、前端、小程序開發(fā)，在校期間就帶工作室建設(shè)了幾十個(gè)校園網(wǎng)站，以 專業(yè)第一 的成績(jī)拿過國(guó)家獎(jiǎng)學(xué)金、挑戰(zhàn)杯學(xué)術(shù)競(jìng)賽國(guó)獎(jiǎng)、上海市優(yōu)秀畢業(yè)生，出版過區(qū)塊鏈教材，也曾有過字節(jié)跳動(dòng)、騰訊等三家公司的實(shí)習(xí)經(jīng)歷，甚至還有段創(chuàng)業(yè)經(jīng)歷，并成功積分落戶上海。

此外，我獨(dú)立開發(fā)了【編程導(dǎo)航】全棧項(xiàng)目（ https://www.code-nav.cn ），已經(jīng)幫助上萬(wàn)名小伙伴找到優(yōu)質(zhì)編程學(xué)習(xí)資源！

感謝大家的關(guān)注~