---
tags: 前端面試問題
title: 前端面試問題
---

# 面試問題

HTML and CSS
---
- [什麼是 semantic HTML？](/fFc9SmwuQWKQ6MYI-gHj1Q)
- [display: inline 和 display: block 的差異？](/yMjEDx9GSN6rGylhWIapEg)
- [display: none 和 visibility: hidden 的差異？](/pBjbJBb4QdeUEH_FWWtzSw)
- [div 和 span 的差異？](/-gdtAPNnTPqMRayxfemfZw)
- [試著說明 Flex Box 的用法](/SCG66BGaS7aGHugnWp7Yng)
- [如何優化網頁的載入速度？有哪些可能的做法和考量？](/DNK85eZ6SCezIlToh1ruRw)
- [如何知道一個新的 HTML、CSS、或 JavaScript 功能是否相容於所有瀏覽器？如果你要用的新功能只能相容於 Chrome 的話怎麼處理？](/aaGPpxp6QxmAoyU4gicGLA)
- [請解釋 px、em、rem 使用在 font-size 上的差異？](/N37HtmZUTgeUUCTUaabBog)
- [什麼是 CSS 預處理器？](/ZEIDskCIQDCW83vVqAJezQ)
- [* { box-sizing: border-box; } 是做什麼的？](/OcaNmE1nTMmBLv_G70EE9w)
- [flex-box](/7uobhsy3QkKiUNLONFnPfg)
- [Ｎ種使元素水平/垂直居中的方法](/oEBn_B4mRSCtXjfnSwAqtg)

JavaScript Basic
---
- [Explain the mechanism of the ““event loop”” in browser.](/UO8iXjvJT_y67A2NZZJZTg)
- [Spread Sytnax ... 怎麼用？](/PVs01vJBRvOJ55s3ihZA7g)
- [null 和 undefined 的差異？](/YPTVNZyvT8m3lGcqxEwoWw)
- [什麼是 NaN？在什麼情況下會出現 NaN？如何偵測變數中的資料是 NaN？](/qxviBBueSWSNm0FnD7AYPw)
- [解釋 Primitive Data Type 和 Reference Data Type 的差別。](/vIenW05KRAitgRshHhPHBg)
- [解釋一下變數 scope 的概念、使用 let 和 var 宣告變數有什麼差別？](/FBddUzgATzKVcQHDWzlb3A)
- [什麼是 Closure？能否舉例說明？](/f3DVA4kpTc-5bNI1L76sFg)
- [試說明 Hoisting 的現象？](/JpUmJHUjSq-2ZEqueVWJAQ)
- [什麼是 this？](/DPWfFcQ2RAWEOasByrkNiA)
- [什麼是 Pure Function？](/Bko3kxfvR0eneUddlktxWg)
- [什麼是 Higher-Order Function？](/s4-jKoOeS_2LxMkuLbENCA)
- [解釋一下什麼是非同步的程式？如何運用 callback 或 promise 或 async await 包裝非同步程式？](/vfGZdV0aSKKqfbcVgjXrCw)
- [有寫過箭頭函式嗎？箭頭函式和其他函式的寫法除了語法之外，還有什麼差異？（特別是 this 的差異）](/Ucxv2cH-R1-Y66I2hiZ6lg)
- [解釋一下你對原型鍊的理解？](/YbCVwqhkSyaKGR9BkaVPUg)
- [== 和 === 的差別？](/-xTLaen0Rqm9UfZRJvcyCA)
- [請解釋 deep copy 與 shallow 的差異？](/jpFfS7jvRQyz__WeqShPjw)
- [什麼是事件傳遞 (event propagation) ？試說明事件處理中 bubble 和 capture 的差別](/rNA8RQeOTXeb-Y72vp93Wg)
- [什麼是事件物件 (event object)，你在程式中如何取得與使用？試說明 target 和 currentTarget 的差別](/sQkEC4hTScSvkDBMf_9Jfw)
- [有遇過效能問題嗎？如何改善它？](/Y-zjknFHSva_xbDKTcw4Rw)
- [ES6語法有哪些](/PSYpjNf4S2m1yuqai3q8qw)

React / Redux / Styled Component
---
- [試著說明 React 的核心概念。(component、props、state)](/UvrH1tQSTtWmGr-Amcpsgg)
- [試著比較 React Class 和 Function Component 的生命週期](/Ps6rsxvAQ6mw7NkmFA3K3A)
- [有使用過 Redux 嗎？Redux 的出現是為了解決什麼樣的問題？Redux 的基本架構為何？](/Z_IQ-qVhQ2SC3Qzv-NJluA)
- [有使用過 React Router 嗎？React Router 的轉址和多頁式網頁的轉址有什麼差別？](/6-U0UnX3Sz2AA1hdn4o-wQ)
- [有使用過任何 React 相關的套件嗎？你如何選擇以及如何使用？](/82XAC9fMQjmmbcZTqLaqXg)
- [模擬面試題 - React-router-dom](/W0DFnOXqRoyGuSSrIl-8dQ)
- [為什麼選擇 Styled Component ? 和其他 CSS-in-JS 方法的差異在哪？](/kGAZ5FVRRXiH4Lx6YRxL_A)
- [reportWebVitals](/NBPtuEw2TdOkgQsURt4E9A)

網路和瀏覽器
---
- [什麼是 RESTful API，能否分享你串接 RESTful API 的經驗？](/TXhTUyROTo-oDl7JRguzZQ)
- [什麼是 Cookie？試說明 Cookie 的運作方式？](/2N3XhLK0RqidjsQNXME79g)
- [什麼是 Web Storage？和 Cookie 的特性有什麼差別？](/wvZFdI3-RB-FuXHIAZsC_A)
- [Websocket 通訊協定和 HTTP 通訊協定的關鍵差異是？](/i8IjrOI_SRmC2z6qeuFCcQ)
- [什麼是 CDN？](/ptJkYXx1SfSUYcgmLOUeLA)
- [模擬面試題 - 請解釋 CORS Issue](/d1iv67OsTveZMPonxF6zZA)

Git
---
- [知道 Git Flow 嗎？你如何在開發過程中使用 Git 做版本控制？](/oKPy1bVDQ0aqoeSe2S3xwA)

Code Quality
---
- [你有聽過 eslint 嗎？你用的是哪一套 rule？有沒有遇過哪一條規則讓你覺得綁手綁腳的經驗？你如何處理？](/m1DhD6NPS1Kc49X2Hksu0w)
- [你對重構的瞭解？](/fV5ncAaLQMCKOJqmE3fyzA)

程式碼考題
---
- [程式碼考題](/mvtYPfWjRzuHqdU_hl2XJQ)

其他
---
- [Personality](/uoOKmPD0QNuJjZu_D8tFhg)
- [個人專案問題](/-5HVEQtzSHOu24Fkwy2qlQ)
- [網路上蒐集到的各種面試問題](/tF16m9LcTuirDV6qE1BjZQ)