topic-collection

Note

搜集大家想學習的主題還有材料，作為籌備讀書會的素材

Topics

讀 React 原始碼

• React 技術揭祕：
  • 網址：https://react.iamkasong.com/
  • GitHub：https://github.com/BetaSu/just-react
• 圖解 React 源碼
  • 網址：https://7kms.github.io/react-illustration-series/
  • GitHub：https://github.com/7kms/react-illustration-series
• Under the hood ReactJS
  • 網址：https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/
  • GitHub：https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS

前端效能優化

• Web Vitals
• Lighthouse
• 前端效能優化大補帖(Boook)
• Web Performance in Action(Book)
• https://developer.mozilla.org/en-US/docs/Web/Performance

JS 進階

• https://javascript.info/
• You Dont Know JS
• TC39
• 2ality – JavaScript and more
• Brendan Eich（JavaScript 作者）：https://brendaneich.com/
• Mastering Modular JavaScript
• Practical Modern JavaScript
• JavaScript: The Advanced Concepts - https://zerotomastery.io/courses/advanced-javascript-concepts/

打包工具

• vite
• rspack
• rollup
• tsup
• webpack

babel

Docker

CI/CD

瀏覽器

• https://rwerplus.github.io/pages/53ab0a/
• https://github.com/poetries/browser-working-principle
• https://web.dev/articles/howbrowserswork
• https://github.com/bellard/quickjs
• https://browser.engineering/
• https://github.com/danbev/learning-v8
• https://github.com/champkeh/learn-js-engine
• https://v8.dev/docs

資料結構與演算法

• Udemy 的課
• Algorithm Design Manual(Book)
• NeetCode
• Blind 75

作業系統

• 要先學 C 語言
• Operating Systems: Three Easy Pieces
• RTOS

計算機組織

• Nand To Tetris

DDIA

• https://github.com/Vonng/ddia

---

我來整理前端工程師可以深入研究的領域：

1. 效能優化（Performance）：

• 關鍵渲染路徑優化
• 載入策略（Lazy loading, Code splitting）
• 快取策略（Service Worker, HTTP caching）
• Bundle 優化
• Core Web Vitals
• Runtime 效能優化
• 記憶體管理

2. 安全性（Security）：

• XSS 防禦
• CSRF 防護
• Content Security Policy
• 資料加密
• Web Authentication
• 安全標頭設置
• 憑證管理

3. 圖形與動畫（Graphics & Animation）：

• Canvas 2D/3D
• WebGL
• SVG
• WebGPU
• CSS 動畫最佳實踐
• 動畫效能優化

4. 建構工具與工程化（Build Tools & Engineering）：

• 模組化設計
• 打包工具優化
• 開發工具鏈建置
• 微前端架構
• Monorepo 管理
• CI/CD 流程優化

5. 跨平台開發（Cross-platform Development）：

• Progressive Web Apps (PWA)
• 混合應用開發
• 跨平台框架研究
• 響應式設計深入研究
• 跨瀏覽器相容性

6. 測試與品質保證（Testing & QA）：

• 單元測試策略
• E2E 測試自動化
• 視覺回歸測試
• 效能測試
• 可訪問性測試
• 覆蓋率優化

7. 狀態管理與架構（State Management & Architecture）：

• 狀態管理模式
• 前端架構設計
• 設計模式應用
• 可擴展性設計
• 元件設計模式

8. 開發者體驗（Developer Experience）：

• 開發工具優化
• 程式碼品質工具
• 文件生成工具
• 開發流程優化
• 程式碼重構技巧

9. 使用者體驗（User Experience）：

• 互動設計
• 介面效能感知
• 離線體驗
• 錯誤處理與恢復
• 表單設計與驗證

10. 新興技術研究：

• WebAssembly
• Edge Computing
• Real-time Web
• Web3 技術
• Machine Learning in Browser

11. 國際化與在地化：

• i18n 策略
• 多語言支援
• RTL 支援
• 文化適配
• 時區處理

12. SEO 與可搜尋性：

• 技術 SEO
• SSR/SSG 策略
• Meta 標籤優化
• 結構化資料
• 爬蟲友善設計

13. 數據視覺化（Data Visualization）：

• D3.js 深入應用
• WebGL 數據渲染
• 大數據渲染優化
• 互動式圖表設計
• 自定義視覺化函式庫
• 地理資訊視覺化

14. 即時通訊（Real-time Communication）：

• WebSocket 優化
• WebRTC 應用
• Server-Sent Events
• 即時數據同步策略
• P2P 通訊實現
• 訊息佇列管理

15. 表單處理（Form Management）：

• 複雜表單設計模式
• 表單狀態管理
• 驗證策略
• 錯誤處理模式
• 動態表單生成
• 表單效能優化

16. 離線技術（Offline Technologies）：

• IndexedDB 應用
• 離線數據同步
• 背景同步策略
• 本地存儲優化
• 離線狀態管理
• PWA 高級特性

17. 瀏覽器引擎研究（Browser Engine）：

• 渲染引擎原理
• JavaScript 引擎優化
• 瀏覽器儲存機制
• 網路協議處理
• 瀏覽器 API 研究
• 擴充功能開發

18. 音視訊處理（Audio/Video Processing）：

• MediaStream API
• WebRTC 媒體處理
• 視訊編解碼優化
• 音訊處理與合成
• 串流技術優化
• 媒體效能監控

19. DevOps 與工具鏈：

• 自動化部署策略
• 監控系統建置
• 錯誤追蹤系統
• 效能監控工具
• 日誌收集分析
• 自動化測試流程

20. 企業級應用開發：

• 大型應用架構
• 權限管理系統
• 多租戶架構
• 企業級元件庫
• 工作流程引擎
• 報表系統設計

21. API 設計與管理：

• RESTful API 設計
• GraphQL 應用
• API 版本管理
• 文件自動生成
• API 安全性設計
• 快取策略優化

22. 低代碼/無代碼平台：

• 視覺化編輯器
• 拖拽系統設計
• 元件配置系統
• 動態程式碼生成
• 規則引擎設計
• 擴充性架構

23. 智能前端：

• 自然語言處理
• 圖像識別應用
• 推薦系統整合
• 機器學習模型部署
• 智能表單填充
• 智能搜索優化

24. 開發工具與擴充：

• IDE 插件開發
• 瀏覽器擴充開發
• 開發工具優化
• 程式碼生成工具
• 偵錯工具開發
• 效能分析工具

25. 區塊鏈前端：

• Web3.js 應用
• 錢包整合
• 智能合約互動
• DApp 開發
• 區塊鏈資料視覺化
• 加密貨幣支付整合