WebCraft
前端工程師成長路徑

前端 · 職涯 · 學習路徑

2025 前端工程師成長路徑與學習資源

從 HTML、CSS、JavaScript 到框架、測試與資深工程思維——每個階段都有能力指標、練習任務與學習資源，幫你穩扎穩打走上前端職涯。

約 12,000 字前端工程師frontend學習資源

前端工程師是我很喜歡的一個角色，作為前端工程師的時候，我們是那位將平面設計稿轉化為真實網頁的關鍵角色。網頁就像一張空白的畫紙，而我們就是畫家，將無限的想法畫進網頁中。

網頁工程師的入門階段是把設計師的平面設計在網頁中「畫出來」，接著再讓網頁「動起來」。入門之後便開始研究如何提高網頁的運作效率、開發效率，以及降低網頁出錯率等議題，慢慢的在這個過程中變成資深前端工程師。

我會把前端工程師從新手到資深的重要技術依序點出來，並且附上練習任務以及學習資源 📚，希望這篇文章能幫助你順利成為資深前端工程師。

新手 Newbie

這個時期會有三個階段，我們用駕訓班學開車做比喻吧！

  • 階段一：你坐在副駕駛聽教練跟你介紹車子上的各個功能。
  • 階段二：你坐上駕駛座開始摸索、操作每個功能，開始學習開車。
  • 階段三：你完成了駕訓班的課程，雖然還不是很會開，但已經可以正式上路！

N1. Newbie Level 1

能力指標

  • 能很清楚的說明 HTML、CSS、JavaScript 並獲得前輩或是 ChatGPT 肯定。
  • 會使用程式編輯器修改一般文字檔（就像用 windows 記事本編輯一般文字那樣輕鬆）
  • 知道「瀏覽器開發者工具」是什麼東西，且可以很輕鬆地在 Chrome 或是其他瀏覽器中將其打開

任務.1：了解什麼是 HTML, CSS, JavaScript

我問 ChatGPT：HTML, CSS, JavaScript 三者的關係是什麼？這是他的回答：

如果把一個網站想像成一棟房子，那麼：
  • HTML 就像是房子的骨架，決定「有幾間房」、「每間房放什麼東西」。比如你在網站上看到的標題、段落、圖片、按鈕，都是用 HTML 放上去的。
  • CSS 就像是裝潢設計，決定這棟房子要漆什麼顏色、字要多大、按鈕要圓的還是方的。沒有 CSS 的網站會像白牆加黑字一樣樸素。
  • JavaScript 就像是讓房子裡的設備「動起來」的電路或遙控器。點按鈕時會跳出對話框、圖片會自動輪播、購物車可以加入商品，這些互動效果都是靠 JavaScript 實現的。

我覺得形容得還滿貼切的 ~ 👍🏻👍🏻

JavaScript 的縮寫是 JS，Java 不是 JavaScript 的縮寫，[它們是兩種完全不一樣的語言](https://nabi.104.com.tw/posts/nabi_post_d7813630-3a39-4f45-a435-8dcc020b3f9e)。

任務.2：看完學習資源的第一個影片，完成 VS Code 下載。

學習資源 📚

任務.3：把這個任務的學習資源影片看完，先對開發者工具有個初步的映像，看看它能做些什麼事情。之後正式開始寫 Code 時，可以隨時回來複習，到時候再開始真正練習使用。

影片中的講師都是使用 [Chrome 瀏覽器](https://www.google.com/chrome/)。

學習資源 📚

N2. Newbie Level 2

能力指標

  • 開始學習使用終端機 terminal
  • 有自己個 GitHub 帳號。
  • 把自己做的第一個網頁上傳到自己的 GitHub Pages，且該網頁可以被正確瀏覽。
如果你沒有基礎，這階段的任務可能需要幾天時間才可以完成，這很正常，不用急。

任務.1：學習使用終端機 terminal

如果你不知道怎麼打開終端機，請詢問 ChatGPT，像是這樣「我的電腦是 Mac ，我該如何打開終端機？」

學習資源 📚

現階段至少要先熟悉透過終端機進行以下操作：

  1. 查詢自己在哪個目錄，指令： pwd
  2. 列出當下目錄的檔案/隱藏檔案，指令： ls
  3. 在目錄之間移動，指令： cd
  4. 移動檔案/移動目錄，指令： mv
  5. 刪除檔案，指令： rm

平常忘記終端機命令，可以詢問 ChatGPT，例如這樣：

  • 我是 Mac 電腦，在終端機底下，我該使用什麼命令知道自己在哪個目錄？
  • 我是 Mac 電腦，在終端機底下，我該如何刪除資料夾？

任務.2：實作出一個網頁，若不知道做什麼，可以做一份自己的履歷，包含照片、自我介紹、工作經驗等內容。

剛開始學習網頁前端一定會碰到的第一個瓶頸就是不會調整網頁內容的位置，關於這點你必須搞懂 CSS 的 Display、Position、Box-Model，我下面推薦的學習資源 📚中幾乎每一個都會有相關的教學內容，希望可以幫助你快速突破這個瓶頸。

學習資源 📚

- HTML 教學 by STEAM 教育學習網

- CSS 教學 by STEAM 教育學習網

遇到瓶頸時，別忘了找 [ChatGPT](https://chatgpt.com/) 聊聊！

任務.3：為網頁添加 RDW 效果 ，讓網頁在電腦螢幕、平板電腦、手機螢幕中都有良好的觀看體驗。

學習資源 📚

任務.4：跟著 Create a Dark Mode Switch with HTML, CSS, JavaScript by Coding2GO [YouTube] 的步驟，為網頁加入(Light/Dark)佈景主題，讓使用者可以透過畫面上的按鈕進行(Light/Dark)佈景主題切換。

影片中講者的網頁可能有用到一些 svg，先不用管他，用一般文字按鈕代替就好。

學習資源 📚

任務.5：註冊一個 GitHub 帳號並上傳網頁

現在你已經完成了第一個網頁，該是時候讓世界看見它了！參考學習資源 📚，建立自己的 GitHub 帳號，然後把前面做好的網頁上傳到 GitHub Pages。

雖然在這個任務中你只會短暫的使用到一些 Git，但 Git 是未來跟同事協作的重要基礎，一定要多花點心思學習。

學習資源 📚

N3. Newbie Level 3

能力指標

  • 能清楚解釋 CSS 的 Selector 以及 Specificity 並獲得前輩或是 ChatGPT 肯定。
  • 熟悉 JS 的基礎語法，並且可以輕鬆說出至少 5 個 JS 的”奇妙”特性並獲得前輩或是 ChatGPT 肯定。
  • 能夠大致說明 JS 的 Hoisting、Event Loop、Prototype Chain、this

任務.1：深入學習 CSS，看完 CSS 教學 (2023) by CodeShiba 程式柴 [YouTube List] 的影片，建議從「【 CSS 】 基本語法」開始看。

學習資源 📚

任務.2：完成 JavaScript: The First Steps (free) by Andre Madarang in Laracasts. 課程。

學習資源 📚

任務.3：認識 JavaScript 的”奇妙”特性

學習資源 📚

  • 詢問 ChatGPT「JavaScript 的“奇妙”特性有哪些？」

任務.3：釐清 JavaScript 的 Hoisting、Event Loop、Prototype Chain、this

剛學習 JavaScript 初期就要釐清這幾個觀念並不容易，建議先把內容大概記起來，沒辦法完全懂也沒關係，隨著日後的成長，理解力漸漸提升再回頭來看就會清楚許多。

學習資源 📚

可以先忽略文末 React 的部分，之後有需要再回頭補就好。

階段小結

這個階段的你，已經完成了前端新手的第一步，除了對 HTML、CSS、JavaScript 有了初步認識，也開始接觸前端工程師會用到的工具，如：VS Code、瀏覽器開發人員工具、終端機，並且也實作了第一個靜態網頁並且放上 GitHub。下個階段重點在於繼續鞏固基礎知識，並且開始學習使用 JS 串接其他系統的資料以及為網站增添各種互動性功能。

初階工程師 Junior

這個階段的重點：

  1. 持續鞏固基礎。
  2. 學習網路運作基礎觀念。
  3. 學習如何透過工具、程式，串接 Http API。

J1. Junior Level 1

能力指標

  • 知道什麼是 DOM，知道如何透過 JS 查詢、操作 DOM。
  • 知道什麼是 JSON 與 XML。
  • 知道什麼是 Http API 呼叫。
  • 知道什麼是 Request / Response。
  • 知道如何使用 JS / Postman 來呼叫 Http API。
  • 能清楚的說明 CORS 是什麼東西並獲得前輩或是 ChatGPT 肯定。

任務.1：認識 DOM，並開始學習使用 JavaScript 操作 DOM

先把學習資源 📚.1的網頁內容看過，讓自己對 DOM 有一個初步的認識。然後跟著學習資源 📚.2的影片，練習使用 JavaScript 操作 DOM。完成這個任務後，你應該要有能力很輕鬆的透過 JS 操作網頁中的 DOM。

學習資源 📚

  1. HTML DOM 破解：新手完全指南，帶你深入理解網頁結構 by 新人日誌
  2. JAVASCRIPT DOM TUTORIALS by dcode [YouTube List]

任務.2：認識 XML 與 JSON

XML 與 JSON 是兩種資料格式，這兩種資料格式在業界被廣泛使用，很多時候你要跟別人家的系統進行串接時會用到，現階段你可能還沒馬上用到，但需要先認識它們。

學習資源 📚

  1. XML 教學 | 概述 by J.J’s Blogs
  2. [JSON] 20 分鐘快速入門 by MIS2000 Lab. [YouTube]
  3. JSON 基本教學 By 彭彭 [YouTube]

任務.3：使用 Postman 取得「台北市資料大平臺」的公開資訊

這個任務的學習資源 📚 內除了使用 Postman 串接 API 以外，也有說明以下內容，這些概念非常重要，請一定要多加熟悉他們。

  1. 瀏覽器如何與伺服器溝通
  2. Http 的 請求(Request) 以及 回應(Response)
  3. Http Status Code

把學習資源 📚 的影片看完後，對 Postman 以及 Http 有概念後，可以開始來練習了！進入台北市資料大平臺，點選資料目錄 > 所有資料集。找到左邊的「檔案格式」選擇 JSON，點擊塞選，然後選一個自己有感興趣的資料開始進行串接。

學習資源 📚

  1. 簡單快速了解甚麼是 HTTP by Proladon [YouTube]
  2. 什麼是 HTTP、HTTPS ｜ http request、http response、http status code by GrandmaCan - 我阿嬤都會 [YouTube]
  3. 示範用 Postman POST 打需要登入的網站 政府資料開放平臺 訂閱資料集清單 by 葉政偉 [YouTube]
  4. Top 9 HTTP Request Methods (With Examples) by JavaScript in Linkedin

任務.4：了解封包、TCP、IP、Domain

透過了解「封包、TCP、IP、Domain」，你會大概知道：當我們輸入一個網址、按下 Enter，到網頁顯示出來的這段過程，電腦到底幫我們做了哪些事。

你現在不需要深入研究每個細節，但先建立一些基本概念，對未來理解網站運作會很有幫助。

學習資源 📚

任務.5：釐清 CORS

在開發網站時，尤其是前後端分離的架構中，很容易遇到一個令人困惑又惱人的問題：CORS（跨來源資源共用）。你可能會看到錯誤訊息寫著：「Access to fetch at \'xxx\' from origin \'yyy\' has been blocked by CORS policy」，然後不知道發生什麼事情。

CORS 不是一種錯誤，而是一種瀏覽器的安全機制，用來保護使用者資料不被惡意網站隨便存取。它背後的設計出發點是合理的，但實際開發時要怎麼設定，卻常常讓人頭很痛。

這個任務的重點是：

  • 了解為什麼會有 CORS？
  • 了解哪些情況下會觸發 CORS？
  • 了解如何在開發環境與正式環境中設定 CORS？
  • 了解如何分辨是伺服器沒設對，還是前端請求寫錯？

學習資源 📚

J2. Junior Level 2

能力指標

  • 開始使用 Nodejs & NPM。
  • 能夠使用 vite 開啟新的 Vue 專案。
  • 知道 Cookie 是什麼，並且知道如何使用 JS 存取 Cookie。
  • 知道 Local Storage 跟 Session Storage 的差異，並且知道如何使用 JS 操作它們。
  • 能夠使用 Vue 做出功能健全的 Todo List 功能。
  • 能夠在 Vue 專案使用 API 串接第三方資料。

任務.1：認識 Nodejs、NPM，並且使用 vite 啟動一個 Vue 專案，開始練習 Vue。

這個任務非常重要，你將開始學習使用 Nodejs、NPM，以及開始接觸前端工程技術，然後開始使用 Vue 開發網頁。這資訊量非常的大，我建議照著以下提供的步驟進行。

步驟：

  1. 照著 npm for absolute beginners by Kevin Powell [YouTube] 的教學下載好 Nodejs / NPM。
  2. 跟著 Creating Your First Vue 3 App with Vite - A Beginner's Tutorial by LearnVue [YouTube] 的教學開啟第一個 Vue 專案。
  3. 跟著 Vue JS 3 Tutorial by Codevolution [YouTube] 邊看邊學使用 Vue
  4. 可選閱讀：Learn Vue 3: Step by Step by Jeffery Way [Laracasts]
安裝 node.js 的方法有很多，未來在職場上很大機率你會使用 [nvm](https://github.com/nvm-sh/nvm)，但現在可以先去 [Nodejs 官網](https://nodejs.org/zh-tw)下載就好。 Node.js、Vite、Vue 這些東西背後都有龐大的工具鏈、生態系，對你來說這個任務所學習到的東西只是一個起點。

學習資源 📚

任務.2：認識 cookie、localStorage、sessionStorage

cookie、localStorage、sessionStorage 瀏覽器儲存資料的最常見三種方式。你將在這個任務的學習資源 📚 中了解到它們的差異，以及使用場合。

學習資源 📚

任務.3：使用 Vue 製作 Todo List

使用 Vue 製作 Todo List 是一個非常好的練習，你將會在這個過程中熟悉 Vue 大部分的基礎用法，而且做出來後成就感滿滿！！

你的 Todo List 應該要滿足以下幾個功能

  • 可以新增 Todo
  • 畫面中可以列出所有 Todo
  • 可以透過關鍵字篩選(filter) Todo
  • 可以將 Todo 標示為完成
  • 可以刪除 Todo
  • 可以修改 Todo 的屬性，例如：名稱
  • Todo List 要有「上一頁」、「下一頁」，每一頁 10 筆資料。

我建議先自己試著把它做出來，真的不行再參考 使用 Vue3 Composition Api 實作 Todo List (Vue3) by Wei Wei 前端教學。過程中把自己比較不熟悉的用地方做個筆記，完成這個任務後再接著回去做功課補強。

學習資源 📚

任務.4：使用 Vue 串接「台北市資料大平臺」的公開資訊

在前面任務你已經有用 Postman 取得過台北市資料大平臺的公開資訊，現在這個任務是改用 JS 的方式來串接資料，你可以先觀看學習資源 📚 的教學影片，然後再開始練習。

比較主流的呼叫 Http API 的方法有 1. 使用 JS 原生的 fetch 2. 使用 axios 套件，建議兩個方式都練習過，以後都有機會用到，多練不吃虧。

學習資源 📚

階段小結

現在你已經會使用 Vue 建立一個簡單小工具 Todo List，而且你也會使用工具、程式來串接 Http API，並且你也了解 CORS 問題。現在你應該要開始看 Vuejs 官網的文件，並且把文件中看不懂的東西給搞懂，因為在下個階段，你將會需要用到更多 Vue 生態圈的工具，而這非常依賴扎實的 Vue 知識。

中階工程師 Mid

這個階段的重點是「拓展視野」。

你將開始接觸那些用於提高開發效率的工具、用於增強網站功能的各種技術與套件、用於面對龐大繁瑣專案的軟體設計思維等等。這是一個不輕鬆但卻非常有成就感的階段。

M1. Mid Level 1

能力指標

  • 會使用 TypeScript
  • 會使用 Tailwind CSS
  • 會使用 VueRouter、Vue I18n、Pinia

任務.1：將 J2 的 Todo List 使用 TypeScript 重寫

TypeScript (簡稱 TS)，TS 是為了補足 JS 的一些弱項而誕生的語言，然而它比 JS 要複雜一些。它的優點是幫助我們在開發的過程中快速識別出錯誤，減少程式上線後才爆炸的風險。雖然它很讚，但是寫 TS 的成本就是比 JS 高，通常是生命週期較長、規模較大的專案比較適合使用。

學習資源 📚

任務.2：使用 JS 製作一個任務看板

工具要求：

  • VueRouter
  • Vue I18n
  • Pinia
  • Tailwind CSS

功能要求：

  • 實現會員登入登出，且在個頁面之間切換會員狀態不會跑掉

- 推薦使用 Firebase，處理 Auth、DB

  • 實現會員密碼修改、大頭貼修改功能
  • 實現 亮色/暗色 主題切換 功能，且刷新瀏覽器不會跑掉
  • 實現 中英文切換 功能，且刷新瀏覽器不會跑掉
  • 實現 任務卡片“拖拉” 調整任務卡片進度狀態

學習資源 📚

M2. Mid Level 2

能力指標

  • 能夠說明 Web Socket / Web Component 的用途並獲得前輩或是 ChatGPT 肯定。
  • 能夠說明 SOLIDE Principles / OOP / FP 是什麼並獲得前輩或是 ChatGPT 肯定。
  • 開始使用 Reactive Programming 技巧
  • 有能力使用 React / Angular 做出 Todo List
  • 能夠使用 TypeScript 將 M1 的任務看板重寫

任務.1：認識 Web Socket

學習資源 📚

任務.2：使用 Web Component 製作一個客製化元件

學習資源 📚

任務.3：開始學習設計模式、OOP、FP

在有過一些練習甚至實戰經驗後，你發現程式慢慢越來越多，複雜度越來越高，有時候只是想改點東西不是要找很久就是容易改壞東西，這代表你開始需要管理與設計程式的能力。直得慶幸的是已經有很多前輩幫我們把方法整理成冊，只要多花時間用心琢磨，慢慢地就能將燒不盡的野火給控制住。

學習軟體架構、設計模式，不是一時一刻的事情，這邊提供的學習資源 📚只是一個開端。

學習資源 📚

任務.4：使用 React / Angular 製作 Todo List

由於我覺得比起 React / Angular，Vue 是比較好上手的，所以本文一開始是引導讀者學 Vue。但事實上這三個框架工具在業界都很多人用，如果你還沒用過 React / Angular，我建議在這時候花點時間去了解它們，試試看它們 ~

學習資源 📚

任務.5：學習使用防抖、節流技術

學習資源 📚

任務.6：認識 Reactive Programming RxJS

RxJS 是一項我非常喜歡也非常看重的技術，不過相較於其他技術，它的討論度沒那麼高而且難度也高一些。雖然如此，我強烈建議你搞懂它的核心觀念，並且學習幾個好用的 Operators 如：switchMap, mergeMap, concatMap, exhaustMap.

學習資源 📚：

- 由於是 7 年前的影片，所以跟現在使用是有差別的，這個影片就當作用來認識 RxJS

- 我連結直接提供從 8:20 秒開始，因為講者前面是在做 Project setup。

任務.7：使用 TypeScript 重寫 J2 的任務看板

階段小結

現在你對業界前端工程師所用到的工具、技術已經有大致上的了解了，請繼續保持學習，把日常會用到的工具、技術用熟學精。

半資深工程師 Mid-to-Senior

當專案越來越大，複雜度越來越高，漸漸的各種問題就會慢慢浮出檯面。我們將透過學習打包工具、自動化測試、監控、CDN 等技術來提高網站的運作效率以及服務品質。

Mid-to-Senior

能力指標

  • 懂得使用前端工程技術處理程式、打包資源。
  • 能夠使用前端框架製作 SSR 網站。
  • 會寫 Unit Testing、Integration Testing、End-to-End Testing。
  • 與後端工程師 / SRE 工程師 / DevOpts 工程師，合作建立：

- CI / CD 技術自動化測試與部署

- 系統監控與警報機制

- CDN 與邊緣計算

任務.1：學習使用 Web Bundler

###### 子任務.1：製作一個簡單的 JS package，使用 Rollup 打包並發佈到 NPM

這個子任務希望你使用 Rollup 作為這次練習的打包工具，另外直得一提的是2024年底的時候，有一個名為 Rolldown 的 JavaScript bundler 發布了 v1.0.0-beta.1，[Rolldown 官網表示它的目標是成為一個統一的打包工具，並且代替 Vite 中的 Rollup 以及 esbuild](https://rolldown.rs/guide/#why-rolldown)，如果你對此感興趣，不妨關注 [Rolldown GitHub](https://github.com/rolldown/rolldown)。

學習資源 📚

###### 子任務.2：使用 Webpack 重新建構任務看板

在許多情況下使用 Vite 建構網站已經夠用，然而當你需要打包更多類型資源，或是對資源需要更細節的操作時，就會需要用到 Webpack。 (現在還是有許多大型企業在使用 Webpack 建構巨大且複雜的應用)

學習資源 📚

任務.2：學習 SSR 的觀念，使用 Nuxt.js 建構一個網站

當我們用 Vue 這種技術框架開發前端時，最常見的做法是讓瀏覽器負責渲染畫面，這就是所謂的 CSR（Client-Side Rendering）。但這種做法在 SEO、首次載入速度上常常會碰到瓶頸。所以業界常會使用 SSR（Server-Side Rendering）這種可以在伺服器先把資料處理好再一併傳給使用者的技術，配合良好的 Cache，不僅提高網站效能，對 SEO 也很有幫助。

學習資源 📚

任務.3：學習自動化測試工具

當專案越做越大，靠人工測試來保證品質已經不夠了。每次修改程式碼後都要手動確認功能沒壞，既耗時又容易出錯。這時候，自動化測試工具就能派上用場。無論是單元測試、整合測試，還是端對端測試，自動化都能幫助我們更快發現問題、減少上線後的 bug，大大增加我們上新程式的信心。

配合 CI/CD（持續整合與持續部署）流程，我們可以在每次 push 程式碼時自動執行測試、打包、部署，讓開發流程更穩定、更高效。

You should write tests

學習資源 📚

任務.4：認識 CI/CD

學習資源 📚

任務.5：認識 Monitoring

相較於後端監控通常著重在伺服器的效能、資源使用率與錯誤記錄，前端監控 Real User Monitoring (RUM) 更關注的是「使用者實際的瀏覽體驗」。

透過 RUM 收集使用者的行為與設備資料，像是頁面載入時間、互動延遲、程式的錯誤、使用者地區與瀏覽器環境等，我們就可以有效地進行前端效能優化、快速排查問題。

學習資源 📚

任務.6：認識 CDN 與邊緣計算

當我們在網頁上開啟一張圖片或一個網站，這些內容可能是從很遠的主機傳過來的。為了加快載入速度、降低延遲，現在很多網站都會透過 CDN（內容傳遞網路） 把靜態資源快取到世界各地的節點上。這樣一來，使用者就能從距離最近的伺服器取得內容，提升網站使用體驗。

隨著使用者對速度與即時性的要求越來越高，「邊緣計算（Edge Computing）」也應運而生。它不只是快取資料，而是把部分運算邏輯下放到離使用者更近的節點執行，像是認證、A/B 測試、轉址等。

然而 CDN、邊緣計算的技術已經超出前端領域，實作上需要與其他領域的工程師協作，這邊可以先建立觀念為主。

學習資源 📚

階段小結

這個階段的你，除了實現網站所需的功能外，還有能力透過寫測試、CI/CD、CDN 等技術來提高網站迭代的效率與整體品質。你開始不只是「完成功能」，而是追求整個網站的「可維護性、可擴展性與穩定性」。這是你從「熟悉前端技術」邁向「具備工程系統思維」的重要轉捩點。

資深工程師 Senior Engineer

資深工程師會開始關注系統整體的開發流程、跨部門協作的效率，並投入更多心力在交付規範、架構規劃、協助同伴成長等事情上。不只要會做開發，還要能清楚的表達溝通、帶得動團隊，是技術與溝通並重的角色。

能力指標

  • 有能力提供軟體架構設計、技術選型
  • 對團隊的技術棧有全盤的了解
  • 面對問題，能夠提出方案
  • 能夠培養、輔導較資淺的團隊夥伴
  • 能夠快速理解沒看過、沒用過的技術

任務.1：維護專案的系統的「使用者手冊」、「開發者手冊」

使用者手冊

通過維護使用者手冊，你會對整個專案所提供的功能非常熟悉。而且如果做得足夠完善，還可以減少使用者什麼問題都要問你的情況。(現在配合像是 NotebookLM 這樣的 AI 工具更是如虎添翼)。

開發者手冊

就像寫專案 README.md 那樣，只是把內容寫得更加詳細，可以想像這是一份要給剛要加入團隊的工程師來看的文件，他什麼東西都不懂，所以內容盡可能不要試圖去用一小段話解釋一個大問題，把專有名詞、功能實現邏輯、部署、測試、存在目的、利害關係人(Stackholder) 都寫清楚。

雖然說是「手冊」，但你完全可以多加利用圖表、錄影的方式去補充內容。

任務.2：學習管理

其實我不是很喜歡「管理」這個詞，因為聽起來很像是「管別人」，這並不是我想表達的意思。我所認知的「管理」其實包含很多東西，像是多傾聽團隊的聲音、學習責任下放、建立團隊運作流程、確保資訊流通等等，目標是讓團隊可以保持良好且順暢的運作。

學習管理最簡單的方法就是多看書，下面我推薦幾本我覺得很不做的書給你做參考。

書籍推薦 📚

事實上不管你在哪個階段，這幾本書我都相當推薦！

任務.3：養成「多看、多聽、多想」的習慣

我覺得這不太好說明，但大概是這樣：

  • 當你用到一個好產品的時候，想想為什麼你覺得他好。
  • 當你遇到一件壞事的時候，想想有沒有可能避免它再次發生。
  • 當你讚嘆一個不可思議的功能時，研究研究它是如何被實現的。
  • 當一件事情結束的時候，想想如果可以再來一次，怎麼做會更好。
  • 當你注意到一件奇怪的事情時，先不要質疑，先想想它為什麼存在。
  • 多關注一些你感興趣的領域議題、產業新聞。

透過養成這種時時刻刻觀察、思考的習慣，慢慢的將自己的視野擴大、能力累積。

如果思考過程中你發現有個很不錯的議題，甚至可以找團隊一起 Case Study，讓團隊一起成長。

階段小結

在我的認知中，Senior 工程師已經是準 Manager，所以在這個階段，比起寫程式、搞技術，我提到的內容比較是管理、心態面相的內容。

我知道有些人比起往管理職發展，更喜歡鑽研在技術中。所以下一段，我們會來聊聊另一個路線「技術專家」。不過坦白說，我自己也不是技術專家，這部分的內容就只能聊聊，沒辦法明確的指引該如何做。

技術專家 Specialist

能力指標

  • 能夠處理複雜的交互應用
  • 有辦法突破瀏覽器的極限

我其實非常好奇像是 Figma, Miro, Notion, Canva, Google Sheet 這些超強 SaaS 產品，到底該要會些什麼技術，才能做出這樣令人驚嘆的網頁應用程式？

但承上一段結尾所說，我也不到技術專家的程度，滿多東西我是有觀念但不一定能實現。所以這部分我只能跟 ChatGPT 聊天，整理出一些觀念、技術與關鍵字給大家，有興趣的朋友再自己鑽研嘍 ~

⭐️ 資料分片與延遲載入

當資料量變大時，一次載入所有資料會造成效能問題。像 Google Sheet 或 Notion 這類應用，會把資料分成一塊一塊（chunk）處理，並配合捲動或使用者操作時再動態載入需要的部分，這樣不只可以節省記憶體，也能讓操作更流暢。

⭐️ 記憶體管理與事件批次化

像 React、Figma 這類高互動性的應用，在使用者操作時會產生大量事件與狀態變更，如果每一筆都即時處理，很容易造成效能瓶頸或畫面掉幀。這時常見的做法是將多筆更新合併處理（batched updates），並安排一個排程點再統一更新畫面，這樣能大幅降低重新渲染的次數。

延伸閱讀

⭐️ 瀏覽器渲染

在高互動性的 SaaS 工具中，動畫與過場效果常見但容易造成卡頓。這時候選擇「不會觸發 Reflow / Repaint」的 CSS 屬性來做動畫，例如 transform 和 opacity，就能把渲染工作交給 GPU 處理，減少主線程負擔，提高效能。

像是 width, margin, top, left 等會改變 layout 的屬性就應避免拿來做動畫，否則會導致整個 DOM 的重排，對效能有明顯衝擊。

學習資源 📚

⭐️ 虛擬捲動 Virtual Scrolling

虛擬捲動的核心概念就是「畫面上只渲染可見範圍的元素」，像你在 Google Sheet 上捲動 2 萬筆資料，其實畫面上只出現 30~50 筆。這需要配合精準的 DOM 高度估算與資料分頁機制，來達到毫無卡頓的體驗。

學習資源 📚

⭐️ 依賴追蹤 Dependency Graph

想像一下如果在 Google Sheet 中有上萬個欄位，而且彼此還用公式互相依賴。當你改一格資料，系統怎麼知道只更新必須重算的那些欄位，而不是整張表都重算？依賴追蹤（Dependency Tracking）就是解方，它的核心是記錄每個欄位的依賴關係，當一個值改變時，只沿著依賴圖更新相關的欄位，避免不必要的運算來保證效率和流暢。

這個概念其實也是 React 和 Vue 裡面響應式系統的核心。Vue 透過 Proxy 自動追蹤你使用到的資料，當資料變動時只更新受影響的組件。React 則是靠你在 Hook 內明確列出依賴，像是 useEffect 的依賴陣列，告訴 React 哪些變數變了才重新執行副作用。

⭐️ 處理協作編輯所產生的同步與衝突問題

在多人協同工作的場景下，最大的難題就是資料同步、處理衝突，LWW(Last Write Wins)、OT（Operational Transformation）與 CRDT（Conflict-free Replicated Data Type）就是常見方法。

技術核心方法適用場景優點缺點
LWW時間戳決定贏家資料庫同步、簡單設定簡單、效率高容易資料被蓋掉
CRDT可合併資料結構離線同步、分散協作去中心化、無衝突複雜、效能消耗
OT操作轉換實時協作、線上編輯成熟、有順序處理能力需要中心伺服器

學習資源 📚

⭐️ Undo/Redo 系統與操作歷史

進階應用裡常見的 Undo / Redo，其實背後也有不少設計挑戰。像是要記錄哪些操作、哪些資料狀態可以還原、如何與多人協作狀態同步等等。這通常會需要一套指令模式或是 immutable 狀態管理設計，讓每個操作都能被追蹤與逆操作。

⭐️ Canvas、SVG、WebGL

像 Canva、Figma、Miro 這類圖形編輯工具，多半會用 Canvas 或 WebGL 來處理圖形互動。Canvas 適合 2D 渲染，WebGL 則能處理更高階、需要 GPU 加速的場景。SVG 則比較適合靜態或互動性低的圖形。

它們的 API 基礎其實不難，要實作簡單的拖曳、縮放、移動沒什麼問題。但當你要處理筆刷模擬、濾鏡、貝茲曲線、布林運算這些進階需求時，就需要電腦圖學的知識來支撐背後的邏輯。

⭐️ WebAssembly

很多高階 SaaS 服務像是 Figma, Photoshop Web 就是靠 WebAssembly 把使用 C++ 開發的核心引擎整合到網頁中。

這些原本是為桌面設計的高效能圖形處理邏輯，透過 Emscripten 把 C++ 編譯成 WebAssembly，再配合 JavaScript 做溝通，讓這些功能可以直接在瀏覽器中執行。

這樣不只可以重用既有成熟的程式碼，也能獲得遠高於純 JavaScript 的效能，讓網頁應用能處理像筆刷模擬、即時渲染、選取工具、濾鏡這類運算密集的功能。

相關資源

結語

本文講述了前端工程師從零開始到資深工程的 5 個階段 （新手 ➜ 初階 ➜ 中階 ➜ 半資深 ➜ 資深 / 技術專家），每個階段所需要的核心能力，並且提供任務及學習資源希望能幫助你順利成長。

這 5 個階段是我自己的劃分，如果跟你的想法或公司的職級職等不同，以你的為主！

如果你是一個轉職的新手或是學生，我想跟你說：學習任何一項專業技術都不是一件輕鬆的事情，就算是超級有天份的天才也不可能在半年內從零變成高手，因為有太多成長需要實戰經驗去獲得感悟。所以千萬別給自己太大的時間壓力，只要踏踏實實的學習，持續將時間精力投入，一定可以掌握「網頁前端工程師」的能力。