前端效能優化、React 與 JavaScript 深入淺出

undefined on Tenor

🎯 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：提升開發體驗

📖 官方 Redux 中文文件

⚛ 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

🔹 原因：

1. console.log("A") 立即執行
2. setTimeout 被放入 Web API，等待回調
3. console.log("C") 立即執行
4. 當 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 的區別？

留言分享你的解答，或看看其他開發者的面試經驗吧！ 🎤