前言

说起跟某店的爱恨情仇，真是渊源颇深，一路走来，真不知道踩了多少坑。（心塞。。。）从去年9月秋招开始，再到今年3月春招，我参与某店的面试总共4个回合。一回电话面试（2面），二回秋招笔试（直接被刷），三回转移阵地再战秋招（一轮笔试+一轮面试），四回春招（5面）。
前面三回都失败了，好在第四回成功拿到offer。那就说说第四回之春招吧。尽管前面一次又一次的机会都被我浪费掉了，但可能我就像打不死的小强，看见某店春招招人，本来也没报以多大的希望，但有身边的她一直为我加油打气，于是我又厚着脸皮给某店投递了一份简历。。。

面试晋级之路

这次某店春招，我总共经历了5面（对，你没有看错，细思极恐），4轮技术面试+一轮hr面。下面就来说说面试的过程以及问过的一些问题吧。

一面（电话面试）

自己也算比较幸运吧，第一天投递了简历内推，第二天下午就接到了电话。面试官人很好，很有耐心，会给予一些提示。差不多就问以下这些问题：

1. js的数据类型
2. js的与运算和或运算的坑；（没答到）短路原理
3. js闭包的理解
4. js跨域的解决方案
5. ajax能否跨域（正确答案：是）；答错了
6. js模块化加载，AMD、CMD规范
7. js服务端遵循了什么规范；（没答上来）
8. 平时用到了什么版本库；（我答的是JQuery）
9. 事件委托；（当时没答上来）
10. promise
11. css3 弹性盒布局
12. 前端性能优化（答得不全面）
13. less的优点
14. rect的了解
15. 页面突然空白了，怎么解决这个bug（解决办法的思路）
16. 怎么检测页面性能
17. 平时怎么学习前端，最近看了什么新技术
    (tips：第一天因为下午面试临近下班了，没有面完，就约了第二天同一时间再面试，经历了两天电话面试，中间电话信号一直不好，老是掉线，gg)

二面（笔试+技术面试）

二面大概是隔了一周后，接到hr电话邀我去公司面试。首先进行笔试，题量有点大，建议挑自己有把握的先做，然后二面面试官再根据我做的笔试题进行面试。

1. 前端性能优化的方案，说得越多越好；（不仅要知道，最好要是要知道里面的一些原理）
2. 跨域的方案（最常用到的方案是什么）；
3. CORS（跨域资源共享）是什么；（接着第二个问题问的，移动端跨域用得比较多的方案）
4. 具体例子问题：上传一个跨域资源的图片有几种方案（针对上一题）当时答得不好，毕竟没有这方面的经验，只记得面试官说了一个用form表单put方式提交服务端来处理。
5. http请求里面包含了哪些内容。其中服务端如何知道来自前端的cookie东西。（他想问的是http里面的哪个属性字段，太紧张了没懂面试官的意图）
6. H5form表单input新增了哪些新属性；
7. span元素如何设置其宽高。diplay：inline-block
   面完下来，二面试官对我评价是基础很好，就是欠缺了点经验，然后就叫我等后续面试。。。（整个过程大概也就40几分钟，本来感觉面试得并不好，可是面试官还是给了我过。）

三面（技术交叉面）

这次面试分了两个人轮流来面试。
面A

1. 前端写过的最复杂的代码
   一来就问如此开放有深度的问题，哪有时间想啊，于是宝宝又把上传图片在线预览的解决思路讲了一遍，（这个点，在前面两面里，我都有提到过，真是万金油的答案。哈哈）。
2. 原生的ajax请求的过程；
3. ajax1的缺点有哪些（遗漏的地方）；
4. css布局可以分为哪几类
5. jquery的优点、特色；
6. gulp与grunt最大区别；
7. js动画与css动画的区别，怎样权衡使用；
8. js如何判定css3动画的结束
   一、用setTimeout(function(){},time);来设定一个和动画一样的时间；
   二、利用animationEnd事件来监听；（不同浏览器兼容性写法不同）
9. http的cookie有哪些属性，有什么安全问题？
10. 304请求过程；
11. 了解的es6新属性；
12. js的继承，写代码实现（我说了有call/apply和原型继承，call/apply写出来了，but原型继承没有写出来，555）

面B

1. 用js实现一个-10～10的随机数；
2. DOM原生方法innerHtml能否插入一段script标签的片段，并且执行其标签内部有相应的js脚本代码，如
   <script> alert("1");</script>这样能否解析出来；若不能，如何能够解析出来？
   答案显然是不能的，script标签内部是不能被正常解析的，解析到script时就会自动识别成关键字；
   解决办法：当时想的是用substring将script片段给拆分出来，再解析执行，不过因为不肯定很是犹豫，宝宝该自信一点。
3. jsonp是什么？有什么安全上的漏洞（跨域资源不可信）。
4. web安全问题：跨站资源请求伪造，怎么解决方案。
5. 事件委托的原理；
6. 平时开发使用的工具有哪些（eclipse、sublime、webstorm），sublime里面喜欢装什么插件。

四面（技术终面）

又差不多过了一周左右，接到hr姐姐的通知来公司进行终面和hr面

1. 为什么要做前端；
2. 页面上如何让三个元素并行排列，如何确定他们的宽度；
   我答的是用display：inline-block(浮动、绝对定位也可以的，下来回想应该多答几种)然后宽度是面试官提示采用bootstrap的栅栏布局来定位宽度，说白了，就是给不同元素宽度设置不同的百分比。
3. 接着上一题，问了用过bootstrap没，是否对其内部的样式有修改过；
4. 画出三次握手的示意图
5. http协议包含哪些内容
6. cookie的本质是什么？cookie里面有一个属性httponly是否了解？（懵逼了，当时不知道）
7. 什么是js的闭包；在项目里面用到过么？ （我列举了for循环点击li标签事件的问题）
8. 事件冒泡的机制；
9. 平时写js的时候，遇到过哪些写得比较好的地方或者比较坑的地方；
   好的地方当时没有头绪，坑爹的事情倒是一大堆。不过依然没有头绪，随机想到了ES6里面引入了块级作用域的概念，是ES5之前都没有的，就说了一下块级作用域的好处，和在哪个具体场景里面会用到，我有列举了刚才的for循环遍历点击事件例子。
10. js性能优化的地方有哪些；
11. 快速排序的思路；
12. 对reactjs的了解，然后其功能组件之间如何进行通讯（这个当时有看，但印象不深，记不清楚了，5555）
13. 对于table按某列进行排序的思路；
    （这个问题纠结了很久，之前有见过，但其算法思想忘记了。尴尬。最后凭借自己的思路，大致的说用数组去存储该列的元素值，然后对其进行排序，然后根据排序结果，来依次遍历，动态创建每行的片段，最后一次性添加到页面当中，他后来也没说，不知道说的对与错，好尴尬）
14. 如果对table的某一列要进行移动一定距离，该怎么实现； （凭感觉答，对那一列使用绝对定位，通过left、right属性来进行平移）
15. 平时是如何学习前端新技术；
16. js有哪两大数据类型；
    （当时的笔试题，看我卷子上面没写，又提了一遍）
17. 对公司有什么了解吗？
    基本就是这些问题了，不过有一个细节就是，面试官会根据你的简历和笔试题做的情况，随机提问，所以笔试题做过后，下来自己一定要把哪些没搞懂的搞懂、消化，说不定会再次问你相同的问题，避免掉在同一个水坑里。ps：面试官真的长得好像阿飞（大学同学），哈哈。

五面（hr面）

• 题外话：本面是hr面，本来说的那天应该是先面二轮技术面，最后是hr面，但二轮面试官那天比较忙，在开会，所以先面了hr面。二面顺延至下周，也就是终面。gg

1. 为什么离开原来的公司；
2. 平时是怎么学习前端的，是否从书上得到真正有用的东西。
3. 如何理解“幸福”（结合在编程时的理解，醉了）
4. 自己对未来的职业规划；
5. 周围的人对自己的评价是什么；
6. 自己有什么短板没有；
   （小心：不能老实地交代自己身上的毛病，最好是采取迂回战术，结合自身优点里面谈一下缺点，不用过分突出自己的缺点）
7. 平时的兴趣爱好（最好是能够突出团队协作的爱好，我说的羽毛球，嘿嘿） 大致就这些了，时间也就不到半个小时左右。

总结

整个面试流程下来，基本上是每周都要去某店公司进行一次面试，发现公司面的问题都着重于基础问题，所以基础（html、css、js）很重要。要注重项目开发时遇到的问题、难点，并做好笔记。最好是自己能够整理一些知识点，梳理整个知识体系，准备面试的时候，脑子里才会清晰地知道，自己掌握了哪些知识，哪些知识还需要补充。

**前端面试参考资源：请戳这里