# 前端面試問題 不定期更新我遇過的前端面試題目。如果想補充題目的話,歡迎登入後編輯。 ## 一般類 * 能請你簡單自我介紹嗎? * 為什麼想轉來寫程式/前端發展? * 有帶電腦嗎?能展示一下你的作品嗎? * 遇到程式問題都如何解決?解決的管道?有效性?效率? * 過去經歷/學習前端上有遇到什麼挫折嗎?怎麼克服的? * 通常你的開發流程是什麼? * 你有嘗試去接案嗎 * 你有跟別人協同開發過嗎?例如跟其他人一起寫前端、或是跟後端、設計師配合的經驗? * 開發時有沒有什麼比較不能忍受或討厭的事情? * 期望的薪水是? * 最快能報到的日期是? * 關於公司你有什麼想問的嗎? * 如何在設計師與前端工程師溝通的方式?前端工程師和後端工程師溝通的方式?使用的工具、溝通的模式?遇到的問題?怎麼解決? * 有在研究 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]