Try   HackMD

前端面試問題

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

一般類

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

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 排版的考量是？

JavaScript

  • 什麼是作用域 (scope)？
  • 什麼是 hoisting？
  • 什麼是 event loop？
  • function declaration vs function expression 差別？
  • By value vs by reference
  • 在不同情況下 this 指向對象會是什麼？
  • 什麼是原型鍊（prototype chain）？
  • 什麼是閉包（closure）？用途是什麼？
  • 非同步與同步操作混用時的輸出順序
  • Promise 熟不熟？
  • 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 嗎？
  • 知道 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 有什麼差異？

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。兩者的差別為何？什麼地方會用到這兩種資料結構？
Last changed by 
 
mingjunlu
0
118
56458
Published on HackMD