Cyberpunk前端工程師面試題目與解答:效能優化、React 與 JavaScript

更新於 發佈於 閱讀時間約 8 分鐘

軟體工程師職涯升級計畫啟動!立即預約職涯諮詢、履歷健檢或模擬面試👈,為您的加薪做好準備!

🎯 1. throttle vs debounce

這是前端開發中常見的效能優化問題,特別在處理 scrollresizeinput 事件時。
📌 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 的區別?


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


留言
avatar-img
留言分享你的想法!
avatar-img
跨越國界的程式人生
2會員
32內容數
自學程式,現為網頁開發工程師,同時擔任線上課程講師,專注於幫助自學程式的開發者找到理想工作。熱愛技術與分享,致力於將複雜的概念轉化為實用知識,讓更多人踏入軟體開發的世界。
你可能也想看
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
本文介紹了CSS Battle 17的挑戰題目,並提供瞭解題的技巧和方法。內容包括基本排版、圖形解構能力和技術總結。歡迎大家分享自己的解法與作者交流。
Thumbnail
本文介紹了CSS Battle 17的挑戰題目,並提供瞭解題的技巧和方法。內容包括基本排版、圖形解構能力和技術總結。歡迎大家分享自己的解法與作者交流。
Thumbnail
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式,藉由使用 flex 來進行排版,並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
Thumbnail
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式,藉由使用 flex 來進行排版,並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
Thumbnail
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
Thumbnail
本文介紹CSS Battle題目#73的解法,涵蓋了分層拆解圖形、使用grid排版、調整樣式等基礎技巧。
Thumbnail
本文介紹CSS Battle題目#73的解法,涵蓋了分層拆解圖形、使用grid排版、調整樣式等基礎技巧。
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
Thumbnail
前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News