# 前端面試問題

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

## 一般類

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

## CSS

* 水平垂直置中的不同方法
* 說明下列 CSS selectors 的差別：
- div .a.b
- div .a .b
- div section
- div > section
- div + section
- div ~ section
* CSS Specificity（通常會要你排優先順序）
* 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、 % 分別有什麼差別？
* 知道什麼是 CSS reset 嗎？
* styled-component vs. css module

## JavaScript

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

### TypeScript

*少數公司會問，但有被問到了，就記錄一下*

* type `any` vs. `unknown` 的差別
* `extend` 在泛型中的用途

## 套件／工具類

* 為什麼選擇你現在用的這個 JavaScript 框架？
* 用過其他 JavaScript 框架嗎？跟你現在用的框架差別在哪裡？
* 有用過 Webpack 嗎？
* 平常寫 code 有用 linter 嗎？用哪個？
* 什麼是SPA？優缺點為何？
* 有使用過 Gulp 嗎?
* Canvas和 WebGL的差異？
* 有使用過 Three.js 嗎？
* 知道什麼是 WebRTC嗎？
* 知道什麼是 WebAssembly 嗎?

## React

* 用過 Redux 嗎？它要解決什麼問題？
* React component的生命週期為何？
* 哪些情況會造成component re-render
* React key 的用途在哪裡？
* 用過 React Hooks 嗎？它要解決什麼問題？
* 使用 useState 時可以給定一個初始參數，也可以給一個function，兩者差別在哪
* useEffect 傳入的第二個參數作用是什麼？
* useEffect 回傳的 function 用途是什麼？
* useCallback vs. useMemo
* React 下層元件的 state 要給上層元件用的話要怎麼做？
* 有聽過 React batch update 嗎？可以稍微解釋嗎？(React 18)

## 版本控制類

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

## 網路類

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

## 效能優化類

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

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

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

## 相關資源

* [2022前端面試題目 by Alicia Lo](https://sugary-backbone-f2f.notion.site/2022-740abe85a0b64465b01cea761b0fe769)[target=_blank]
> 感謝 Alicia Lo 分享，我已經把部分題目節錄到這篇筆記了 🙏 [name=mingjunlu]