###### tags: `information`
# FED Interview Question

# Open Question (根據面試者履歷來挑題目)
* 有沒有在參加技術的社群？有參與發表的經驗嗎？
* 哪一類型？視覺或工程亦或兩者兼具？
* 曾經解決過最有挑戰的問題？
* 有跨團隊或是跨國的溝通經驗嗎？
* 為何要離開現任公司?
* 對趨勢科技的了解?
* 你過去一年有發展或學習什麼新的技術嗎？
* 你認為前端工程師的定位是什麼，你自己怎麼定位你自己？你認為前端的價值是什麼？

# Technical Question
## 實務題 (根據面試者履歷來挑題目)
* 怎麼做 refactor? 如何確保正確性 / refactor流程
* 從哪些方面去評估系統是否符合效能需求、performance 是否夠穩定、夠好
* 你有 code review 的經驗嗎？如果今天發一個 PR 給你，你會如何下手？
* 有在專案中找出可以改善的地方並且實作嗎？從中學到什麼？
* 有寫過UI Testing(unit test, e2e test)的經驗嗎？可以簡單分享一下嗎？
* 有css preprocessor或CSS In JS (glamor, style-component)之類的經驗嗎？
* 有用過 JWT 嗎？請解釋一下他的運作流程
* 如何在多人合作的專案確保大家程式碼有一定的品質？
* 能使用技術面的方式嗎？

## HTML
### Junior
* cookies, session, sessionStorage 和 localStorage 的不同？
* 知道Semantic HTML是什麼嗎？
* 什麼是client render? 什麼是server side render？各別的好處與壞處
* 何謂Restful API?
* 什麼是ajax?
* 什麼是SPA?
* 如何实现浏览器内多个标签页之间的通信?

### Senior
* CSRF Cross-site request forgery
* 知道什麼是Critical Rendering Path嗎？
* Render Tree, DOM Tree and CSSOM Tree 三者關係？
* https://cythilya.github.io/2018/07/13/critical-rendering-path/

## CSS
### Junior
* 列舉css垂直置中的方法，能講多少是多少？
* 什麼是RWD?RWD怎麼實作?
* Mobile First 是什麼？
* 可以解釋一下什麼是Box Model?
* position relative、fixed、absolute 和 static 的差異性？
* 請介紹 pseudo classes，他的用處是什麼？
* 知道flexbox嗎？知道的話，可以大概介紹一下嗎？

### Senior
* 請解釋 Reflow, Repaint
* 使用js更改元素的width，請問他走過的流程？
* 說出三種減少reflow的方法
* 為何現在都不建議使用 table 來排版，他跟render的關係在哪？
* 請介紹 pseudo element，他的用處是什麼，他會有什麼問題？
* ::before、::after、::first-line、::first-letter和::selection
- 偽元素的內容實際上不存在網頁裡
- 塞了太多的重要的內容，反而會影響到 SEO 的成效

## JavaScript
### Junior
* null，undefined 差在哪
* function有哪幾種宣告方式？有什麼差別？
* let const var
* hoisting
* promise / callback
* closure
* var a = 1 -> 這段實際上是怎麼執行的？

### Senior
* 什麼是this，怎麼改變它得reference?
* Javascript的繼承
* Event loop
* immutable & mutable

## React

### Junior
* Why React? jQuery 不好嗎？用三句話說服我從jQuery改React
* 什麼是Component？
* 什麼是state? 怎麼改變state?
* 大概有哪些Lifecycle？(constructor,componentDidMount...)
* 請解釋 HOC，你會用在什麼情境下
* 知道 hooks 嗎？他解決什麼問題？

### Senior
* 知道shouldComponentUpdate嗎？為什麼我們要小心用它？
* 你知道 fiber 嗎？
* 請解釋 react 的 Concurrent Mode 和 Suspense
* Virtual dom
- 以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構。
- 用途是不直接操作 DOM，而改操作這些物件
- 待一個段落後，再將這些變更更新回真實的 DOM 上，以期提升效能。

## Redux
### Junior
* 可否基本介紹Redux
* 非同步的情況下要怎麼使用action去處理side effect

## 其他
* GraphQL
* server side render 好處與壞處
- 優點
1. SEO
2. 速度
3. 對於 mobile 減少 client side 的電量消耗
- 缺點
1. server loading 重
2. 不論點擊什麼網頁上什麼功能，每一次都是將整個畫面重新繪製
3. 使用者體驗不佳: 須重新reload 頁面才能拿到新的頁面

* firebase
* Backend as Service
* 缺點
* api-key 直接暴露
* 純使用 realtime DB，會把邏輯都放在前端