軟體工程師職涯升級計畫啟動！立即預約職涯諮詢、履歷健檢或模擬面試👈，為您的加薪做好準備！
🎯 1. throttle vs debounce
這是前端開發中常見的效能優化問題，特別在處理 scroll、resize、input 事件時。
📌 throttle（節流）
throttle 讓函式在固定時間內執行一次，防止執行頻率過高。適合用於 監聽滾動、滑鼠移動、視窗調整大小 等場景。🔹 例子：滾動時顯示「返回頂部」按鈕
javascript
複製編輯function throttle(func, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}
window.addEventListener("scroll", throttle(() => {
console.log("滾動中...");
}, 300));
📌 debounce（防抖）
當事件觸發後，等待一段時間後才執行函式，如果期間再次觸發，計時器會重置。適合用於 搜尋框輸入、表單驗證、API 查詢 等場景。
🔹 例子：搜尋框即時建議
javascript
複製編輯function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
document.getElementById("search").addEventListener("input", debounce((e) => {
console.log("搜尋內容：" + e.target.value);
}, 500));
🚀 應用場景：
throttle：監聽滾動事件、監聽視窗大小變化debounce：搜尋框即時建議、表單驗證、API 查詢
⚡ 2. 網頁效能優化技巧（實戰案例分享）
如何讓你的網站載入更快？這些技術幫助你提升至少 30% 的效能！
- 圖片壓縮（WebP / AVIF）
- Lazy Loading（延遲載入）
- 資源優化（Tree Shaking、Code Splitting）
- CDN 加速
- 減少 Reflow 及 Repaint（後續詳解）
🎨 3. Reflow & Repaint
這是影響瀏覽器效能的關鍵機制：
- Reflow（回流）：當 DOM 結構、大小、位置變化時，瀏覽器重新計算佈局。
- Repaint（重繪）：當樣式（如顏色、陰影）改變時，瀏覽器更新 UI。
如何降低影響？ ✅ 避免逐步改變樣式（一次性修改） ✅ 使用 transform 取代 top/left ✅ 使用 will-change 提示瀏覽器預先優化
🔥 4. Redux Toolkit 快速上手
Redux Toolkit 是官方推薦的 Redux 開發工具，提供簡化流程的 API：
createSlice：簡化 reducer 撰寫createAsyncThunk：內建異步處理- 內建 DevTools & Immer：提升開發體驗
⚛ 5. React Fiber：提升 React 效能的關鍵
React Fiber 讓 React 更高效，並帶來 Concurrent Mode、Suspense 等特性。
- 可中斷渲染（提高響應速度）
- 優先級調度（重要內容先渲染）
- 更流暢的動畫與過渡效果
🔄 6. JavaScript 事件機制：深入理解 Event Loop
JavaScript 是單執行緒的，透過 Event Loop 處理非同步操作。
- Call Stack：執行同步任務
- Event Queue：存放非同步回調函
📌 簡單示例
javascript
複製編輯console.log("A");
setTimeout(() => {
console.log("B");
}, 0);
console.log("C");
執行結果：
css
複製編輯A
C
B
🔹 原因：
console.log("A")立即執行setTimeout被放入 Web API，等待回調console.log("C")立即執行- 當 Call Stack 清空後，
B才進入 Event Queue，最後被執行
面試考點：
📌 setTimeout(fn, 0) 何時執行？ 📌 Promise.then() 與 setTimeout() 誰先執行？
🏗 7. Higher Order Component（HOC）
HOC 是 React 組件的設計模式，透過函式回傳新組件來共用邏輯。
範例：
const withAuth = (Component) => (props) => {
return isAuthenticated ? <Component {...props} /> : <Login />;
};
🎣 8. React Hooks：useState vs useReducer
📌 useState
- 適用於 簡單狀態（如表單輸入、UI 狀態）
- 例子：
javascript
複製編輯const [count, setCount] = useState(0);
setCount(count + 1);
📌 useReducer
- 適用於 複雜邏輯（如 Redux）
- 例子：
javascript
複製編輯const reducer = (state, action) => {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
default:
return state;
}
};
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: "increment" });
面試考點：
📌 何時該用 useReducer？ 📌 useReducer 與 Redux 的區別？
留言分享你的解答，或看看其他開發者的面試經驗吧！ 🎤
