面试分享：应届前端面试经历

时间 2019-11-08

标签面试分享应届前端经历栏目快乐工作繁體版

原文原文链接

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

为了记录本身的面试过程，也为了让正在面试的小伙伴有所准备，下面跟你们分享个人面试经历。html

一、某网课公司

一轮笔试

4页纸笔试题目大多考验原生JS功底，限时一个小时完成，后面四十多分钟提早完成了，因此你们仍是要学好原生JS啊。前端

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

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

函数做用域问题。

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

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

重复定义函数

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中函数具备声明提早的效果，且重复定义同一个函数变量时后定义的覆盖先定义的。ios

对盒模型认知与理解？

答：讲出IE下的怪异盒模型和标注浏览器的盒模型，且能够经过box-sizing切换盒模型。css3

cookie与sessionStorage与localStorage的区别？

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

for与for in与for of的区别？

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

什么是跨域，解决方案？

答：跨域是浏览器的同源策略，目的是增强客户端安全性。根据不一样场景能够选择jsonp、CORS、postMessage，而后分别讲解下jsonp、CORS、postMessage。web

页面卡顿时，如何查找缘由以及解决方案？

答：开放题，答的越详细越好。能够从使用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<arr[0].length;i++) {
      for(let j=0;j<arr[1].length;j++) {
        arr[0][i].push(arr[1][j]);
        a.push(arr[0][i])
      }
    }
    console.log(a)
    arr.splice(0,2,a)
    fun(arr);
  }
}

function init(arr) {
  let a=[];
  for(let i=0;i<arr[0].length;i++) {
    for(let j=0;j<arr[1].length;j++) {
      a.push([arr[0][i],arr[1][j]]);
    }
  }
  arr.splice(0,2,a)
}
复制代码

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

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

二、某工厂互联网+部门

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

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

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

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

对ajax有什么理解？

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

对npm有什么理解？

答：包管理工具。

对跨域有什么理解？

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

现场开电脑看个人博客，而后就给我介绍公司状况，开发部有后端有IOS有安卓可是没有前端

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

三、某租车公司

一轮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)

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

总结：仍是算法题不过关，没有看过ES六、ES7是如何编译成ES5的。（据说字节跳动会问ES3，因此你们要打好基础啊）

结语

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