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 的差別
  • typeinterface 的差別在哪?
  • 請說明泛型(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。兩者的差別為何?什麼地方會用到這兩種資料結構?