前言：

前端架構(gòu)師對知識要求不僅要求有深度，還要求有廣度，同時還要對各種業(yè)務(wù)有豐富的經(jīng)驗，

我們在實際工作中往往大部分時間是在做相似的工作，技術(shù)和經(jīng)驗提升的很慢，要在短時間內(nèi)快速提升自己的技能，我們就要主動取探索學(xué)習(xí)，尤其是一些優(yōu)秀的文章，能讓我們快速的學(xué)習(xí)到精華。

最近整理下收集的前端學(xué)習(xí)資料，包含了Vue、React、Electron、服務(wù)端渲染、微前端、前端性能優(yōu)化、前端工程化、前端面試等方面的知識。這些知識既包含很多實戰(zhàn)經(jīng)驗，也包含了大量的原理。學(xué)完這些能對大家的知識和經(jīng)驗有個質(zhì)的提升。

一下是前端學(xué)習(xí)路徑圖，大家按照roadMap學(xué)習(xí)。

Vue

聊一聊 Vue3 的 9 個知識點

進階必備web前端架構(gòu)

web前端到全棧高級教程

Vue.js 核心源碼解析深入分析核心源碼透徹理解

前端全流程性能優(yōu)化實戰(zhàn)極致性能流程體驗

vue cli項目打包優(yōu)化，我能做的就這些了

【前車之鑒】Vue，你真的熟練了么？

vue-cli3 項目從搭建優(yōu)化到docker部署

手把手教你寫一個腳手架

一個合格的中級前端工程師應(yīng)該掌握的 20 個 Vue 技巧

Vue.js 開發(fā)實踐：實現(xiàn)精巧的無限加載與分頁功能

vue中Axios的封裝和API接口的管理

Web 仿 App 動畫竟然引出了“性能殺手”

Vue學(xué)習(xí)看這篇就夠了

VueSSR高階指南

「Vue實踐」武裝你的前端項目

面試題：你能寫一個Vue的雙向數(shù)據(jù)綁定嗎？

帶你五步學(xué)會Vue SSR

Vue 項目里戳中你痛點的問題及解決辦法（更新）

（4.2萬字🔥🔥🔥重啟2020）“從零到部署”Vue全棧電商應(yīng)用系列教程---正式完結(jié)

Vue中你不知道但卻很實用的黑科技

仿 vue-cli 搭建屬于自己的腳手架

帶你全面分析vue-router源碼（萬字長文）

vue插件開發(fā)、文檔書寫、github發(fā)布、npm包發(fā)布一波流

vue多頁面開發(fā)和打包的正確姿勢

Vue友最愛的10個開箱即用的開源項目

Vue源碼閱讀前必須知道javascript的基礎(chǔ)內(nèi)容

Vue-cli原理分析

前端路由簡介以及vue-router實現(xiàn)原理

三個很不錯的 Vue 資料

吃透 Vue 項目開發(fā)實踐｜16個方面深入前端工程化開發(fā)技巧《上》

Vue 3 源碼導(dǎo)讀

Vue+微前端(QianKun)落地實施和最后部署上線總結(jié)

Single-Spa + Vue Cli 微前端落地指南 + 視頻 (項目隔離遠程加載，自動引入)

面試官：自己搭建過vue開發(fā)環(huán)境嗎？

vue2 + koa2 + webpack4 的SSR之旅

基于Electron + nodejs + 小程序 實現(xiàn)彈幕小工具

Vue3 + TS + Vite2 + Electron16項目梳理

Electron + Vue3 開發(fā)跨平臺桌面應(yīng)用【從項目搭建到打包完整過程】

手把手教你 Electron + Vue 搭建前端桌面應(yīng)用

React

2021 年你應(yīng)該嘗試的 8 個 React 庫

200行代碼實現(xiàn)簡版react

Redux + React-router 的入門📖和配置👩🏾?💻教程

React服務(wù)端渲染+pm2自動化部署

【長文慎入】一文吃透 React SSR 服務(wù)端渲染和同構(gòu)原理

ReactNative 學(xué)習(xí)資源大匯集

React 開發(fā)必須知道的 34 個技巧【近1W字】

分享 50 個完整的 React Native 項目

React SSR 詳解【近 1W 字】+ 2個項目實戰(zhàn)

React路由鑒權(quán)

掘金最污的 React16.x 圖文視頻教程(2萬5千字長文-慎入)

react進階」一文吃透React高階組件(HOC)

Vue 轉(zhuǎn) React不完全指北

2020了，還不開始學(xué)react嗎？| react 入門必知必會知識點(萬字總結(jié)?)

React + TypeScript實踐

React Hooks 詳解 【近 1W 字】+ 項目實戰(zhàn)

你要的 React 面試知識點，都在這了

三千字講清TypeScript與React的實戰(zhàn)技巧

「React進階」 React全部api解讀+基礎(chǔ)實踐大全(夯實基礎(chǔ)2萬字總結(jié))

學(xué)習(xí) React.js 比你想象的要簡單

「react進階」年終送給react開發(fā)者的八條優(yōu)化建議(篇幅較長，占用20-30分鐘)

一篇文章總結(jié)redux、react-redux、redux-saga

「React18新特性」深入淺出用戶體驗大師—transition

React 中 setState 是一個宏任務(wù)還是微任務(wù)？

這可能是最通俗的 React Fiber(時間分片) 打開方式

React精髓！一篇全概括(急速)

可能是你需要的 React + TypeScript 50 條規(guī)范和經(jīng)驗

30分鐘精通React Hooks

為何我們要用 React 來寫小程序 - Taro 誕生記

你真的了解 React 生命周期嗎

適合Vue用戶的React教程，你值得擁有

「react進階」一文吃透react-hooks原理

怎樣學(xué)習(xí)React？當(dāng)然是自己動手實現(xiàn)一個React啦

高頻前端面試題匯總之React篇（下）

React Hooks 最佳實踐

圖解ES6中的React生命周期

Electron

快速入手Electron，擁有一個自己的桌面應(yīng)用

入門Electron，手把手教你編寫完整實用案例

分享這半年的 Electron 應(yīng)用開發(fā)和優(yōu)化經(jīng)驗

分享一年以來的Electron開發(fā)經(jīng)驗

Vue項目遷移Electron打包、發(fā)布、踩坑全紀(jì)錄，滿滿的血淚史！

從零到一，用 Electron 開發(fā)桌面效率工具

Electron，從玩玩具的心態(tài)開始，到打造出一款越來越優(yōu)秀的桌面客戶端產(chǎn)品 —— 一份不是「Hello Word」的吊胃口的Quick Start

Electron + Puppeteer + Robotjs 實現(xiàn)工作自動化

基于Electron + nodejs + 小程序 實現(xiàn)彈幕小工具

Vue3 + TS + Vite2 + Electron16項目梳理

Electron + Vue3 開發(fā)跨平臺桌面應(yīng)用【從項目搭建到打包完整過程】

手把手教你 Electron + Vue 搭建前端桌面應(yīng)用

想要試試Electron ，不如看看這篇爬坑總結(jié)

vite2+electron12短視頻+直播應(yīng)用|electron+swiper仿制抖音桌面版

從零使用electron搭建桌面端可視化編輯器Dooring

服務(wù)端渲染SSR

React SSR 詳解【近 1W 字】+ 2個項目實戰(zhàn)

vue2 + koa2 + webpack4 的SSR之旅

從頭開始，徹底理解服務(wù)端渲染原理(8千字匯總長文)

Vue 服務(wù)端渲染（SSR）

【長文慎入】一文吃透 React SSR 服務(wù)端渲染和同構(gòu)原理

SSR 技術(shù)概述

理解Vue SSR原理，搭建項目框架

解密Vue SSR

【萬字長文警告】從頭到尾徹底理解服務(wù)端渲染SSR原理

Vue 服務(wù)端渲染（SSR）、Nuxt.js - 從入門到實踐

帶你走近Vue服務(wù)器端渲染（VUE SSR）

Vue SSR 踩坑之旅

通過vue-cli3構(gòu)建一個SSR應(yīng)用程序

實現(xiàn)SSR服務(wù)端渲染

使用 React + Koa 從零開始一步一步的帶你開發(fā)一個 36kr SSR 案例（一）

React + Koa 實現(xiàn)服務(wù)端渲染(SSR)

深入學(xué)習(xí)SSR , NextJS 一起重構(gòu) 掘金!

基于vue-cli3 SSR 程序?qū)崿F(xiàn)熱更新功能

React SSR 服務(wù)器渲染原理解析與實踐

快速在你的vue/react應(yīng)用中實現(xiàn)ssr(服務(wù)端渲染)

實現(xiàn)基于 Nuxt.js 的 SSR 應(yīng)用

帶你五步學(xué)會Vue SSR

vivo 商城架構(gòu)升級-SSR 實戰(zhàn)篇

深入學(xué)習(xí)Vue SSR服務(wù)端渲染 用Nuxt.js打造CNode社區(qū)

一個極簡版本的 VUE SSR demo

React 中同構(gòu)（SSR）原理脈絡(luò)梳理

微前端

用微前端的方式搭建類單頁應(yīng)用

微前端入門

基于 qiankun 的微前端最佳實踐（萬字長文） - 從 0 到 1 篇

從零到一實現(xiàn)企業(yè)級微前端框架，保姆級教學(xué)

字節(jié)跳動是如何落地微前端的

關(guān)于微前端(阿里QianKun)的那點事——上線一個“微前端”逼走了2位90后

微前端-最容易看懂的微前端知識

Vue+微前端(QianKun)落地實施和最后部署上線總結(jié)

每日優(yōu)鮮供應(yīng)鏈前端團隊微前端改造

極致簡潔的微前端框架-京東MicroApp開源了

目標(biāo)是最完善的微前端解決方案 - qiankun 2.0

微前端在美團外賣的實踐

關(guān)于微前端你必須了解的三種實現(xiàn)方式

qiankun 微前端方案實踐及總結(jié)

體驗微前端（qiankun）

qiankun微前端實戰(zhàn)看這篇就夠了 - Vue項目篇

從場景倒推我們要什么樣的微前端體系

記一次 微前端 qiankun 項目 實踐 !!! 防踩坑指南

微前端與常用的微前端解決方案

Webpack 5模塊聯(lián)邦引發(fā)微前端的革命？

實施微前端的六種方式

萬字長文+圖文并茂+全面解析微前端框架 qiankun 源碼 - qiankun 篇

微前端連載 3/7：淘寶大型應(yīng)用架構(gòu)中的微前端方案

Single-Spa + Vue Cli 微前端落地指南 + 視頻 (項目隔離遠程加載，自動引入)

基于 qiankun 的微前端應(yīng)用實踐

基于qiankun落地部署微前端爬”坑“記

微前端框架 之 qiankun 從入門到源碼分析

淺談微前端在滴滴車服中的應(yīng)用實踐

微前端架構(gòu)初探以及我的前端技術(shù)盤點

前端性能優(yōu)化

設(shè)計無限滾動下拉加載，實踐高性能頁面真諦

5 分鐘擼一個前端性能監(jiān)控工具

狙殺頁面卡頓 —— Performance 指北

前端性能優(yōu)化三部曲(加載篇)

記Chrome的性能分析工具實踐

前端性能優(yōu)化之加載技術(shù)

聊一聊前端性能優(yōu)化

前端黑科技：美團網(wǎng)頁首幀優(yōu)化實踐

「前端進階」高性能渲染十萬條數(shù)據(jù)(時間分片)

「前端進階」高性能渲染十萬條數(shù)據(jù)(虛擬列表)

從 8 道面試題看瀏覽器渲染過程與性能優(yōu)化

看完離編寫高性能的JavaScript又近了一步

首頁白屏的引發(fā)的思考(一)

前端性能優(yōu)化 24 條建議

工作中如何進行前端性能優(yōu)化(21種優(yōu)化+7種定位方式)

寫給中高級前端關(guān)于性能優(yōu)化的9大策略和6大指標(biāo) | 網(wǎng)易四年實踐

寫在 2021 的前端性能優(yōu)化指南

前端性能優(yōu)化的常用手段

前端性能優(yōu)化總結(jié)

這些前端性能優(yōu)化的知識我從來不告訴別人

前端工程師面試題(性能優(yōu)化)

瀏覽器重繪(repaint)重排(reflow)與優(yōu)化[瀏覽器機制]

瀏覽器工作原理及web 性能優(yōu)化（上）

三十分鐘掌握Webpack性能優(yōu)化

揭秘 Vue.js 九個性能優(yōu)化技巧

前端性能優(yōu)化最佳實踐

網(wǎng)站性能優(yōu)化

前端工程化

前端架構(gòu)師的 git 功力，你有幾成火候？

手把手】學(xué)會VS Code"任務(wù)"神技，成為項目組最靚的崽！

給在座各位“打工人”分享33款提高工作效率的vscode“實用插件”

使用pm2自動化部署node項目

手把手帶你入門前端工程化——超詳細教程

【譯】如何在生產(chǎn)環(huán)境中部署ES2015+

腦闊疼的webpack按需加載

拋棄jenkins，如何用node從零搭建自動化部署管理平臺

實戰(zhàn)筆記：Jenkins打造強大的前端自動化工作流

如何保障前端項目的代碼質(zhì)量

手把手教你擼一個 Webpack Loader

【你應(yīng)該了解的】詳盡&全面的前端部署（從零起步，前端上線不用愁）

手摸手聊聊小程序持續(xù)集成Jenkins

前端工程化（5）：你所需要的npm知識儲備都在這了

用一次就會愛上的cli工具開發(fā)

優(yōu)雅的提交你的 Git Commit Message

Nginx與前端開發(fā)

深入淺出 Babel 上篇：架構(gòu)和原理 + 實戰(zhàn)

web前端資源文件的部署和優(yōu)化

Webpack揭秘——走向高階前端的必經(jīng)之路

webpack增量打包多頁應(yīng)用

一步步從零開始用 webpack 搭建一個大型項目

帶你深度解鎖Webpack系列(進階篇)

帶你深度解鎖Webpack系列(優(yōu)化篇)

webpack原理

不容錯過的 Babel7 知識

vue2 + koa2 + webpack4 的SSR之旅

三十分鐘掌握Webpack性能優(yōu)化

webpack詳解

Webpack + Vue 之抽離 CSS 的正確姿勢

淺談前端工程化、模塊化、組件化、自動化、規(guī)范化

前端工程化實戰(zhàn) - 企業(yè)級 CLI 開發(fā)

前端工程化體系

前端工程化實戰(zhàn) - 可配置的模板管理

Docker+Nginx+Jenkins實現(xiàn)前端自動化部署

前端項目自動化部署——超詳細教程（Jenkins、Github Actions）

前端高級進階：前端部署的發(fā)展歷程

面試

面試官求你別再問我hook了

前端開發(fā)技術(shù)面試指南及真題講解帶你入坑BAT

web企業(yè)面試題精講

一線大廠前端面試題年末大匯總

2年前端(外包經(jīng)歷) 6月部分面試記錄 （高級、資深崗位）

三十七個常見Vue面試題，背就完事了

看過 100 份前端簡歷之后，匯總一下常見的問題

2021年我的前端面試準(zhǔn)備

最新的前端大廠面經(jīng)（詳解答案）???

面試官:既然React/Vue可以用Event Bus進行組件通信,你可以實現(xiàn)下嗎?

面試題：你能寫一個Vue的雙向數(shù)據(jù)綁定嗎？

前端面試考點多？看這些文章就夠了（2019年6月更新版）

【面試篇】寒冬求職季之你必須要懂的原生JS(中)

【1 月最新】前端 100 問：能搞懂 80% 的請把簡歷給我

從 8 道面試題看瀏覽器渲染過程與性能優(yōu)化

前端工程師面試題(性能優(yōu)化)

🐮化身面試官出30+Vue面試題，超級干貨（附答案）｜牛氣沖天新年征文

面試造火箭，看下這些大廠原題

11道瀏覽器原理面試題

50道 CSS 基礎(chǔ)面試題（附答案）

(2.4w字,建議收藏)😇原生JS靈魂之問(下), 沖刺🚀進階最后一公里(附個人成長經(jīng)驗分享)

JS 原生面經(jīng)從初級到高級【近1.5W字】

(1.6w字)瀏覽器靈魂之問，請問你能接得住幾個？

14期-連肝7個晚上，總結(jié)了計算機網(wǎng)絡(luò)的知識點！（共66條）

前端高級面試題@JS篇

看完跳槽少說漲 5 K，前端面試從準(zhǔn)備到談薪完全指南（近萬字精華）

前端面試詳細知識點（附答案）

面試分享：2018阿里巴巴前端面試總結(jié) | 掘金技術(shù)征文

Vue高級面試題匯總

幾道高級前端面試題解析

如何寫出一個驚艷面試官的深拷貝?

分享收集的一大波前端面試題和答案

面試官：自己搭建過vue開發(fā)環(huán)境嗎？

前端面試之webpack篇

你要的 React 面試知識點，都在這了

?

總結(jié)

以上是生活随笔為你收集整理的web前端如何提升自我的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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