我的2019春招(暑期实习)记录

今年的春招(暑期实习)批已经过去大半了,相信不少同学已经拿到了心仪的offer了~本来打算暑假有空再写写这段经历,不过今天晚上正好有空就记录一下吧,希望能给正在或者今后要找前端实习、工作的同学一点点启发和建议。(由于我妹子在北京读书,所以实习的话我只想着申请北京的实习机会,这是本文的大前提)。

我自己是北邮研二的学生,「主修」前端。我自己的面试经历不多,从1月份到现在总共只面了3家:头条,腾讯·微信和蚂蚁金服·支付宝,很幸运都拿到了offer。其实我觉得主要还是内推对我的帮助特别大,没有内推的话我估计也很难拿offer了。所以经验第一条:能找内推尽量通过内推来获取面试资格。帮你内推的学长学姐一般会帮你查看(甚至修改)简历,有的可以直接部门直推给leader,等于省去了HR筛简历的步骤,所以能找到内推就尽量走内推而不是单纯走网申吧。

头条

1月份的时候有个头条的学长通过邮件联系到我,对我的做的PicGo很感兴趣。跟我要了非常简陋的简历,就把我内推了。

不过后来面试邮件发来后我才知道给我的推的职位是iOS研发工程师。他们组是移动端的组,要招前端,但是可能没有前端名额,就用iOS的职位给我内推了。然后我也就稀里糊涂的去面试了。说实话毕竟是第一次面试,并且当时周边的同学也都没有开始找实习,在仅有的几天时间里我准备的特别不充分。

头条总共面了我三面,都是视频面。其中一面二面是连着的(一面一结束,马上二面面试官来面我)。由于这个组的性质比较特殊,来面我的面试官都不是写前端的,因此问的网络、计算机相关的问题会更多点。我事后(3月份面完微信和蚂蚁之后)才觉得当时1月份面头条的时候简直回答得一塌糊涂。

不过感觉自己做的很正确的一件事就是面试完马上把问题记下来了。从中也看出三家公司的侧重点不同。

头条一面

头条一面是个年轻的小哥,是做移动端的。先问了我的项目,因为都是前端的他也没太了解,就开始问问题了:

  • UTF-8 UTF-16 和 Unicode 什么关系 【当时不会 | 编码规则和字符集】
  • TCP三次握手可以理解,为什么需要四次挥手 【四次挥手是2+2】
  • 常见的HTTP状态码 【相信你们都会】
  • GET\POST请求区别 【常规问题】
  • HTTP报文分为几部分,分别说了啥,头部尤其重要 【当时说的不全 | 3个部分,以及请求和响应报文的区别】
  • HTTPS与TLS或者SSL有了解么,加密是对称加密还是非对称加密 【当时不是特别了解 | 二者都有】
  • JS内存管理机制 【标记-清除】
  • 数组和链表区别和应用场景 【查找-操作】
  • 动态数组如何实现,查找和插入哪个代价大【当时不会】
  • Electron的原理,简单描述 【Node.js+NativeApi+Chromium】
  • Vue的原理,简单描述 【Object.defineProperty + Dep + Watcher】
  • 平时怎么学习新知识,从什么渠道 【博客、掘金、GitHub、StackOverflow等】
  • 开发项目中遇到最困难、最有挑战的事 【PicGo的插件系统】
  • 算法题1,求数组里最大和的子数组 【思路说了,没写出来】

一面算法题虽然思路说对了,但是没写出来的时候我觉得自己已经凉了。结果居然面试官说「你等一下,我去叫二面面试官」。

头条二面

和一面就隔了3分钟。二面是交叉面,是另外一个部门的面试官来面的。这个面试官年龄一看就比一面面试官大。简单自我介绍之后,他就开始问我问题了:

  • 如果我是一个Leader,想要把APP里某个页面的首次开屏渲染时间降低,如何协调前端、服务端、客户端同学。【我说了缓存相关的,不过面试官说不够】
  • 从输入一个URL到最终用户看到界面,经历那些步骤【常规题】
  • 对HTTP/2有没有了解,以及QUIC协议【都了解过,稍微说了一下我的认知】
  • HTTP缓存,304状态码如何而来【常规题】
  • 算法题2,单链表是否交叉,如何算重叠个数【说了一下思路,但是不是最优解】

算法题2现在看来真的超级简单。当时我真的没刷过题,平时对算法训练也很少,所以说的思路能过但是不是最优解。面试官说「行吧」(当时觉得凉了哈哈)。

头条三面

三面和二面隔了大概几天吧。其实面完二面觉得还是很悬,结果还是收到HR的三面约时间电话。三面面试官是部门leader了。这个面试相对来说最轻松,基本没有问什么复杂的问题:

  • 谈项目 【简历上的,主要是PicGo】
  • Electron原理 【一面说过了】
  • markdown渲染原理 【正则匹配】
  • 对前端框架的想法 【从开发效率到后期维护还有工程化角度说了自己的认知】
  • 有什么想问的 【问了以后要做啥】

由于卡着1月底快过年了,所以HR那边在年前给了我口头offer,年后回来就给我发了正式的offer。

作为人生中第一份offer,还是挺激动的。不过不是 前端开发 的职位让我心里一直有点不舒服。我想去的其实是专业的前端团队,以及之后入职后做的东西也不是自己特别喜欢的,所以我在想着年后回学校再找找有没有自己更喜欢的实习岗位。当然头条这个岗位也很棒了!

经验总结二:算法、数据结构和计算机、网络基础知识很重要,哪怕是前端研发工程师,也是一名工程师。 所以我寒假回去后就开始针对自己薄弱的算法和数据结构部分开始了恶补。

腾讯·微信

腾讯今年春招(暑期实习)开始的时间特别早,从2月底就开始能网申、内推了。尤其3月份一整个月是提前批,并且4月1号之前没走完流程的同学,都要必须参加4月份的笔试。所以理论上是越早内推越好,越到后面简历越多而且万一4月前流程没走完,就得参加笔试了。

本来我想着先面几家小一点的公司攒攒经验再去投腾讯和蚂蚁金服的,毕竟这两家门槛还是相当高的。原本打算投北京微信的前端岗,但是问了上一届的一个学长说北京的微信不招前端,于是我的重心就放在蚂蚁金服的北京实习了。不过有件事情的发生打破了我原本的规划。

我有个在微信工作的学长,听说了我的情况之后帮我从微信HR那边问到北京微信今年招前端的情况,但是HC很少。我一听,呀,好机会。赶紧修改了简历发给了学长。内推后没两天我就收到了北京微信的现场面试邀请,心里还是很忐忑的,毕竟那可是微信啊。而且也是我的第一次现场面试。

微信一面

到现场后,有个年龄跟我相仿的学长找到了我,说「我是你的一面面试官」。微信的现场面试没有我想象中那么拘谨(两个人一间小屋子那种),是在开阔的大厅里,有很多小圆桌,光线也很好。总之面试体验还是很好的。同时我还看到了很多其他来面试的人。

一面面试官说他也是北邮毕业的,一下子就感觉放松了不少。接下去就基本是他拿着我的简历开始问问题了。

  1. 问实习做了啥 【研究生导师的公司】
  2. PicGo做了啥 【简述了一下诞生的过程和它的作用】
  3. Electron是啥,为什么选择用Electron 【用的人多】
  4. MVVM与Vue的理解 【数据驱动】
  5. vue的双向绑定的原理 【Object.defineProperty + Dep + Watcher】
  6. vue的生命周期以及做了啥,用来干嘛的 【beforeCreate、created、mounted等】
  7. 讲讲Virtual Dom 【稍微说了一下理解】
  8. 写过render函数么,跟template有啥区别 【写过,说了一下区别】
  9. vue的服务端渲染和客户端渲染区别是啥,服务端渲染作用是啥 【SEO友好,首屏渲染速度等】
  10. 讲讲this指针和箭头函数 【常规题】
  11. const和let与var的区别 【常规题】
  12. 说说webpack、rollup的tree shanking 【说了tree shanking是啥以及如何实现的】
  13. webpack的loader和plugin区别是啥 【loader处理某一类文件而plugin可以做「任何」事】
  14. promise的finally如何实现 【说了一下我的想法,但是后来想想有点不对】
  15. 浏览器和Node端的事件循环的区别 【说了一下我的印象,与setTimeout有关】

一面的问题基本都答上来了,面试官也觉得很满意,就让我等会,叫来了二面面试官,跟我说是专门搞算法的。(心里一凉)

微信二面

面试官跟我说他是北师毕业的,跟我的学校(北邮)很近(哈哈)。然后说,「我们来到简单的算法题吧,不需要你写,只需要你说说思路」

  1. 算法题:m*n的矩阵,只有0、1,找出最大的只包含1的矩形面积。【说了最蠢的解法…面试官一直引导我也没想出怎么实现更优解】
  2. PicGo做了啥,为啥star这么多 【讲了一下作用】

算法题又是没做出来(虽然说了最蠢的解法)心里又是一凉,感觉gg。结果面试官说「小伙子思维还挺灵活」(有么!)然后让我等会,叫来了三面面试官。

微信三面

三面是个女leader,她对我说「前面的面试官对你的评价很高啊」。于是开始问我的个人经历和项目相关。最后问了我什么时候能来?我一听奇怪,我不是投的暑期实习么?然后她说最近有个项目急着要上线,所以缺人,就额外要了一个前端的HC。我说我实验室暑假前并不放人…所以需要再考虑一下。并且这个时候我听闻他们组实际是做AI的,而前端如果我去了也只有两个人。到这时我感觉有点不对劲,不过leader说之后还有一个广州的电面要我准备一下。

微信四面

没过两天就是4面,也是我第一次电话面试。四面就纯粹围绕着我做的项目PicGo开始说了。问的比较注重的部分是我对于PicGo的思考。从开发者和使用者和产品的角度去说明。比如如何维护、如何打磨产品,遇到的问题如何克服,与用户的意见不同时如何应对等等。我感觉更考量我对PicGo的认知和未来的规划,到底是一个用心做的产品还仅仅只是一个star收集者。

四面面完,没两天三面的leader就打电话过来问我啥时候能去实习。然而在四面面完的这几天里,我就决定了不去了。首先实验室6月底前放不了人;第二个跟我预期的有所出入,我以为是微信的前端团队招实习生(但不是),因为我其实想在前端这块能继续做深入一些,所以就还是把这个offer给拒了。当时想法是如果北京微信这边没有喜欢的岗位,那也没事,好好准备一下蚂蚁金服的面试就好。

回宿舍我跟舍友一说我把微信的offer拒了,他们只丢过来一句「暴殄天物」。舍得舍得,有舍才有得,后面会再说。

蚂蚁金服·支付宝

在面微信的面试阶段前,有个支付宝的北邮师兄通过微信联系上我。他说关注我的GitHub好久了,想给我内推到支付宝的前端团队那边。我自然是开心地答应了。不过我当时想着先完善简历+先把微信面完。不然一下子准备两个大厂的面试,压力大不说,万一时间撞上了反而更尴尬。在拒了微信后我把简历发给了师兄,开始了支付宝那边的内推。

支付宝这边技术面总共三面+HR一面。全程电话面试。

支付宝一面

内推没多久,一面面试官就通过微信联系我,跟我约好了面试时间(第二天晚上7点半)并说「我这一面很轻松的」。在面试之前我有听说蚂蚁金服的面试是比较难的,虽然师兄说很简单但也是做好了被挂的准备。

7点半准时电话响起。面试官说他也是北邮毕业的,让我稍稍有所放松。然后接下来的问题就让我冷汗直冒。

  1. 介绍一下做的项目 【实验室项目+个人项目】
  2. 前端工程化的理解 【流程+规范+自动化等】
  3. 对Webpack做了哪些配置来提速 【很多,具体可以参考我这篇文章
  4. 一段代码输入babel,把结果再输入babel,结果一样么 【我说应该不一样,但是没说出为什么】
  5. 配置过babel哪些属性 【presets,plugins,env等】
  6. PicGo的插件如何发布、安装,如何确保插件安全性 【通过npm发布,安全性没有考虑很完全,然后跟面试官聊了安全方面的考量】
  7. Electron如何实现跨进程通信。还有哪些其他跨进程通信的例子 【ipcMain和ipcRenderer,跨进程通信的比如socket等,我了解的不多】
  8. Electron打包体积、编译速度相关如何考量,怎么优化或者怎么做的 【我是通过CI打包,没通过自己的机器。所以没有特别考虑这方面的。不过不需要用babel转译能节省一些时间】
  9. 为什么选TypeScript来开发,说说对TS的理解 【静态类型、语法检查等】
  10. TypeScript的interface编译后会占用空间么,enum呢?(运行时和开发时不一样)【前者答出来了,后者不确定】
  11. 说说什么是服务端渲染以及Vue的服务端渲染如何实现 【直出HTML,通过render函数将VirtualDom渲染模板】
  12. 如果Vue2没有实现VirtualDOM,可以做到服务端渲染吗 【可以】
  13. Vue的diff算法如何实现 【说了一下之前自己看过的实现】
  14. 【算法题】求两个序列里的最长公共子序列 【稀里糊涂说了一通,好像没错,后来想想其实不对】
  15. 简单说说Vue的响应式原理 【Object.defineProperty + Dep + Watcher】
  16. 你有什么要问我的吗 【主要做什么?答:蚂蚁森林,蚂蚁庄园等】

一面的难度应该是面的这三个大厂以来最难的。面试过程中我还是比较紧张的,不过一开始确实紧张,后面说开了就好多了。面试官面完之后说等二面联系我吧。二面面试官是他们部门的leader。

支付宝二面

一面面完的第二天面试官就加我了,直接约了当天晚上7点半的电面。(等于昨天一面今天二面…)事前我从内推我的师兄那里了解到二面面试官是很厉害的一个人,所以难度应该会比一面面试官高。听到这个消息不觉咽了一下口水,难受。

7点半准时电话响起。二面面试官的声音和语气给我的感觉是一开始比较低沉的,感觉比较严肃。然后后面的问题果然「没让我失望」地难。

  1. 学前端的经历? 【15年开始自学,简单说了一下】
  2. 对计算机的体系结构的认知 【懵了,不知道说啥】
  3. 有没有经历过jQuery时代 【有】
  4. Webpack优化是怎么做的 【跟一面说的差不多】
  5. 上述的优化是基于什么方向去做的 【从cache、减少文件搜索路径、多进程优化等做的】
  6. 上述的优化有没有量化出问题(比如看看每块耗时多久等等)再针对性地做优化 【用了profile查看了开发阶段的编译耗时,做了一个简单的插件做了开发阶段的速度提升,但是原理我也没说地太清楚】
  7. vue-hot-reload原理是啥 【我只打上来websocket+jsonp做的更新,但是实际上更复杂】
  8. 在vue项目里如果我更新了一个js脚本但是页面不更新,我要怎么让vue-hot-reload去更新 【真不会】
  9. 在vue项目里如果我更新了一个js,但是不想让页面重新刷新,而只是更新我js的执行部分,我要怎么让vue-hot-reload去更新【真不会】
  10. vue的template是如何转换成render functions的 【说了一下正则匹配,AST,但是不知道是如何有机串起来的】
  11. 接上一问,光是正则匹配是无法解决所有问题的,还需要啥,然后怎么做,要哪些阶段?(AST)【说了大概,但是不知道是如何有机串起来的】
  12. AST相关知识掌握程度是多少,去哪里了解的 【不多,相关博客,跑了一些DEMO】
  13. 写Electron的时候遇到了哪些问题(解决的或者没解决的都说说)【系统级别的右键菜单实现、插件系统等】
  14. base64怎么编码的 【常规题】
  15. 从输入一个地址到浏览器展现网页的过程 【常规题】
  16. DNS查询用TCP来做可以么 【可以,但是慢】
  17. HTTPS握手加密过程 【常规题,这次会了,面头条的时候还不全会】
  18. setTimeout和Promise的异步的区别,在浏览器和Node下的区别 【事件循环的区别,我说了具体的例子】
  19. 如何用Jest做的Koa和Vue的测试 【对Koa做了api的测试,对Vue做了界面的单元测试】
  20. CSS和JS哪个更熟悉?【JS】
  21. 接上问,CSS的transform有哪些属性 【rotate,translate等】
  22. 接上问如何实现一个div既平移又变色?transform的矩阵有了解过么 【没答出transform可以带多个属性,知道矩阵,没写过】
  23. Vue的响应式原理,以及如果一个变量不在页面上出现过(或者使用过),响应式系统是怎么应对的 【render Watcher没有get到这个变量就不会收集它的依赖】
  24. 父子组件如何分开收集依赖,或者说父子组件如何确保父组件只收集自己的依赖,子组件只收集自己的依赖 【父子组件有自己的生命周期】
  25. 在Watcher内再new一个Watcher后,如何保证依赖收集不会出错 【同一时刻只有一个Watcher在工作】
  26. 问一下算法和数据结构掌握程度 → 说一下快排吧 【说了一下快排原理】
  27. 你上面跟前端无关的知识都是从哪里获取的 【实验室项目、同学、自己捣鼓、博客等】
  28. 你有什么要问我的吗 【这个组杭州和北京的部门做的东西一样么,做什么】

面完感觉很凉,问题的深度是真的深。之前的面试很少有完全答不上来的,而这次二面对 vue-hot-reload 的问题就基本没有答上来。面试官最后给我的反馈大概还是不错的,所以我就在忐忑中等待三面的通知。

支付宝三面

过了几天,三面面试官通过电话跟我约了时间,听声音还是很和善的。不过,问题还是依然很有难度啊!问题不多,总共问了三个问题,但是第一问就让我很难受:

  1. 【算法+前端】给定一定数目的粒子,每个粒子有4个属性【位置坐标,半径,速度,加速度】。求问在如下数量下,用什么方式绘制这些运动粒子,用什么数据结构来存储。
    1. 20个 【DOM,Canvas】
    2. 500个 【DOM,Canvas】
    3. 20000个 → 200w个 【Canvas,但是不够,因为没有必要把200w个点都渲染出来,只需要渲染可视区的。所以问题的关键是如何找到只在可视区出现的圆,这是一道数据结构+算法题。】
  2. 接上一题,如果是500个用DOM来绘制的粒子,请问使用Vue或者React的VirtualDom技术来实现,对比用原生操作DOM(假设极致优化)来实现,哪种方案的性能更好。【我说了原生操作,并给出VirtualDom不适合这个例子的理由】
  3. 给定一个APP内的营销页面,用户可能在离线状态下打开APP。如果营销页面的图片已经过期了,应该要被撤下,否则会引起歧义。请问用什么办法能够撤下。如果不能用JS,如果用户修改了客户端时间呢?【问题难度一步步加深,先问常规离线模式实现,然后开始不让用JS,并且客户端时间不准确怎么做。没答全。】

这个面试总共只有45分钟不到,面试官说不能太长否则影响我的评价。我就说我第一题答得不够好。面试官说「不是不够好兄弟,是很不好!你第二题答得很不错,第三题有所偏差,但是你第一题答地太差了」

哈哈,当时听完觉得应该是凉了吧~然后面试官最后说了一句,「等之后HR会联系你」。噫,所以还是有戏?

经验总结三:只知其然不知其所以然是不行的,要对原理了解更深才能更好地解决问题。

不过人生总是有所波澜。

微信·小程序

在我面支付宝结束前后,微信那边的HR小姐姐联系到我问我为什么把北京的岗位拒了。我说了之前我考虑的理由(主要是团队不符合预期啊啥的)。本来以为跟微信的缘分就这样了。然后HR小姐姐不死心,帮我联系了广州微信小程序的前端部门,问我去不去那边实习。我跟妹子商量了一下,暑期实习去广州两个月也能接受。于是就答应了。不过小程序那边还需要加面
。小程序这个部门做的是小程序开发者工具的,我觉得很合我的胃口,正好我也比较喜欢写工具类。

一波三折,在等待支付宝HR给我电话的这段时间里,我在两天内就拿到了微信小程序的offer。

微信·小程序一面

三月最后一周的周一下午,我记得很清楚。3点开始一面。面试官给了我一个链接,让我一小时内做完题然后他再跟我电话聊。

一个小时总共两道题,这两个笔试题做完,面试官电话就过来了,简单问了一些问题:

  1. 对着笔试题的一些提问,比如第一题的this指针问题,第二题的思路问题 【一遍过】
  2. HTTPS建立连接过程 【常规题】
  3. 前端缓存的认知 【常规题,缓存的类型,不同缓存的作用等等】
  4. 前端安全的认知 【XSS,CSRF等】
  5. 有什么想问的吗 【为啥小程序开发者工具用NW.js而不是Electron】

面试官问了大概半小时,就说之后二面的leader会联系我。由于笔试题都做出来,所以感觉还是比较良好的。只是不知道二面来得这么快。

微信·小程序二面

二面面试官隔了大概半小时就打电话来了,主要就看着我的PicGo这个项目在问,可能是因为技术栈(Electron)和小程序开发者工具(NW.js)比较接近吧。

  1. 为什么选择Electron而不是用网页实现PicGo 【因为需要做配置、插件化、需要用到Node.js的API等】
  2. 介绍一下PicGo
  3. PicGo如何做的更新策略,如何实现静默更新,如何实现代码级别热更新,如何在读写文件权限不够的情况下热更新 【更新策略其实很简单,后面面试官问的更新策略是我未实现的,但是跟他一起谈了一下思路】
  4. 写PicGo遇到的最大的问题 【插件系统】
  5. 插件系统如何实现 【读配置、加载、生命周期函数等等】
  6. 写PicGo遇到过安全相关的问题么,如何处理 【插件的安全相关】
  7. 写PicGo遇到过性能相关的问题么 【有,相册页图片多会卡顿,说了如何处理等】
  8. 有什么想问的吗 【没啥了】

面试官的语气非常和善,跟我探讨的时候也是基本以商量的语气。末了还夸了一下这个项目做得还是挺完整的。(其实还有一个很重要的「测试」部分没写。。。)考察的重点问题已经不是功能问题,而且类似安全、更新策略等这些平时可能写东西的时候不会太注意的问题。所以如果只是一个玩具项目,可能确实谈不上来。还好之前很多坑自己踩过,所以跟面试官聊起来也比较愉快。

经验总结四:一个好的(开源)项目非常加分。好的意思不是star多,而是你对它的思考、实践多。
经验总结五:如果你有一个做得很好的项目,一定要让面试官看到,并引导他问你的项目来把你熟悉的东西说出来。

第二天收到HR电话联系说已经通过面试了,第三天就发了Offer。

由于小程序这个组做的东西是开发者工具,很合我的胃口,于是我就接了这个Offer,而此时我还没接到支付宝的HR电话。微信的这个「抢人」速度是真的快。

最后

支付宝HR电话在后面好久才打来。此时我已经接了小程序的offer了,于是暑期就没办法去支付宝实习了。我说了一下我暑假可能没法去实习,但是秋招还要回北京秋招。所以问能否保留秋招终面资格(跟去年一样)。支付宝的HR给我的反馈就是不一定,不好说。我想想反正如果不保留资格,到时候回北京再面就是了。

于是前两天终于发来的offer,也只能拒掉了。同时我也只能跟头条的HR说了一下情况,真的很不好意思,秋招还有机会。

我的春招(暑期实习)之旅也就这样结束。其实我大可接受支付宝的offer实习然后直接转正,不过我想着既然有一个更喜欢的机会去尝试一下又何尝不可呢。其实从第一次拒绝微信的offer到后面又接了小程序的offer,我觉得都是因为我想做自己喜欢做的事吧。

最后经验总结六:Do what you love, love what you do.

希望这份经历也能给你带来帮助。

附录

我的GitHub,我的博客

我自己的主要开源项目

以及PicGo-Group的项目。

我参与的开源项目

等等。

Author: Molunerfinn
Link: https://molunerfinn.com/my-2019-interview-of-summer-internship/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
支付宝打赏
微信打赏
~超快便宜好用的SSR机场点我注册~