魚(yú)皮怒肝【史上最貼心】前端學(xué)習(xí)路線！
這份學(xué)習(xí)路線并不完美，也不會(huì)有最終形態(tài)，正如前端不可預(yù)見(jiàn)、永無(wú)止境的未來(lái)。
大家好，我是魚(yú)皮，肝了好幾天，終于在今天晚上 12 點(diǎn)前完成了！
是不是 史上最貼心 的前端學(xué)習(xí)路線，有沒(méi)有幫助，我聽(tīng)大家的~
?? + ?? = ????
圖片長(zhǎng)到放不出了。感覺(jué)要被勸退？不用擔(dān)心，接著往下看。
在公眾號(hào)【程序員魚(yú)皮】后臺(tái)回復(fù) “前端路線” 領(lǐng)取路線圖。
特點(diǎn)
一份全面的前端知識(shí)點(diǎn)大梳理和匯總 分階段學(xué)習(xí)，每個(gè)階段給出學(xué)習(xí)目標(biāo) 使用符號(hào)對(duì)知識(shí)點(diǎn)的重要程度做了區(qū)分，按需學(xué)習(xí) 知識(shí)點(diǎn)附有描述和資源鏈接 提供一份清晰的個(gè)人順序?qū)W習(xí)路線方法 提供大量?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)
? 一般沒(méi)必要學(xué)習(xí)
?? 描述
?? 資源
?? 目標(biāo)
大綱
前言 - 學(xué)編程需要的特質(zhì) 前端學(xué)習(xí)七階段 前端入門(mén) 鞏固基礎(chǔ) 前端工程化 前端優(yōu)化 前端生態(tài) 前端求職 前端未來(lái) 我的前端學(xué)習(xí)路線 尾聲 - 持續(xù)學(xué)習(xí)
前言 - 學(xué)編程需要的特質(zhì)
相信自己有能力，那么你就真的會(huì)有！
興趣 堅(jiān)持 付出 心態(tài)
一、前端入門(mén)
?? 描述：學(xué)習(xí)前端基礎(chǔ)三件套，建議從實(shí)戰(zhàn)開(kāi)始，邊學(xué)邊練，培養(yǎng)興趣，快速入門(mén)。
?? 資源
freeCodecamp 在線編程：https://learn.freecodecamp.one/ 阿里云前端實(shí)戰(zhàn)學(xué)習(xí)：https://edu.aliyun.com/roadmap/frontend W3Cschool 編程入門(mén)實(shí)戰(zhàn)：https://www.w3cschool.cn/codecamp/ pink老師前端入門(mén)教程：https://www.bilibili.com/video/BV14J4114768 ?? 目標(biāo)：了解和實(shí)踐各語(yǔ)言的基礎(chǔ)語(yǔ)法，并能使用開(kāi)發(fā)工具來(lái)獨(dú)立開(kāi)發(fā)一個(gè)留言板網(wǎng)站。
?? 開(kāi)發(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 畫(huà)布 ? 內(nèi)聯(lián) SVG 本地存儲(chǔ) Web Workers 應(yīng)用緩存（Cache Manifest） 無(wú)障礙
?? 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)畫(huà) 過(guò)渡 漸變 背景 邊框 圓角 字體 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 入門(mén)教程 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ī)、軟件開(kāi)發(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)開(kāi)發(fā)做準(zhǔn)備。
前端基礎(chǔ)知識(shí)
? 互聯(lián)網(wǎng)
?? 域名
?? DNS
?? 服務(wù)器
? 瀏覽器
瀏覽器 DOM 事件流 / 事件委托 ?? 瀏覽器加載順序 ?? 瀏覽器渲染過(guò)程 瀏覽器事件循環(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)求過(guò)程 常見(jiàn) HTTP 協(xié)議 ?? HTTP 請(qǐng)求類別 ?? 常見(jiàn)狀態(tài)碼 WebSocket ?? Cookie Session ?? HTTPS
計(jì)算機(jī)基礎(chǔ)
? 算法和數(shù)據(jù)結(jié)構(gòu)
?? 時(shí)間 / 空間復(fù)雜度分析
數(shù)據(jù)結(jié)構(gòu)
數(shù)組 字符串 隊(duì)列 棧 鏈表 集合 哈希表 二叉樹(shù) 算法
排序 雙指針 查找 分治 動(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)存管理
軟件開(kāi)發(fā)基礎(chǔ)
? 設(shè)計(jì)模式
單例模式 代理模式 工廠模式 裝飾者模式 觀察者模式 策略模式 門(mén)面模式
?? Git 版本控制
常用命令
? Linux 服務(wù)器
常用命令
? 正則表達(dá)式
三、前端工程化
?? 描述：前端工程化是使用軟件工程的技術(shù)和方法來(lái)進(jìn)行前端的開(kāi)發(fā)流程、技術(shù)、工具、經(jīng)驗(yàn)等規(guī)范化、標(biāo)準(zhǔn)化，其主要目的為了提高開(kāi)發(fā)過(guò)程中的開(kāi)發(fā)效率，減少不必要的重復(fù)工作時(shí)間。
?? 資源
什么是前端工程化？https://www.zhihu.com/question/433854153/answer/1713597311 ?? 目標(biāo)：至少學(xué)會(huì)一門(mén)主流的前端開(kāi)發(fā)框架（Vue / React），并配合腳手架、組件庫(kù)、工具等從 0 開(kāi)始獨(dú)立搭建并開(kāi)發(fā)一個(gè)完整的前端網(wǎng)站，可以試著仿一些知名站點(diǎn)。要求遵循企業(yè)開(kāi)發(fā)規(guī)范，將項(xiàng)目代碼提交到代碼倉(cāng)庫(kù)中，并獨(dú)立發(fā)布上線，供他人訪問(wèn)。此外，建議抓住機(jī)會(huì)參與一些團(tuán)隊(duì)項(xiàng)目，感受團(tuán)隊(duì)開(kāi)發(fā)模式和前端工程化的優(yōu)勢(shì)。
?? 研發(fā)流程
技術(shù)選型 初始化 開(kāi)發(fā) 本地測(cè)試 代碼提交 編譯、打包、構(gòu)建 部署 集成測(cè)試 發(fā)布上線 監(jiān)控運(yùn)維
?? 代碼托管
?? 描述：集中存儲(chǔ)、備份你的代碼，還能和團(tuán)隊(duì)成員協(xié)作開(kāi)發(fā)。
?? GitHub
Gitee
GitLab
? Node.JS
?? 描述：一個(gè)開(kāi)源與跨平臺(tái)的 JavaScript 運(yùn)行時(shí)環(huán)境。它是一個(gè)可用于幾乎任何項(xiàng)目的流行工具！ ?? 資源 Node.js 官方教程：http://nodejs.cn/learn Node.js 入門(mén)：https://cnodejs.org/getstart
?? 包管理
?? 描述：用于安裝 Node.js 的擴(kuò)展、工具等。
?? npm
?? yarn
? bower
? npx
開(kāi)發(fā)框架
Express Koa Egg
開(kāi)發(fā)框架
?? 描述：解決特定的問(wèn)題,提高開(kāi)發(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)目的目錄模板，提升開(kāi)發(fā)效率和開(kāi)發(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ú)立開(kāi)發(fā)、測(cè)試、部署的小塊，從而解決龐大的一整塊后端服務(wù)帶來(lái)的變更與擴(kuò)展方面的限制。
?? 資源：https://zhuanlan.zhihu.com/p/96464401
qiankun
single-spa
CSS in JS
?? 描述：用 JavaScript 來(lái)寫(xiě) CSS。
?? 資源：http://www.ruanyifeng.com/blog/2017/04/css_in_js.html
內(nèi)聯(lián)樣式
聲明樣式
引入樣式
?? CSS 模塊化
?? CSS Modules ? styled-components ? Styled JSX Emotion
? 開(kāi)發(fā)調(diào)試
?? 描述：本地開(kāi)發(fā)時(shí)熱更新，提升開(kāi)發(fā)效率。
webpack-dev-server
serve
內(nèi)網(wǎng)穿透
?? 描述：將內(nèi)網(wǎng)外網(wǎng)通過(guò) nat 隧道打通，讓內(nèi)網(wǎng)的網(wǎng)站、數(shù)據(jù)讓外網(wǎng)可以訪問(wèn)。
Ngrok
NATAPP
?? CSS 預(yù)編譯
?? 描述：使用新的擴(kuò)展語(yǔ)言以增強(qiáng) CSS 的能力，并通過(guò)預(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
?? 描述：通過(guò)隨機(jī)數(shù)據(jù)，模擬各種場(chǎng)景，增加單元測(cè)試的真實(shí)性。
Mock.js
? 測(cè)試框架
? Jest
Enzyme
? Puppeteer（Headless Browser）
Mocha
Jasmine
? 代碼質(zhì)量
開(kāi)發(fā)規(guī)范
?? 描述：依照規(guī)范寫(xiě)出的代碼會(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ì)的開(kāi)發(fā)效率，降低項(xiàng)目的維護(hù)難度。
Gulp
? npm script
Grunt
打包工具
?? 描述：將各種零散的?? 資源文件打包為可在瀏覽器等環(huán)境運(yùn)行的代碼。
?? Webpack
? Rollup
? Vite
Parcel
Snowpack
CI / CD
?? 描述：通過(guò)在應(yīng)用開(kāi)發(fā)階段引入自動(dòng)化來(lái)頻繁向客戶交付應(yīng)用。 GitLab CI ? Jenkins
部署
?? Web 服務(wù)器
?? Nginx
?? 描述：高性能的 HTTP 和反向代理 web 服務(wù)器。
?? 資源：騰訊云動(dòng)手實(shí)驗(yàn)室 https://cloud.tencent.com/developer/labs/gallery
反向代理
解決跨域
改寫(xiě)請(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 從入門(mén)到實(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)化
?? 描述：通過(guò)分析和優(yōu)化手段，提高網(wǎng)站的性能和用戶體驗(yàn)。
?? 目標(biāo)：實(shí)踐前端優(yōu)化方法，從多個(gè)方面優(yōu)化自己做過(guò)的項(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）
?? 描述：從開(kāi)始加載到瀏覽器首次繪制像素到屏幕上的時(shí)間，也就是頁(yè)面在屏幕上首次發(fā)生視覺(jué)變化的時(shí)間。 FCP（First Contentful Paint）
?? 描述：瀏覽器首次繪制來(lái)自 DOM 的內(nèi)容的時(shí)間。 FMP（First Meaningful Paint）
?? 描述：頁(yè)面的主要內(nèi)容繪制到屏幕上的時(shí)間。 FSP（First Screen Paint）
?? 描述：頁(yè)面從開(kāi)始加載到首屏內(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)畫(huà)性能
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ù)器，通過(guò)中心平臺(tái)的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問(wèn)響應(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 反爬蟲(chóng) SQL 注入 DDoS
五、前端生態(tài)
?? 描述：如今，前端領(lǐng)域的范圍越來(lái)越廣，出現(xiàn)了更多前端工程師需要了解和關(guān)注的技術(shù)。
?? 目標(biāo)：能用學(xué)到的前端技術(shù)去做更多的事情，比如開(kāi)發(fā)個(gè)人博客、文檔網(wǎng)站、小程序、APP 等。
?? 靜態(tài)站點(diǎn)構(gòu)建
開(kāi)發(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)開(kā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
跨端開(kāi)發(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í)別來(lái)管理你的應(yīng)用部署，你甚至可以管理某個(gè)具體功能或端口的部署，這就能讓開(kāi)發(fā)者快速迭代，更快速地開(kāi)發(fā)軟件。
? 云開(kāi)發(fā)
?? 描述：云端一體化的后端云服務(wù) ，采用 Serverless 架構(gòu)，免去了移動(dòng)應(yīng)用構(gòu)建中繁瑣的服務(wù)器搭建和運(yùn)維。同時(shí)云開(kāi)發(fā)提供的靜態(tài)托管、命令行工具（CLI）、Flutter SDK 等能力降低了應(yīng)用開(kāi)發(fā)的門(mén)檻。使用云開(kāi)發(fā)可以構(gòu)建完整的小程序/小游戲、H5、Web、移動(dòng) App 等應(yīng)用。
? 騰訊云云開(kāi)發(fā)
阿里云云開(kāi)發(fā)
低代碼
?? 描述：無(wú)需編碼（零代碼）或通過(guò)少量代碼就可以快速生成應(yīng)用程序的開(kāi)發(fā)平臺(tái)。通過(guò)可視化進(jìn)行應(yīng)用程序開(kāi)發(fā)的方法，使具有不同經(jīng)驗(yàn)水平的開(kāi)發(fā)人員可以通過(guò)圖形化的用戶界面，使用拖拽組件和模型驅(qū)動(dòng)的邏輯來(lái)創(chuàng)建網(wǎng)頁(yè)和移動(dòng)應(yīng)用程序。
騰訊云低碼
阿里宜搭
六、前端求職
?? 描述：求職是一個(gè)漫長(zhǎng)的過(guò)程，建議拉長(zhǎng)戰(zhàn)線，盡早準(zhǔn)備。
?? 目標(biāo)：找到理想的工作。
流程
2020 秋招面經(jīng)匯總：https://www.nowcoder.com/discuss/205497
簡(jiǎn)歷
超級(jí)簡(jiǎn)歷
面試題庫(kù)
牛客前端工程師面試寶典：https://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
七、前端未來(lái)
?? 描述：前端未來(lái)可能的發(fā)展趨勢(shì)和熱門(mén)技術(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í)按照一定順序和方法來(lái)學(xué)習(xí)，并不會(huì)很難，聊聊我的學(xué)習(xí)經(jīng)歷。
1. 快速入門(mén)，培養(yǎng)興趣
剛開(kāi)始學(xué)習(xí)前端時(shí)，一定要以培養(yǎng)興趣、快速入門(mén)為?? 目標(biāo)。我入門(mén)前端時(shí)，由于沒(méi)有基礎(chǔ)、啥都不懂，因此選擇在線實(shí)戰(zhàn)教程網(wǎng)站來(lái)學(xué)習(xí)，跟著教程案例一行行把代碼敲下來(lái)，實(shí)時(shí)瀏覽顯示效果，很輕松地就把 HTML、CSS、JavaScript 的語(yǔ)法基礎(chǔ)過(guò)了一遍。但是這時(shí)，我對(duì)看過(guò)的知識(shí)點(diǎn)沒(méi)有什么印象，基本是看了就忘，當(dāng)我想要自己寫(xiě)一個(gè)網(wǎng)站，也根本無(wú)從下手。
于是，我開(kāi)始試著死記硬背代碼，結(jié)果發(fā)現(xiàn)背了之后還是不會(huì)寫(xiě)。那干脆一不做二不休，直接打開(kāi)編輯器和教程網(wǎng)站，把之前在線實(shí)戰(zhàn)時(shí)敲過(guò)的代碼復(fù)制粘貼到編輯器中，然后再修改保存，到瀏覽器中打開(kāi)文件。這樣雖然要在編輯器和瀏覽器中來(lái)回切換，但起碼能看到自己的網(wǎng)頁(yè)文件運(yùn)行的效果了。后來(lái)，我利用瀏覽器開(kāi)發(fā)者工具提升了自己開(kāi)發(fā)網(wǎng)站的調(diào)試效率，敲出的代碼達(dá)不到滿意的效果時(shí)，就再去查，再改，再瀏覽，最后終于完成了一個(gè)留言板網(wǎng)站！
通過(guò)這件事，我明白了一個(gè)道理，既然記不住知識(shí)，那就先別強(qiáng)行記憶，上手多寫(xiě)，忘了就去查不就好了？不要擔(dān)心自己知識(shí)不夠做不出來(lái)，只要你去試，都一定能實(shí)現(xiàn)。
2. 多看多寫(xiě)，鞏固基礎(chǔ)
在這種操作下，我雖然能使用基礎(chǔ)三件套開(kāi)發(fā)簡(jiǎn)易網(wǎng)站了，但做的很慢，還老出問(wèn)題。于是，我開(kāi)始完整地看了幾本前端入門(mén)和項(xiàng)目實(shí)戰(zhàn)書(shū)籍，有三件套入門(mén)的，也有響應(yīng)式網(wǎng)站設(shè)計(jì)的，還有 JavaScript 綜合講解的，以及一套完整的視頻教程，通過(guò)這些來(lái)復(fù)習(xí)鞏固之前學(xué)過(guò)的知識(shí)，打好了基礎(chǔ)，并且了解了更多實(shí)戰(zhàn)教程上沒(méi)見(jiàn)到的知識(shí)。
看書(shū)和視頻的過(guò)程中，我跟著做了幾個(gè)簡(jiǎn)易的網(wǎng)站，也是邊看邊做。在這之后，我發(fā)現(xiàn)自己漸漸地能夠脫離文檔來(lái)寫(xiě)網(wǎng)站了！
3. 框架學(xué)習(xí)，學(xué)以致用
但是，總感覺(jué)開(kāi)發(fā)網(wǎng)站時(shí)，什么都要自己寫(xiě)，重復(fù)的代碼寫(xiě)一大堆，很麻煩。于是，我試著上網(wǎng)搜了解決這些問(wèn)題的方法，發(fā)現(xiàn)可以用組件庫(kù)減少重復(fù)編寫(xiě) HTML 和 CSS 代碼，于是學(xué)了 LayUI，其實(shí)和之前一樣的，就是打開(kāi)官網(wǎng)找到要用的組件，然后復(fù)制到項(xiàng)目中修改就行了，寫(xiě)的多了竟然還真記住了一些（雖然這個(gè)沒(méi)必要記）。
界面和樣式代碼簡(jiǎn)化了，但是 JavaScript 寫(xiě)的我依舊頭疼。于是我決定進(jìn)入下一個(gè)階段的學(xué)習(xí)，當(dāng)時(shí)先看了本書(shū)叫《鋒利的 jQuery》來(lái)學(xué)習(xí) jQuery，學(xué)會(huì)之后使用它趁熱打鐵做了幾個(gè)網(wǎng)站，發(fā)現(xiàn)的確能大大簡(jiǎn)化繁瑣的 JavaScript DOM 操作，讓我嘗到了甜頭，又有了繼續(xù)學(xué)習(xí)前端的動(dòng)力。
在那之后大概半年，我開(kāi)始學(xué)習(xí)主流前端框架 Vue，也是跟著視頻教程學(xué)，并且結(jié)合 ElementUI 組件庫(kù)開(kāi)發(fā)了一個(gè)響應(yīng)式網(wǎng)站。不得不說(shuō)，習(xí)慣了用原生 JavaScript 和 jQuery 開(kāi)發(fā)后，再去用 Vue 開(kāi)發(fā)，真的是爽飛了，小有成就感。
4. 根據(jù)需要，自主學(xué)習(xí)
在那之后，我就是通過(guò)不斷地做項(xiàng)目來(lái)積累經(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)化的方式；要把開(kāi)發(fā)好的項(xiàng)目變成 APP，那我就去網(wǎng)上搜到了 Cordova 等打包工具；跟其他同學(xué)一起做項(xiàng)目時(shí)比較混亂、開(kāi)發(fā)效率低，我就去搜了一些代碼規(guī)范、前端工程化等；遇到 Bug 時(shí)，也是自己去網(wǎng)上搜索解決方案，并且還要看看有沒(méi)有知識(shí)點(diǎn)是我遺漏的，我會(huì)再去彌補(bǔ)學(xué)習(xí)。通過(guò)不斷實(shí)踐、不斷遇到問(wèn)題和自主解決問(wèn)題，我始終保持著學(xué)習(xí)的積極性，學(xué)到了越來(lái)越多前端的知識(shí)，并通過(guò)歸納總結(jié)來(lái)加深印象。
5. 漸入佳境，拓寬視野
在那之后，我學(xué)前端技術(shù)非常快了，像 React、TypeScript、Redux、Dva、Umi、Lerna 等等都隨用隨學(xué)，隨學(xué)隨用。此外，我不僅僅關(guān)注前端網(wǎng)頁(yè)開(kāi)發(fā)本身，還同時(shí)關(guān)注前端的生態(tài)和發(fā)展，學(xué)習(xí)了微前端、Serverless、云開(kāi)發(fā)、低代碼等技術(shù)，因此個(gè)人的能力提升也很大。如今在鵝廠工作中也是，面對(duì)各種不同技術(shù)棧的前端項(xiàng)目，我都能迎難而上，畢竟不會(huì)就學(xué)嘛！
哦，寫(xiě)的漸入佳境，我都忘了，自己是一名后端工程師，還擱這兒吹牛逼呢（ 所以本路線難免會(huì)有不專業(yè)的地方，請(qǐng)大家見(jiàn)諒~
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)問(wèn)題的洞察力
思維靈活，善于思考
追求技術(shù)，緊跟前沿
有創(chuàng)造力，有行動(dòng)力
追求用戶體驗(yàn)
時(shí)刻保持好奇
全棧意識(shí)
解決問(wèn)題的能力強(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 編程入門(mén)實(shí)戰(zhàn)：https://www.w3cschool.cn/codecamp/ 騰訊云動(dòng)手實(shí)驗(yàn)室：https://cloud.tencent.com/developer/labs/gallery pink老師前端入門(mén)教程：https://www.bilibili.com/video/BV14J4114768 MDN 前端文檔：https://developer.mozilla.org/zh-CN Node.js 入門(mén)：https://cnodejs.org/getstart 前端清單：https://cheatsheets.devtool.tech/ 前端小課：https://lefex.github.io/ 被刪的前端游樂(lè)場(chǎng)：http://www.godbasin.com/ 《ES6 入門(mén)教程》：https://es6.ruanyifeng.com/ 谷歌 Web 開(kāi)發(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)興趣為主，不要過(guò)于追求深層理解。 前端學(xué)習(xí)不能靠死記硬背，要多敲代碼、多做項(xiàng)目實(shí)踐。 不要急于求成，踏實(shí)積累才是硬道理。
在公眾號(hào)【程序員魚(yú)皮】后臺(tái)回復(fù) “前端路線” 領(lǐng)取路線圖。
大家沖鴨！
如果覺(jué)得有幫助，求朋友們 點(diǎn)贊 + 在看 支持下，給俺點(diǎn)創(chuàng)作的動(dòng)力 ??
