軟體工程師職涯升級計畫啟動!立即預約職涯諮詢、履歷健檢或模擬面試👈,為您的加薪做好準備!
🎯 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 的區別?
留言分享你的解答,或看看其他開發者的面試經驗吧! 🎤