面試官筆記

大分類
Frontend
By Mark.Ku
interview

Front-end-interview

開場

  • 可以請你自我介紹，並用偏技術角度，介紹這幾年做過了什麼，盡在以五分鐘內說完。

    暖身：

  • 面試官自我介紹，負責工作介紹，職缺期待介紹
  • 請面試者針對剛剛的內容自我推薦或是介紹相關經驗
  • 前份工作負責什麼角色？可以介紹一個你最有成就感的專案嗎？
  • 你的期待？你今年最想學會甚麼？
  • 最近有看什麼新技術嗎？有心得嗎？有實作嗎？有Open source可分享嗎？
  • 喜歡寫Code嗎？寫code最讓你感興趣的部分是什麼？
  • 白板寫字串反轉
  • 你上份工作學到什麼
  • 最近有閱讀什麼程式相關的書籍嗎?

觀察重點：

  • 態度
  • 對Front-end的興趣
  • 喜不喜歡學新東西
  • 與Team的Tone合不合
  • 基本skill夠不夠

技術題：(目標對象：2 year experience above)

Session/Cookie

  • 一個頁面登入之後，下一頁怎麼知道登入的狀態？
  • 常使用到的使用者資料你會存在哪裡？

Performance：

  • 有沒有實作過Cache ? 什麼時候要用到快取
  • 網站靜態資源如何優化？怎麼Bundle？Bundle成幾隻？怎麼決定？Bundle之後怎麼debug?
  • 靜態檔案被cache後改版需要更新怎麼辦? 版號? 還有其他方式嗎?
  • 使用過CDN嗎？
  • 請介紹幾個你用過讓page loading變快的方式
  • 一個放文章的網站需要常常Query首頁50篇文章，你會怎麼做？
  • 有沒有遇過被抱怨網站loading速度慢？情況是？如何解決？你第一時間從哪看？
  • 如果有大約500筆資料，要在網頁上用分頁顯示你會怎麼做？5萬筆資料呢?
  • Memory cache哪時候放進去？這樣會犧牲啟動的時間，開發就會變慢怎麼辦？
  • Application有多台server時cache怎麼辦？放DB的話誰來Update cache?
  • 遇過Production DB拉資料很慢嗎？你會怎麼查？怎麼知道慢在網路還是query還是…？

SEO：

  • Ajax拿資料對SEO的影響？
  • SEO的重點是什麼？做過哪些SEO優化？用過什麼工具？ Meta data, key word, title, RWD, content, server render, routing, url rewrite, canonical url, user experience, robots.txt
  • 網站maintenance的時候爬蟲還是會來爬資料怎麼辦？

Testing

  • 寫過什麼語言的testing呢？
  • 你要測試的function會call updateDB怎麼處理？
  • TDD是什麼？TDD和先寫程式碼再寫測試有差嗎？
  • 為了TDD用過什麼Design pattern嗎？
  • BDD呢?
  • E2E用過什麼呢?

Data analysis

  • 使用GA的目的？用過GA蒐集event嗎？怎麼做？
  • 使用過ELK Stack嗎？

Design

  • 如果你要把每個request的input/output log起來你會怎麼做？
  • 哪時候會使用Interface？

DevOps

  • Devops是什麼？
  • 使用過CI/CD tool嗎？好處是什麼？
  • 用過cloud service嗎？好處是什麼？

Debugging

  • 如果網頁上某個使用者的訂單資料不見了你會從哪裡開始看？
  • 10台Server log怎麼查？

Advance

  • 三個application, website, mobile, mobileapp都需要跟你的api拿一樣的資料，但是mobileApp先改版其中一欄位需要不一樣的資料怎麼辦？
  • 做過realtime app嗎？後台發message給一個使用者andy怎麼做？怎麼知道andy mapping到哪個connectionID？若mapping存在server上，有多台server怎麼知道mapping？

Coding

Javascript

  • <script>放header和End of body有甚麼差別？stylesheet呢?
  • <script async defer>差別？
  • 請實作:duplicate([1,2,3,4,5]); result:[1,2,3,4,5,1,2,3,4,5]
  • == vs ===
  • 如何從A client request B domain 資料？(Cross domain ajax)
  • Closure
  • 前端Framework：React-state/props, Angular-directive
  • NodeJS：Express怎麼處理error/request/response/next？
  • Defer/Promise：Resolve Reject是什麼？你在哪邊有用過Promise呢？
  • 解釋javascript hosting
  • 基本型別vs參考型別?
  • 請條列「一般 Function」與「Arrow Function」的差異
  • 請問當你在瀏覽器的網址列輸入「google.com」按下 Enter 後，會發生什麼事？
  • setInterval 為什麼時間上不精確？
  • var 和let的差異?

CSS

  • ID vs class
  • 你都怎麼修Css bug?
  • 用過哪些CSS framework嗎？
  • RWD原理是什麼？
  • Sprite
  • Font-icon
  • 列出並介紹你知道的 css display property

Vue

  • 說說你對 SPA 單頁面的理解，它的優缺點分別是什麼？
  • v-show 与 v-if 有什么区别？
  • Class 与 Style 如何动态绑定？
  • computed 和 watch 的区别和运用的场景？
  • 谈谈你对 Vue 生命周期的理解？
  • VUE 組件間溝通，有那些傳遞的方式?
  • Vue如何實作繼承 ?
  • Vue extend 和mixin差異?
  • Vue觀測的物件變更後，沒有更新，你會怎麼做?

Reference

https://github.com/h5bp/Front-end-Developer-Interview-Questions https://github.com/Asing1001/front-end-interview https://juejin.cn/post/6844903918753808398