# 前端面試問題

不定期更新遇過的前端面試題目。如果想補充題目的話，歡迎登入後編輯。

## 2025 年 9 月補充

- 當初這份筆記撰寫時，目標受眾是「想轉職成前端工程師」的朋友
- 如果已經有前端工作經歷，通常面試提問的重點會放在履歷的內容和先前的工作經歷。當然有些考題還是可能會遇到，只是比重會比找第一份前端工作時來得低很多
- 可以請 AI 出一些常見的前端考題，幫忙模擬面試。這樣準備起來的效率，會比看這份題庫來得高很多，題型也比較活

## JavaScript

* map() 與 foreach() 使用時機?如何選擇?
* null與undefined差別?
* []= =[]嗎? []===[]嗎?
* 什麼是作用域 (scope)？
* 什麼是 hoisting？
* 什麼是 event loop？
* function declaration vs function expression 差別？
* By value vs by reference
* 在不同情況下 this 指向對象會是什麼？
* 什麼是原型鍊（prototype chain）？
* 什麼是閉包（closure）？用途是什麼？
* 非同步與同步操作混用時的輸出順序
* Promise & async await 差別在哪裡？有沒有什麼是其中一個做得到另一個做不到的？
* 有用遞迴的方式寫過 async await 嗎？
* var、let、const 的差別？
* Array.forEach、Array.map、Array.filter、Array.reduce 的差別？
* 如果要實現myMap()跟map的功能一樣，要怎麼做（`[1,2,3].myMap(()=>{...})`）
* Promise 和 async await 要解決的是什麼問題？
* 什麼是 event bubbling？
* 知道event bubbling和capture的事件傳遞流程嗎？
* 請解釋何謂 callback function？
* 分別解釋 debounce 跟 throttle，以及兩者的差異
* 什麼是「淺比較」和「深比較」？
* 請解釋「淺拷貝」和「深拷貝」
* 請說出 JavaScript 所有的基本型別
* 請解釋 == 和 === 的差異
* 使用過什麼方法處理 AJAX？

## TypeScript

* type `any` vs. `unknown` 的差別
* `type` 跟 `interface` 的差別在哪？
* 請說明泛型（generics）是什麼？
* `extend` 在泛型中的用途？
* enum 和 const 的差別是什麼？
* 什麼是 function overload？

## 框架／套件／工具類

* 為什麼選擇你現在用的這個 JavaScript 框架？
* 用過其他 JavaScript 框架嗎？跟你現在用的框架差別在哪裡？
* 有用過 Webpack 嗎？
* 平常寫 code 有用 linter 嗎？用哪個？
* 什麼是 SPA？優缺點為何？
* 有使用過 Gulp 嗎?
* Canvas和 WebGL的差異？
* 有使用過 Three.js 嗎？
* 知道什麼是 WebRTC嗎？
* 知道什麼是 WebAssembly 嗎?
* 用過 Redux 嗎？它要解決什麼問題？
* 什麼是 SSR（server-side rendering）？
* 有用過什麼處理非同步操作的 library？
* styled-component vs. css module
* 知道 Tailwind 嗎？優缺點是什麼？
* 有用過什麼 CSS 框架？
* 有用過什麼處理非同步操作的 library？

## React

* React 框架是什麼？有什麼特點？
* React component 的生命週期為何？
* 哪些情況會造成 component re-render
* React key 的用途在哪裡？
* 用過 React Hook 嗎？它要解決什麼問題？
* React Hook 的規則有哪些？
* 請舉出三種 React Hook 並說明各自的用途是什麼?
* 使用 useState 時可以給定一個初始參數，也可以給一個function，兩者差別在哪
* useState 怎麼使用？setState 的時候要注意哪些事項？
* 假如 useState 放巢狀的資料（例如：array of objects），更新狀態時要注意哪些地方？
* setState 是同步還是非同步？
* useEffect 怎麼使用？用途是什麼？有哪些要注意的地方？傳入的第二個參數作用是什麼？
* useEffect 回傳的 function 用途是什麼？
* 假如 useEffect 的 dependency array 放了物件或陣列，會發生什麼事？
* 用過 useLayoutEffect 嗎？
* useRef 怎麼使用？跟 useState 差別在哪裡？
* 假如 useRef 放了物件或陣列，再放到 useEffect 的 dependency array，元件 render 的時候 useEffect 會執行嗎？
* useRef 的值改變會不會造成 useEffect 觸發？如果把變數放到 component 之外呢？
* memo 跟 useMemo 分別怎麼使用？差別在哪裡？
* useCallback vs. useMemo
* 把所有變數都用 useMemo 包起來的做法可不可以？為什麼可以／不行？
* React 下層元件的 state 要給上層元件用的話要怎麼做？
* 有聽過 React batch update 嗎？可以稍微解釋嗎？
* 什麼是 prop drilling？要如何避免？
* Context 和 Redux 的差別在哪裡？可不可以用 Context 代替 Redux？有沒有什麼是其中一個做得到另一個做不到的？
* 要寫出好維護的 React code，需要注意或遵守哪些事項？
* PureComponent 是什麼?
* 寫過 useReducer 嗎？試著改寫範例程式碼看看
* 用 Context 改寫範例程式碼
* Controlled Component 和 Uncontrolled Compoenet 有什麼差異？
* React 17 和 18 的差別？
* 什麼是 reconciliation？
* 什麼是 React Fiber？

## Vue

* vue的生命週期
* 雙向數據綁定的原理
* Vue 中給 data 中的對象屬性添加一個新的屬性時會發生什麼？如何解決？
* $set 的實現原理是
* vue 打包優化方案

## 版本控制類

* 請解釋目前你使用 git 版控的流程

## 網路類

* 知道哪些 HTTP methods？
* GET & POST 兩者差異是？
* PUT & PATCH 兩者差異是？
* 有實作過登入功能嗎？可以說明你怎麼做的嗎？
* Cookie 跟 session 的差異是？
* Cookie、localStorage、sessionStorage 的差別？
* 知道怎麼做 SEO 嗎？
* 什麼是 CORS？
* HTTP 狀態碼 304 代表什麼？是多好還是少好？

## 效能優化類

* 如何降低網頁載入的效能？
* 如何加快頁面載入速度？
* 假如後端有很大一包資料（假設是高達 5 MB 的文字資料），需要花一些時間才能下載完，你身為前端工程師，能想出幾種方法去縮短使用者的等待時間？
* CSS 擺放在前面 和 JavaScript 擺放在後面 對效能的影響？
* 本機載入 JS 檔和 CDN 載入的差異？
* 打包成 webpeck 和分開載入的差異及對效能的影響？
* 假如遇到網頁有效能問題，你有什麼策略應對？

## 設計方法／設計模式類

* 知道 OOP 嗎？什麼是 OOP？
* 聽過 MVC 嗎？什麼是 MVC？
* 聽過 functional programming 嗎？
* 什麼是 immutable / immutability？

## 資料結構、演算法類

- 解釋一下什麼是 Stack、Queue。兩者的差別為何？什麼地方會用到這兩種資料結構？

## CSS

* 水平垂直置中的不同方法
* 說明下列 CSS selectors 的差別：
- div .a.b
- div .a .b
- div section
- div > section
- div + section
- div ~ section
* CSS Specificity（通常會要你排優先順序）
* 什麼是 CSS Box Model？
* box-sizing 的 content-box 和 border-box 差別，預設值為何？
* id 跟 class 的差別？id 可以多於一個嗎？
* :before 跟 :after 用途？
* display: inline 跟 display: block 的差別
* 寫一個顏色漸變的動畫要用什麼 property
* ~~知道什麼是 block formatting context (BFC) 嗎？~~
* 會使用SASS、SCSS嗎？
* SASS 的 & 代表什麼？
* 知道如何使用 mixin 和 SASS、SCSS變數嗎？
* 寫過什麼 CSS 動畫？
* 常見的單位有哪些？差別在哪裡？
* font-size 單位 rem 、 em、 % 分別有什麼差別？
* 什麼時候用 padding 什麼時候用 margin？
* 知道什麼是 CSS reset 嗎？
* Flexbox 怎麼使用？常用哪些屬性？
* 規劃前端開發時，使用 Flex, Box, Grid 排版的考量是？

## 行為問題
* 能請你簡單自我介紹嗎？
* 為什麼想轉來寫程式／前端發展？
* 有帶電腦嗎？能展示一下你的作品嗎？
* 遇到程式問題都如何解決？解決的管道？有效性？效率?
* 過去經歷／學習前端上有遇到什麼挫折嗎？怎麼克服的？
* 通常你的開發流程是什麼？
* 開發流程來不及怎麼辦？
* 你有嘗試去接案嗎？
* 你有跟別人協同開發過嗎？例如跟其他人一起寫前端、或是跟後端、設計師配合的經驗？
* 開發時有沒有什麼比較不能忍受或討厭的事情？
* 方便透露目前的薪資待遇嗎？
* 期望的薪水是？
* 最快能報到的日期是？
* 關於公司你有什麼想問的嗎？
* 如何在設計師與前端工程師溝通的方式？前端工程師和後端工程師溝通的方式？使用的工具、溝通的模式？遇到的問題？怎麼解決？
* 有在研究 UI/UX 嗎？經常會瀏覽怎樣的文章？
* 有研究過設計準則嗎？
* 最近有學習什麼新的技術或知識？可以分享一下心得？（前端知識更新的頻率）
* 最近有對什麼還不會但有興趣學習的？不管是程式技術或是工具？
* 第一個接觸和程式是什麼時候？後續培訓課程的內容有關什麼？
* 選擇就職的公司時，前三項考量依序是什麼？
* 有沒有處理過跨瀏覽器的兼容問題？如何解決？
* 如果你是面試官，會最重視哪三個問題？
* 你在 Code Review 時最重視哪三件事？