# 2019 前端面試心得
**替友人代po**
2019 年 8 月 - 10 月
## 公司列表
Linker Network
Pinkoi
17 media
QNAP
Gogoro GoShare
Hahow
Yahoo! Search
## 背景
私立大學資工系學士，面試之前軟體開發經驗兩年九個月，專注在前端領域有兩年，喜歡分享新技術給同事，平時沒事時都會上網看一些前端的技術文，但其實不會耐著性子去深入研究原理，非常隨性。這次找的工作希望是重視軟體工程，之前的工作其實都不太重視，不僅自己無法成長，軟體品質也會急速下滑，期盼這篇心得文能夠幫助學經歷都不算突出的朋友能夠找到理想的工作
## 求職需求
以下是在我心中有加分的點
- 前端使用 react
- 重視軟體工程
- 有技術討論的風氣，教學相長
- 同事之間的關係夠好
- 一個對社會有正面意義的產業、企業
## 過程
面試初期，我天真的認為把自己平時的樣子展現出來就是最佳的面試技巧，當然是吃了不少土，面試幾次之後，其實有逐漸發現自己的不足，去參考別人的面試心得，開始刷 leetcode、回頭去補 CS 知識，library、語言、協議和瀏覽器的原理
### Linker Networks
這間公司鄉民討論甚少，非常神秘，只知道是一間技術很深的 AI 新創，多數分享都是在第一關電話面試就沒後續了。
第一關 電話面試
面試官問了一些過去的工作經驗，技術方面則有 event loop、何謂非對稱加密、react hooks 優點、設計模式等等
第二關 面試
輪流與前端工程師、team lead、整個工程團隊 leader 及老闆談話，有問到未來五年有何目標，typescript `deep readonly`、closure、functional programming 有哪些特性？ 等等，在這關狀態我非常差，被問到快速排序法就覺得很心虛，因為我完全忘光也沒有準備基礎知識，老闆曾經在美創辦一間公司，最後23億美金被收購，聽了就覺得很有吸引力
第三關 面試
HR 做了一些性向測驗，然後是一位後端資深工程師進來上機考，`linker list reverse`、給定一個有序陣列及一個值，找出值的索引值 `function findIndex(orderedArray: number[], target: number): number`，一開始我提出 `O(n)` 的方法，後來又問有更快的方法嗎？ `O(logn)`，也問到線性代數、離散數學熟不熟，還有瀏覽器在作業系統內是如何運作的？
另外就是這時候我還沒好好準備面試，所以這關結束後我就覺得沒機會了
結果
無聲卡
### Pinkoi
一開始走進去辦公室 HR 就請我到一間會議室，並拿了一份前端考題給我做，然而我的上一間公司 CSS 都是 designer 寫的，我有兩年沒有 CSS 實務經驗，所以其實沒有答的很好，後來交卷過了十五分鐘，原本期待是工程師進來，卻是 HR，他問我覺得哪裡答得不好，我說 CSS，他委婉的說沒錯，並告訴我那些問題都很簡單...，我回答確實蠻簡單的，但這些 CSS 沒有必要背下來，只要懂用法有需要再查語法就夠了，當然我在沒見到工程師的狀況下就被請走了...，很屈辱，我也必須承認 CSS 領域真得是我弱點，Pinkoi 比較需要對 CSS 熟練的人
結果
感謝函
### 17 media
這間是 head hunter 介紹我去的，我知道他們之前發生的事，但我也知道他們蠻重視技術的，所以就去試試，這時候我就開始花很多時間在刷 leetcode，準備面試
第一關 前測
就是一個簡單訂飲料應用程式，但他們真正想看的是整個專案的架構，如何規劃檔案結構，寫單元測試，用了哪些 `dependencies`、`dev dependencies`，所以其實要把做大型專案的方法應用出來，才能脫穎而出，可以參考我寫的版本 daily-drinks
https://tinyurl.com/y5clevyy
第二關 面試
一開始先是兩位工程師進來，簡單的問一些技術問題，tree shaking、用過哪些 webpack plugin，然後就是白板題，實作 `Promise.all`、`array deep flatten`，第一題在細微的部分跟考官討論下解出來，第二題在一開始就有想出遞迴的方式解，但考官想要其他方法，有 `O(n)` 的方法，最後在考官的關鍵提示下解出來。接下來有主管及 HR 來聊過往的工作經驗、之前的工作為何離職...等等
結果
head hunter 說白板題沒有過，所以沒有後續
### QNAP
104 上面收到邀請
第一關 面試
這天去汐止總部面試兩個部門，分別是台北及汐止的團隊，很不幸地從我走出火車站都在下大雨，所以整個面試都很不舒服的穿著全濕的鞋子。接待小姐給了我三份試卷，一份智力測驗，另外兩份分別是兩個部門出的題目，由於鞋子溼透，所以在寫智力測驗的時候有夠煩躁不想動腦，想趕快寫一寫面試，後來才知道如果錯太多是會被請走的，另外兩份試卷並不會太難，基本上有經驗的工程師都能答出來。交卷之後沒多久，汐止的部門主管以及一位女生資深工程師進來跟我聊天，是兩位非常好相處的人，基本上沒問太多太艱澀的技術問題，對於下一份工作有什麼要求、
react vs jQuery，過程非常愉快，最後工程師遞給我名片，說如果還有什麼想了解的都可以在聯絡她
再來就是用視訊會議與台北分部的人面試，不過面試過程我覺得彼此似乎合不太來
第二關 白板題
隔了一週又來一次總部，我一直以為白板題會是網路上盛傳的考古題，但很不幸地不是，題目是 Move Zeroes
https://tinyurl.com/y5kxjuvc
，給十五分鐘，沒寫過，當下有點腦袋發麻不知所措，還好馬上回過神，用了跟考古題類似的方式解題 Two Pointer
https://tinyurl.com/yy2pmgwj
，宣告兩個索引變數，從左邊開始一個索引找0，另一個尋找零之後的非0值，然後位置互換，直到陣列結束，過程也是膽戰心驚，因為實作上有很多細節要處理，我一邊解說，一邊解題，時間到後，面試官問我為何要選擇這個比較困難的方法，我說因為這個解法時間複雜度為 `O(n)` 空間複雜度 `O(1)`，直覺上通常不會這樣解，面試官說，通常面試者都是用最直覺得方法解，但最直覺得效率並不好，並說我解得不錯^ ^
之後就是與 HR 的談話，她向我透露他們用白板題來核薪
結果
offer get
### Gogoro GoShare
之前參加過 ggr 舉辦的技術分享會，讓我覺得他們軟工做的很細，所以就 104 投遞
第一關 面試
一進去會議室，HR就給我一張題目卷還有空白 A4 紙，這讓我聯想到大學的申論題，確實也是申論題，計時三十分鐘，其實我剛看到前幾題就有點懊惱，有些是我閱讀過但沒仔細理解的觀念，CORS、http cache、browser render process、css `left` and `translate` 渲染有何不同、`prototype`、`this` 判別、`function.call bind apply`、box model、`const let var hoist`
...等等，後來一位資深工程師進來後，便開始把剛剛題目卷，做更深入的問答，在問答過程中可以感受到，資深工程師在前端領域很深，也很有經驗，並且得知團隊目前十人左右，是非常初期的階段。
工程師面談完之後，後續有部門主管以及 HR 的談話，分享一些關於工作氣氛還有 Goshare 的未來發展
結果
offer get
### Hahow
對 hahow 很有好感，重視技術，福利不錯，又對社會有幫助，所以就 Wanted 投遞
第一關 前測
題目好像很用心有設計過，是一個 call api 來 show 資料的 app，他們真正想看的是整個專案的架構，如何規劃檔案結構，寫單元測試，用了哪些 `dependencies`、`dev dependencies`，所以其實要把做大型專案的方法應用出來，才能脫穎而出，可以參考我寫的版本 react-heroes
https://tinyurl.com/y6tv2c7u
第二關 面試
hahow 辦公室空間非常舒適，還有廚房可以料理，員工在餐桌前、沙發上工作，很自由的氛圍
一開始有 team leader、frontend engineer 進來談話，聊聊過往的經驗，未來五年的規劃，期待怎樣的工作環境等等，技術提問有些是從履歷內容來問 `this`、MVC vs MVVM、redux pattern、event loop、event bubble、`setTimeout` 如何倒數、stack context、提出三種優化 SEO 的方法
後來是 co-founder，彼此交換了很多想法，聊聊創業的想法，為何要當工程師等等
結果
感謝函
### Yahoo! Search
大名鼎鼎的 yahoo 一定要投遞看看
第一關 電話面試
這關只有跟 HR 簡單聊一下，聊過往工作的挫折、為何離職等等
第二關 電話面試
隔一個禮拜後便跟團隊成員進行對話，主要是技術問題，https 原理、解釋各種 css `position`、如何讓新的 js 語法在舊的瀏覽器跑、解釋 polyfill、`const let var` hoist、該如何讓 dom 元素消失在螢幕上？並解釋其差異性還有效能影響、該如何判定 request 是搜尋引擎爬蟲還是一般使用者？
第三關 面試
隔了一個工作日，HR 通知我進入下一關面試，不過我就婉拒了，因為已經決定好要去哪間公司了
## 後記
千萬不要以為只是做前端，功能做出來就夠了，面試官幾乎都很重視運作原理，而要快速理解運作，CS 的基礎會是關鍵，例如 https 就必須要有對稱加密、非對稱加密為背景知識，hoist 就必須要知道 programming language 原理、瀏覽器原理必須要知道何謂 process、thread，而且有這些背景知識的幫助之下，假如被問了一個沒學過的問題，不至於整個呆掉，能從觀念推敲
刷題的部分，其實我都只刷 easy（或許之後還想再更上層樓 easy 不夠），不過有效地刷題並不能僅僅只是答案答對而已，做題之前要先想到一個複雜度優的解法，如果半小時都想不出來好的解法，也不要硬幹效率差的，那沒用，直接 google 其他人的解法，因為有些解法需要巧思，想破頭也想不出來，看別人的方法馬上學起來，面試官評分關鍵是你的時間複雜度、空間複雜度，這樣一來跟其他 candidates 的差異就會出來
## 補充資料
以下是我整理起來，準備 react 前端面試需要了解的原理知識，以及很棒的文章
- https and http
- TCP/IP
- how browser works?
- CORS
- http cache
- event loop
- micro task and macro task
- process and thread
- CSRF
- XSS
- merge sort
- quick sort
- heap sort
- react fiber
- hoist
Inside look at modern web browser (part 1)
https://tinyurl.com/y957ow8c
Inside look at modern web browser (part 2)
https://tinyurl.com/y3jd2dzh
Inside look at modern web browser (part 3)
https://tinyurl.com/y42fjacn
Inside look at modern web browser (part 4)
https://tinyurl.com/ybscss6q
跨來源資源共用（CORS）
https://tinyurl.com/yyjbz72r
循序漸進理解 HTTP Cache 機制
https://tinyurl.com/y3aj5q4z
我知道你懂 hoisting，可是你了解到多深？
https://tinyurl.com/y2eqzebx
彻底搞懂HTTPS的加密机制
https://tinyurl.com/y3u4ksam
浏览器的工作原理：新式网络浏览器幕后揭秘
https://tinyurl.com/y2ykkgqx