# 前端面試官指南

## 目標

- 鑑定面試者的 **人格**
- 見證面試者的 **基礎知識**
- 發掘面試者的 **長處**


## 面談類別

### Personality

- 為什麼離開前公司
- 覺得自己在前端這塊領域 **擅長什麼** 或是 **有什麼可以拿出來說嘴** 的
- 習慣用 tab 還是 space？
- 如果你加入了一個專案，但是他們的程式碼縮排和你習慣的不同，你會怎麼做？

### Ｗeb

- 輸入網址後到出現網頁，這之中發生了什麼事
- 知道漸進增強 (progressive enhancement) 和優美退化 (graceful degradation) 嗎？
- 有 Streaming 的經驗嗎？
- 如何實作一個需要支援多國語言的網站？
- 請解釋 CSR, SSR, SSG 分別是什麼？


### HTML

- 描述下列之間的不同 <script>, <script async> & <script defer> 
  - https://blog.xuite.net/vexed/tech/61308318


### CSS

- 解釋 visibility hidden 跟 display none 的差異
- 針對不同版面(手機, 桌幾)要怎麼調整 css


### JavaScript

- CORS 是什麼，它解決了什麼問題？
  - https://blog.techbridge.cc/2017/05/20/api-ajax-cors-and-jsonp/
- 知道 Promise 嗎？知道 async, await 嗎？請回答下面這段 Code 的結果

```javascript
const func = async (url) => () => {
  const result = await fetch(url).then(r => r.json())
  console.log(result)
  return result
}

func()('SOME_JSON_URL') // what happen?
```

- 請回答下面這段 Code 的結果

```javascript
var a = { n : 1 };
var b = a;
a.x = a = { n : 2 };
console.log(a.x)
console.log(b.x)
```

### React.js

- higher order function / higher order component
  - https://ithelp.ithome.com.tw/articles/10194000
- reconciliation
  - https://zh-hant.reactjs.org/docs/reconciliation.html
- render props
  - https://zh-hant.reactjs.org/docs/render-props.html


### TypeScript


### Algorithm

```
input: '[1,2,3,[51,2,32,[],[2],1],5]'
output: [1,2,3,[51,2,32,[],[2],1],5]
```