# 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