争取来的酷狗前端面试共勉之

╰+哭是因爲堅強的太久メ 2022-01-20 06:59 193阅读 0赞

emmm...说说事情的情况吧。我是18年毕业的，由于学校大四没课，大三暑假就出来找工作做前端开发了。也在第一家公司呆了一年大半，准备换个工作环境了。这就开始了我的面试之旅，投了也挺多简历的吧，总共就面了几家，感觉机会真的好少，每次都来之不易。

说到酷狗，其实简历也是有投递的，而且投了好几封了，但就是没有下文。无意间看到了其有专场招聘！！！重点来啦！莫名其妙内心就萌生了一种想法，我不如直接去试试，脸皮厚一点，说不定真的给面试了，就这样，当天就去了酷狗的大本营...

哇。去到的时候，在门口徘徊，犹豫，饶了一绕。最后鼓起勇气走了进去，咨询了一下情况，说有邀约名单，眼看一大堆人的名字，就是没我，有点失落。前台hr姐姐也问我是不是没邀约，说了没关系，并且问我拿了份简历，叫我坐着等一会。额，等了大概有1小时左右吧，我看到的在我前面的有2个，等他们面完了，早上没人了，面试官就决定面我，喊了我的名字~

### 面试开始了！ ###

> 这时真的很是激动啊，首先在这里感谢面试官给我的宝贵机会吧。

额，怎么说，由于面试前有聊一会天，面试官问我是怎么知道当天有招聘活动的。我说公众号看到。问了一下我的情况，是不是还在职啊，为什么想出来等等。可能聊了一会天，气氛很和谐，也没找我自我介绍就开始面试了哈~

1.首先是看了看我的简历，看了下上面的项目，问我哪一个项目比较有意思的讲讲。

*  我就选择了一个h5sdk的项目做了具体的讲解吧，①这里就谈到了一些iframe的父子页面跨域通信，②前端和ios客户端通过postMessage的交互原理，还有一些交互逻辑的处理。③也谈到了ajax，get和post的区别，还有一些对于敏感信息的转码（密码）。④还问了我这个项目的用户量有多少、使用情况怎么样的等等吧。

2.可能上面有聊到ajax的http请求，马上就进入了http环节。问了我一些问题我具体忘了，是关于http1.1的特性的。由于我不太会，我就引导面试官问我会的内容了。

*  我就说我不太清楚。但是我知道http的请求流程，每个层做了什么，怎么才算完成一个http请求。然后就开始说了，应用层发送http请求，到传输层tcp，网络层ip，链路层...

3.等我回答完http，就问了我关于https的知识了。问我https和http的区别，具体讲述一下https。

*  我就说多了个ssl层。ssl层是通过客户端发送ssl版本和加密组件。服务器接受了之后，也会发送一个ssl版本，挑选加密组件内容并且会发送一个包含公开密钥的证书...客户端根据公开密钥加密一个随机密码串（用于形成对称加密）并且会发送一个报文，提示服务器接下来的通信会用这个密码串加密。服务器接收到再用私钥解密...

这时，可能提及到对称加密，面试官问我对称加密和非对称加密是什么，有什么区别。

*  对称加密就是大家都有一把共同的密钥来建立通信。非对称加密就是服务器把自己的公钥公布出来，但是只能用自己的私钥才能进行解密。却别就是非对称加密每次都要做解密的算法，对机器的消耗和时间都比对称加密的大。

接着问怎么处理这种情况。

*  我就说两者相结合。就像我刚才说的ssl的握手一样，用非对称加密传输一个两者的密钥，接下来就用这个密钥进行通信。

那你这样怎么保证传输的密钥的安全呢，会不会被篡改呢。

*  我就说这就要使用一个证书。用一个安全可靠的第三方来保证传输密钥的安全，具体我也说了一下证书的由来...

接着问我https的耗时都比http长，怎么避免这个问题，什么时候用https...这个问到最后我就没怎么答出来了...

4.有问到http的缓存，强缓存和弱缓存有什么区别，他们的一些请求头和响应头是怎么样的，强缓存命中的时候，请求回返回什么样的状态码。

*  emmm大概讲述了一下吧。一些请求头什么的，因为怎么读我也不确定，怎么拼只记得大概，就说了一下。也提到了ETag和Modified，优先级是ETag。然后强缓存是不发送请求，协商缓存需要发送请求给服务器，服务器如果返回304，即不会带实体内容...强缓存命中的状态码是200。会有一个from memory cache 或者disk cache。

5.接着面试官手写了一个for循环和setTimeout的考题给我，是考察关于闭包的，问我相关的输出是什么，我答了，并且把代码是怎么执行的，也说道了setTimeout的异步。然后问我怎么达到他想要的效果（采用闭包，let，setTimeout的第三个参数...）。叫我讲述一下闭包是什么。

6.手写了一个链式调用 Mask('jack').sleep(5).\*\*()。大概是这样的吧，问我每次函数结束后要返回什么？

*  这个我写了一个伪代码吧。每一个函数都return this。并且我写sleep的时候用的是while去做判断。我当时的做法是没考虑sleep是异步的，所以面试官问我这个说不就阻塞了其他代码的执行吗，我一时懵逼了。然后我说可以用promise...

7.一个异步加载的元素，你需要获取他并绑定事件，怎么确定你一定能绑定到。知道事件绑定的原理吗。

*  额，这个我大概说了一下想法吧。后来想想，事件代理吗！（瞎想的，大家不要信我）。这个回答得不是很好。事件绑定的原理也不清楚。

8.promise和setTimeout有什么区别，他们怎么执行，什么是宏任务什么是微任务，执行顺序又是怎么样的。

*  说了挺多的吧这个。关于浏览器的事件循环。new Promise内的代码按顺序正常执行，then的任务被分发到微任务。setTimeout的任务被放在宏任务。然后整个事件循环就是先执行所有的script代码，再执行当前的微任务，再进行宏任务的下一次事件循环...

9.讲一下js的原型，原型链。讲一下js的继承方式。（基本是我答一种，他就问一种的有缺点和解决方案）

*  这个说了很久啊。什么每一个函数都有prototype的属性。每一个实例的\_\_proto\_\_都会指向他的构造器（函数）的prototype，利用这个特性就能实现原型链继承。（优缺点，怎么处理）...就到了下一个继承的方法...这里不多说了，说太久了

10.问我对vue的生命周期钩子了解吗，用哪个用得最多，用来做什么处理，为什么要在这一步做这一种处理。

*  说了常用的钩子，然后说用得多的是created、mounted、destroied。一般会在created中做一些网络请求，mounted的时候对一些dom元素进行的操作。当一个组件destroied的时候要清一些定时器啊什么的。

11.让我讲一下vue2.0的虚拟dom，还有vue怎么实现数组的数据驱动。（额，数组的没答上来，只答了vue内部另外封装了一个方法去...）

*  虚拟dom的话就是js构成的一个对象树结构，当对一个dom做修改的时候，会现在虚拟dom中操作，用一个diff算法做最小更新最后映射到dom上面...（由于vue只是使用，对原理掌握得不深，最近都在复习基础，算是薄弱项吧）。最后面试官说我没答到点子上，不过没关系（哈哈，有点尴尬）

12.看到你这个播放器的项目，讲述一下他的整体，有哪些功能，哪些界面。

*  这个也是我写在项目上的，就最近很火的一个vue开发音乐app的h5。

13.播放器的进度条怎么实现的，讲讲你的思路。

14.播放器有做过歌词吗，是怎么样实现的。（额，这不会，没答上来，因为后来没继续做下去了，跑去复习基础，就吧播放功能和控制进度实现了，歌词没做了）

15.接下来问我有做过什么动画？

*  我答css的tansition，animation，还有js动画。

接着问有用过canvas做动画吗？

*  我说有，用来做过帧动画。然后问了我一些帧动画的缺点是什么。我就说需要大量图片资源，要做预加载处理，响应时间长，不做的话可能播放的时候会出现闪屏，体验不好。

16.svg有用过吗，用来做了什么，使用js控制的吗。

17.如果一个用户打开了你的网页发现打不开，你说说可能出现的情况，你想到的都可以说。

*  服务器没响应啊，5字头的报错。或者404，页面资源不存在。还有网络中断啊

面试官：我基本上问完了，你有什么问题问我的吗。

1.我问了公司的技术栈，主要开发的业务。

2.还问了公司有没有自己的框架，还有没有使用jq这种比较老旧的技术。

3.问了他公司用什么做的动画，他告诉我也是canvas做帧动画，说效果不是很满意，正想方案代替。

额，最记得面试官指点我的一句话就是，技术的深度决定技术的广度，其实整个web的发展就是这样，万变不离其中，基础只要扎实了，才能决定你的技术广度，以不变应万变~

最后面完了，面试官跟我说了一段话，让我非常的有感触吧，让我感觉自己的努力复习还是有一点效果的，我还是有在进步的。  
  
他说：你是没有被邀请自己过来面试的，但是总体下来我觉得你挺不错的。我会把情况向上面反馈，接下来可能会有复试。因为今天面试的人比较多，你留个联系方式，如果有复试会通知你过来复试的。  
  
嗯，其实吧，很感谢这个面试官。谢谢他面试我，给了我机会，当然这机会也算是我自己争取来的吧，还是非常感谢他面试我。面试这一场，学习到了很多，最深的感触还是那句话：机会都是自己争取来的，都是留给有准备的人的。

=-=哈哈，后来并没有收到复试通知。虽然有点失落吧，但是我觉得能混这一次面试已经算是进步了，谋事在人，成事在天。这次的经历感觉很宝贵，希望自己继续努力前行，能实现自己的梦想吧~把这次面试经验分享给大家，希望能鼓励自己和大家，一起进步，共勉吧~加油