第一章、工程化場景分析
前端工程化發(fā)展歷史?
前端工程化的應(yīng)用場景?
前端工程化關(guān)鍵技術(shù)之模塊化詳解?
CommonJS規(guī)范詳解?
ESModule規(guī)范詳解?
npm+webpack原理
第二章、Webpack 源碼分析
webpack 基本使用代入?
webpack 打包文件分析?
webpack ast語法分析?
webpack
load核心機(jī)制分析?
webpack
pulgin 核心分析?
webpack 依賴模塊編譯流程?
手寫簡易webpack?
第三章、HMR原理解析——Vue-Cli核心源碼解析
核心中間件：webpack-dev-middleware實(shí)例化源碼解析
devMiddleware中間件核心處理邏輯解析
深入講解HMR實(shí)現(xiàn)原理?
hotMiddleware源碼執(zhí)行流程詳解?
HMR客戶端實(shí)現(xiàn)原理詳解
vue-cli構(gòu)建源碼流程梳理
第四章、Webpack 性能優(yōu)化
webpack性能優(yōu)化原理和目標(biāo)?
深入分析構(gòu)建速度測量插件speed-measure-webpack-plugin?
深入分析構(gòu)建體積檢測插件webpack-bundle-analyzer?
構(gòu)建性能優(yōu)化之多進(jìn)程thread-loader
分包文件拷貝和模板的自動引用
image-webpack-loader實(shí)現(xiàn)圖片5倍壓縮?
purgecss-webpack-plugin優(yōu)化css體積
第五章、前端工程化腳手架設(shè)計(jì)
深入腳手架的實(shí)現(xiàn)原理
腳手架開發(fā)流程介紹?
快速搭建腳手架和腳手架本地調(diào)試方法
腳手架參數(shù)解析方法封裝?
腳手架自動化測試流程講解和腳本開發(fā)
文件類型+權(quán)限自動化測試腳本開發(fā)
第六章、Vite 從入門到精通
Vite 概要介紹
Vite 基礎(chǔ)應(yīng)用
Vite 高級應(yīng)用
Rollup 系統(tǒng)學(xué)習(xí)
Vite 插件系統(tǒng)講解
實(shí)戰(zhàn) Vite
插件
Vite
源碼解析
第七章、JS 版數(shù)據(jù)結(jié)構(gòu)與算法
數(shù)組與對象?
棧 與隊(duì)列?
鏈表?
集合?
字典與散列?
遞歸?
樹?
二叉堆與堆排序
圖
第八章、經(jīng)典算法案例分析
動態(tài)規(guī)劃
貪心算法
回溯算法
排序搜索算法?
第九章、瀏覽器工作原理與實(shí)踐
什么是瀏覽器?
瀏覽器中的 JavaScript 執(zhí)行機(jī)制?
V8
工作原理?
瀏覽器中的頁面事件循環(huán)系統(tǒng)?
瀏覽器中的頁面?
瀏覽器中的網(wǎng)絡(luò)?
瀏覽器安全
第十章、編譯原理
計(jì)算機(jī)理論引導(dǎo)?
編譯原理概述?
編譯原理詞法分析?
編譯原理語法分析?
編譯原理語法制導(dǎo)翻譯?
編譯原理程序運(yùn)行環(huán)境
第十一章、Vue2 核心源碼分析
源碼運(yùn)行環(huán)境準(zhǔn)備?
入口打包文件分析?
vue2.6
特性分析?
全局api分析與實(shí)現(xiàn)?
數(shù)據(jù)驅(qū)動與掛載流程分析?
響應(yīng)式原理-對象依賴收集?
響應(yīng)式原理-數(shù)組依賴收集
第十二章、Vue3 核心源碼分析
源碼運(yùn)行環(huán)境準(zhǔn)備?
入口打包文件分析?
vue3.0
新增特性分析?
全局api分析與實(shí)現(xiàn)?
數(shù)據(jù)驅(qū)動分析?
組件化分析?
響應(yīng)式原理分析
第十三章、Vue常用插件原理分析與實(shí)現(xiàn)
如何實(shí)現(xiàn)前端路由vue-router?
如何如何實(shí)現(xiàn)Vuex?
常用指令v-lazy原理與實(shí)現(xiàn)?
vue如何實(shí)現(xiàn)服務(wù)端渲染
第十四章、React設(shè)計(jì)哲學(xué)與深度源碼分析
react源碼的獲取與環(huán)境搭建?
基礎(chǔ)api簡述?
Fiber
Scheduler?
組件更新機(jī)制?
dom更新機(jī)制?
suspense and
priority
第十五章、深入 React-Hooks 工作機(jī)制
什么是Hooks以及他的用法?
Hooks的定義以及執(zhí)行前后的準(zhǔn)備和重置?
useEffect和useLayoutEffect的實(shí)現(xiàn)原理和區(qū)別?
useState的實(shí)現(xiàn)原理和注意事項(xiàng)?
其他常用hook的使用與分析
第十六章、React中的 Fiber
React 中的“棧調(diào)和”（Stack Reconciler）過程是怎樣的？?
如何理解 Fiber 架構(gòu)的迭代動機(jī)與設(shè)計(jì)思想？?
剖析 Fiber 架構(gòu)下
Concurrent 模式的實(shí)現(xiàn)原理
第十七章、版本管理
SVN VS Git 優(yōu)缺點(diǎn)?
掌握Git基礎(chǔ)命令?
Git進(jìn)階命令：rebase，reset，stash?
從零配置 github 到 SSH
秘鑰克隆倉庫?
Git Flow及管理版本控制?
使用 Docker 快速搭建 gitlab 平臺?
docker-compose 集成化的
docker
命令?
gitlab 平臺與 gitea 平臺比較
gitlab 平臺管理，用戶權(quán)限控制
第十八章、運(yùn)維基礎(chǔ)
linux系統(tǒng)操作基礎(chǔ)?
docker使用與實(shí)戰(zhàn)?
了解Linux運(yùn)維相關(guān)的命令與知識?
了解私有化容器平臺搭建及使用
第十九章、自動化部署
了解CI/CD平臺CircleCI，TravisCI和Jenkins?
理解自動化/持續(xù)集成流程，升華DevOps理解?
快速搭建、配置Jenkins服務(wù)?
掌握J(rèn)enkins中的權(quán)限控制，并與gitlab進(jìn)行集成?
學(xué)習(xí)Jenkins的權(quán)限控制與插件管理系統(tǒng)?
配合Jenkins效率構(gòu)建，完成發(fā)布、構(gòu)建等工作?
實(shí)戰(zhàn)前端項(xiàng)目自動化部署
第廿章、前端“輪子”工程
組件庫思想(以組件化方式考慮UI構(gòu)建)?
封裝表單組件&需要注意的點(diǎn)(通用性、易用性)?
通用業(yè)務(wù)組件庫react +
vite模板（集成測試、格式化、日志）?
組件庫的樣式方案?
組件庫色彩設(shè)計(jì)?
基礎(chǔ)組件（按鈕、圖標(biāo)）設(shè)計(jì)?
功能組件菜單組件設(shè)計(jì)?
React與Vite項(xiàng)目配置?
vue-protable組件分析?
實(shí)現(xiàn)vue-protable組件?
虛擬列表分析與實(shí)現(xiàn)?
組件庫文檔編寫
第廿一章、Vscode 插件開發(fā)
vscode插件工作原理解析?
vscode插件api解析?
代碼提示工具 “sloth” 樹懶需求場景分析?
sloth
插件實(shí)現(xiàn)?
sloth插件發(fā)布vscode商店?
工具插件前景展望與需求定制
第廿二章、Chorme瀏覽器插件開發(fā)
Chrome插件工作原理解析?
chrome插件api解析?
圖床功能chrome插件需求分析?
sloth
插件實(shí)現(xiàn)?
工具插件前景展望與需求定制
第廿三章、Webpack 加載器與插件開發(fā)
快速定位元素代碼需求分析?
webpack自定義loader開發(fā)?
webpack自定義plugins開發(fā)?
集成發(fā)布npm平臺
第廿四章、性能優(yōu)化的指標(biāo)和工具
為什么要進(jìn)行Web性能優(yōu)化?
前端性能瓶頸分析
性能優(yōu)化常見指標(biāo)?
RAIL測量模型?
使用WebPageTest評估Web網(wǎng)站性能?
性能分析工具對比Profiler、Developertools、Performance，
LightHouse
第廿五章、渲染優(yōu)化
瀏覽器渲染原理和關(guān)鍵渲染路徑?
回流與重繪, 如何避免布局抖動?
使用FastDom?
高頻事件防抖
第廿六章、代碼優(yōu)化
JS開銷和如何縮短解析時間?
配合V8 有效優(yōu)化代碼?
函數(shù)優(yōu)化?
對象優(yōu)化?
CSS對性能的影響
第廿七章、資源優(yōu)化
資源的壓縮與合并?
圖片格式優(yōu)化?
圖片加載優(yōu)化?
字體優(yōu)化?
資源文件優(yōu)化
第廿八章、構(gòu)建優(yōu)化
webpack的依賴優(yōu)化?
基于webpack的持久化緩存?
基于webpack的應(yīng)用大小監(jiān)測與分析
第廿九章、傳輸加載優(yōu)化
啟用壓縮Gzip
啟用Keep Alive?
HTTP資源緩存?
一次性理解Service
workers技術(shù)，給網(wǎng)站提速
用流行的SSR技術(shù)給前端減負(fù)
第卅章、前端可視化
圖形學(xué)基礎(chǔ)?
可視化中的數(shù)學(xué)?
實(shí)現(xiàn)3d可視化圖表?
webgl 與 canvas繪制加速
第卅一章、cocos2d 移動端游戲開發(fā)
cocos2djs 開發(fā)環(huán)境搭建?
cocos-creatrot 工具使用?
cocos中的基本概念與使用
精靈
游戲中場景與層?
游戲中用戶事件?
粒子系統(tǒng)?
動畫與特效?
瓦片地圖?
網(wǎng)絡(luò)請求?
打包發(fā)布到web平臺?
打包發(fā)布到ios平臺?
打包發(fā)布到安卓平臺
第卅二章、web3js 前端區(qū)塊鏈入門
區(qū)款連技術(shù)簡介?
當(dāng)前區(qū)款連發(fā)展分析?
Solidity語法初探?
Web3.js
基本api使用?
搭建基于priter搭建eth私有鏈?
了解Dao并且為DAO設(shè)置客戶端應(yīng)用程序?
創(chuàng)建會員NFT?
創(chuàng)建自發(fā)token并實(shí)現(xiàn)鏈上治理
第卅三章、Serverless
serveless到底是什么?
搭建私有Serverless（一）：K8s和云原生CNCF?
搭建私有Serverless（二）：基于K8s的Serverless?
Serverless架構(gòu)應(yīng)該如何選型？
第卅四章、WebAssembly
我們?yōu)槭裁匆私?WebAssembly?
WebAssembly 模塊的基本組成結(jié)構(gòu)?
WebAssembly
微觀世界的基本數(shù)據(jù)規(guī)則?
WebAssembly
操作系統(tǒng)接口?
將自定義的語言編譯到 WebAssembly?
實(shí)現(xiàn)一個 WebAssembly 在線多媒體處理應(yīng)用?
Wasm
應(yīng)用的調(diào)試與分析
第卅五章、WebRTC
基礎(chǔ)概念與簡單集成?
RTC場景下音頻場景與最賤實(shí)踐?
RTC場景下視頻場景與最賤實(shí)踐?
RTC工程指標(biāo)：穩(wěn)定性、性能調(diào)優(yōu)、秒開優(yōu)化?
RTC場景下網(wǎng)絡(luò)調(diào)優(yōu)經(jīng)驗(yàn)?
RTC場景音視頻監(jiān)控與分析?
WebRTC
自研要點(diǎn)梳理
京公網(wǎng)安備 11010802030320號