因为一些原因离开了上一家实习的公司，在6月底毕业后我又开始积极的准备面试，这次的面试十分顺利，三天面了三家就顺利拿到了心仪的offer。感觉公司对应届生的基础还是比较注重的，面试问题都偏向基础知识，对框架等知识反而没有太多考核。

为了记录自己的面试过程，也为了让正在面试的小伙伴有所准备，下面跟大家分享我的面试经历。

1、某网课公司

一轮笔试

4页纸笔试题目大多考验原生JS功底，限时一个小时完成，后面四十多分钟提前完成了，所以大家还是要学好原生JS啊。

• margin-top设置为百分比，大小是相对于谁的值？
• padding-top设置为百分比，大小是相对于谁的值？

答：margin和padding的值设置为百分比的时候，大小是按照其父元素的宽度的来计算的，无论是margin-left还是margin-top都是按照父元素宽度来计算的，padding也是一样，这里考察的是各类属性设置为百分比时的表现情况，除此之外还有width、height设置为百分比，line-height设置为百分比等。

• 函数作用域问题。

let f()=function g() {    console.log(' ');}g();输出结果什么？复制代码

答：报未定义错，g()只能在函数内部访问。

• 重复定义函数

let x,y;x=fun1(2,1);function fun1(a,b) {    return a+b;}y=fun1(2,1);function fun1(a,b) {    return a-b;}console.log(x,y)；输出结果什么？复制代码

答：1 1，JS中函数具有声明提前的效果，且重复定义同一个函数变量时后定义的覆盖先定义的。

• 对盒模型认知与理解？

答：讲出IE下的怪异盒模型和标注浏览器的盒模型，且可以通过box-sizing切换盒模型。

• cookie与sessionStorage与localStorage的区别？

答：cookie非纯客户端存储技术，会强制携带在http请求头部中，容量小，大部分浏览器是4KB。sessionStorage与localStorage是纯客户端存储技术，容量5MB，sessionStorage关闭浏览器即清空，localStorage关闭浏览器也不清空。

• for与for in与for of的区别？

答：for没什么好说了；for-in 循环：遍历对象自身的和继承的可枚举的属性, 不能直接获取属性值。可以中断循环；for-of 循环：具有 iterator 接口，就可以用 for-of 循环遍历它的成员（属性值）。for-of 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象、Generator 对象，以及字符串。for-of 循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。对于普通的对象，for-of 结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。可以中断循环。

• 什么是跨域，解决方案？

答：跨域是浏览器的同源策略，目的是加强客户端安全性。根据不同场景可以选择jsonp、CORS、postMessage，然后分别讲解下jsonp、CORS、postMessage。

• 页面卡顿时，如何查找原因以及解决方案？

答：开放题，答的越详细越好。可以从使用chrome浏览器的开发工具分析请求开始，压缩资源减小资源大小，合并资源减少请求数量，然后讲到页面性能分析，查看导致页面卡顿的代码块并对具体业务进行具体分析。

• 使用尽可能多的方式实现一个给定宽高的div水平垂直居中？

答：相对定位后通过定位属性（top、right、bottom、left）配合margin或transform实现；弹性布局实现等，写了四五种实现方式，网上可以搜出七八种实现方式。

• 给定一个URL，用正则表达式截取出其中的域名(.com结尾，给定的，不是任意域名)。

答：/^w{3}\.\w*\.com$/

• 在页面中显示一个距离新年的倒计时 xx日xx小时xx分xx秒。

答：思路是通过Data对象的API获得当前时间和下一年的1月1号零点的时间，然后相减就是倒计时的时间了，注意使用setTimeout代替setInterval。

• 给定一个对象，返回对象的属性组成的数组，且数组的元素要按照a-z排序

答：这题没有规定要使用原生JS实现，所以我直接使用Object.keys()这个API拿到对象的属性组成的数组，然后使用数组的sort方法进行排序。

这轮考的都是基础知识，难度不大。

二轮技术面

做完题等了几分钟就有面试官过来了，这轮一个小时多。

• 做自我介绍
• 针对上一轮的笔试题进行一些提问
• 询问上一家公司的工作经历（我私下做过一个谷歌插件帮助业务部门工作，他对这个挺感兴趣 ，当即开电脑演示给他看。大家遇到面试官表现出感兴趣的时候要抓紧展示啊！）
• 对简历上的项目提了一些问题
• 服务端与客户端各有一个10m的文件，服务端修改了文件的其中一个字节，如何让客户端花销最小进行更新？如何让多个客户端更新的时候服务端压力最小？（文件内容就是无规则的乱码）

答：在服务端对照修改前后的版本找出改动的字节位置以及改动后该字节的值，服务端缓存下来（执行对照的时候花销较大，缓存下来是回答他第二个问题让服务端压力最小）。接着发送到客户端，客户端通过blob对象修改文件。（不知道对不对，对服务端不太了解，面试官点了点头就下一题了）

• 前后端如何一起开发？

答：讲了一些之前公司的开发方式，并行开发约定、接口文档、联调等。

• 上一家公司版本管理使用的是什么？对git是否了解？git分支是否使用过？

答：上一家公司用的是svn，但是我自己的项目都是用git，然后讲了一下git分支的命令。

• 给定一个大量子元素的ul，要求写出原生和vue版本的，点击li元素时输出li元素所在的位置下标？进而询问为什么要用委托？进而询问为什么vue中我们不需要写委托？

答：考察事件绑定的兼容性，是否知道使用委托提高效率。vue的内部使用了事件委托来处理我们使用v-on绑定的事件。

面完后感觉二轮的面试官还算满意，让我在这等一下。

三轮技术面

等了几分钟后，第二位面试官进来了，从九点半开始笔试到现在两个钟了啊！马上又开始第三轮面试，这谁顶得住啊。这轮面了一个钟。

• 自我介绍
• 介绍html5新增特性

答：语义化标签、增强表单元素、视频音频元素、canvas元素、svg元素、拖拽、地理定位、web worker、web storage、web socket，针对这几点详细将了一下，其他的我就不知道了。

• 介绍css3新增特性

答：新增了选择器、页面分割多列、内容生成、转换、过渡、动画、hack，每讲到一个的时候都会让我详细讲出来有哪些属性之类的，比如我说过渡的时候马上要我说出过渡的属性名。

• 介绍es6

答：新的定义变量方式let const、解构赋值、模板字符串以及字符串新增API、函数默认值、对象字面量的属性或方法的简写、箭头函数、类与继承、promise、模块化import export、新的类型symbol。

• 事件是如何触发的？

答：两种IE8以下的直接冒泡、其他浏览器的冒泡捕获。

• 如何阻止事件的默认行为？如何阻止事件的冒泡？

答：我：event.preventDefault阻止事件的默认行为，event.stopPropagation阻止事件的冒泡。面试官：不正确，存在兼容性问题。我：突然想到不兼容IE8以下，但是IE8的API实在是忘记了，没有答出来。

• https协议如何实现的？

答：传输层之上增加一层，通过ssl/tls协议协商加密。

• ssl协议如何进行加密的？

答：公钥加密。

• 是否有看过vue 的源码？

答：只分析过数据双向绑定的相关代码，其他的没有了解。

• 浏览器出于什么安全性要求要限制同源策略？

答：不知道..（惊了，只知道怎么绕过同源策略，但是一直没想过为什么要有同源策略）

• vue为什么不兼容IE8以下？

答：不知道..(只知道vue不兼容IE8以下，完全不知道为什么不兼容啊)

• get与post的区别？

答：我：交互的数据保存的位置不同，get数据经过编码后与url相连后发送给后端，post则是将数据保存在http请求体重。面试官：get数据经过什么编码？API是什么？我：不知道..

• 算法题：给定一个不定长度的二维数组，让二位数组中的每个一维数组出一个元素组成一个新的数组，这样的数组有多少个？将新的一维数组存放在一个二维数组中输出。

这题想不出来，完全没有刷过算法题，面试官提示我可以先假定二维数组只有两个一维数组元素，然后假定二维数组有三个一维数组元素，然后看我想不出来想结束面试了，我表示还是想做一下，最后又拖延了二十分钟做出来了（花费了二十分钟等我，不知道会不会引起面试官的不适）。跟面试官的做法不同，所以他直接拿了一组数据让我在电脑跑，跑的结果是对的。

let arr=[[1,2],[3,4],[5,6]];init(arr);fun(arr);function fun(arr) {  if(arr.length==1) {    // console.log(arr[0]);  }  else {    let a=[];    for(let i=0;i

一口气从九点半面到十二点多快一点，面试效率很高，一次面完，不需要来回多次，体验很好，后续没有拿到offer，有点遗憾

总结：自己对计算机网络、算法、框架源代码掌握的很薄弱，还需加强。

2、某工厂互联网+部门

一轮技术部门主管面（只有一轮）

面试官不是做前端的有点尴尬，很多时候是在听我讲，时间大约半小时左右。

• 自我介绍
• vue是一个怎么样的框架？

答：照搬了官网的介绍，然后讲解了一下vue的指令插槽组件等等。

• 对ajax有什么理解？

答：讲了一下原生ajax以及axios这个库。

• 对npm有什么理解？

答：包管理工具。

• 对跨域有什么理解？

答：跟上一家笔试题答的一样。

• 现场开电脑看我的博客，然后就给我介绍公司情况，开发部有后端有IOS有安卓但是没有前端

总结：面试前最好在网上了解一下公司是做什么的，技术部门规模大不大之类的，免得白跑一趟。遇到非前端来面前端的尽量就不要去这个公司了，毕竟对应届生来说，成长才是最重要的，而有一个好的leader带你成长可以让你少走很多弯路。

3、某租车公司

一轮hr面

• 自我介绍
• 介绍项目
• 觉得自己是个什么性格的人？
• 与其他人产生争执的时候怎么解决？
• 学习能力怎么样，怎么证明？

答：举例我花了两个月考了软考的网络工程师，并且拿到了120多分，满分150

• 为什么毕设可以拿那么高分？

答：从代码量、项目正式上线、兼容多端等角度讲解了一下

感觉hr小姐姐还算满意，由于自己是应届生，直接被小姐姐压了1k期望薪资（o(╯□╰)o）。

二轮技术面

• 自我介绍
• 演示谷歌插件以及如何实现的
• 在上家公司的项目中，自己主要负责的部分是什么？
• position有哪些属性？

答：static、relative、absolute、fixed、sticky（sticky是粘性定位，有兼容性问题，大多数人会漏掉这个属性值）。

• z-index的作用是什么？什么情况下z-index设置了很大的值的时候还是会被其他元素覆盖？

答：z-index可以让已定位的元素设置层叠的层级，但z-index的效果受限于父元素，即设置了z-index的元素的层叠层级只在父元素内生效。

• promise.then()中return undefined时，整个方法返回什么？

答：rejected状态的promise对象（妥妥错了，应该是resolved状态的promise对象）。

• 异步宏任务与微任务执行顺序问题。

console.log(‘1’);new Promise(()=> {	console.log(‘2’);}).then(()=> {	console.log(‘3’)})setTimeout(()=> {	console.log(‘4’)})console.log(‘5’)输出结果？复制代码

输出1 2 5 3 4。

• 知道async与await吗？了解编译成ES5的代码吗？

答：讲了一下他们的作用。对编译后的代码不了解，面试官很nice，给我讲解了一下，原理依然是callback，有兴趣的小伙伴可以自己去看看bable编译后的代码。

• LeetCode上做算法题：数组去重 要求空间复杂度为O(1)

答：面试官问我有没刷过算法题，很老实的告诉他没有，然后面试官调了一道很简单的让我写。

总结：还是算法题不过关，没有看过ES6、ES7是如何编译成ES5的。（听说字节跳动会问ES3，所以大家要打好基础啊）

结语

这次面试学习到了很多东西，知道了自己需要学习的内容是什么，市场对应届前端的要求是什么。同时结果也让我很满意，收到了某租车平台的offer，在这里祝愿各位小伙伴都能顺利找到自己心仪的公司。