俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

俄罗斯贵宾会毕业一年左右的前端妹子面经总结

毕业一年左右的前端妹子面经总结

2018/05/14 · 前端职场 · 1 评论 · 面试

原文出处: Qin菇凉   

从大一开始学习前端,今年大三,10月份开始投简历,陆续收到很多家公司的面试,目前为止的面试通过率是百分之百,总结下面试题。
不定期更新中。。。

前言

嗯ennnnnn,,,,懒癌症拖延的毛病,趁着最后一个上班日赶紧把最近一周的面试做个总结(虽然我下周一才入职),作为一位去年才毕业的前端妹子来说,其实还是个技术小白啦,近几年还是想在技术上能有一个很大的提升,而且不是说金三银四嘛(嘤嘤嘤,好像是真的),所以在试水了两家公司之后,开启了我一周左右的面经之路,大大小小的公司都有面,我就是奔着涨知识和积累经验去的!!!加起来差不多10家公司左右吧,成绩自己也还挺满意的,拿到了6家公司的offer,大小公司也都有,像大华、华三,但是最终综合考虑的结果,去了一家自己面试体验最好的公司,至少也是一家上市公司啦~

百度第一次

面试前需要注意的细节点

  1. 简历一定要写好,这个不用多说啦
  2. 先想清楚你辞职想去的下一家的初衷是什么,是加薪资、提升技术 or 换个工作环境。根据你自己的真实情况,投简历的时候针对性地看看公司的招聘要求,先看看符合度是多少,以免遇到要求极度不符合又没有在商量的前提下去面试了,最后的结果可能就是你还不错,但是不符合我们公司的要求。
  3. 准备工作要做好,我是因为才去年毕业啦,所以集中准备在基础知识和目前在用的VUE框架这两块啦,其他的知识点我平时在撸代码的时候都有在做笔记,所以都会扫一遍知识点,其他的你实际工作中没有用到的但是比较流行的也不能忽略哦,了解一下或者临时补一下,不要被问到没有听过有点尴尬的。面试完一家记得被面到不会的要做笔记做笔记!!!!就当做是学习吧,而且有时候真的受益匪浅~
  4. 规划好你自己的面试时间,提前要面试的公司做个简单的背景了解。我是一个比较想把时间集中在一起做的人,所以提完离职后专心面试,一天会安排2-3家面试,面试前看看你即将面试的公司规模大小背景简单地了解一下,公司的面试流程一般是笔试 or 电话面试 (可无) —> 技术面(1-2轮) —> HR面 

一面

1.AJAX流程
2.promise简单说一下
3.手写一个箭头函数
4.链式调用
5.简单的观察者模式
6.let、const
7.数组去重
8.判断数据类型,null怎么判断
9.正则 电话区号+座机号,并给区号加上括号
俄罗斯贵宾会,10.MVC、MVP、MVVM
11.TopK用的什么排序
12.堆排序的时间复杂度、稳定性,什么是稳定排序
13.基本有序的数组用什么排序
14.冒泡排序时间复杂度,最好的情况的时间复杂度

面试知识点

在面两个大公司和一个小公司的时候,尤其是一个传统行业的大型公司时,也有可能是我年限的问题,尤其注意基础,无论是笔试还是技术主管面试的时候都集中在这块,像原生JS、原生Ajax等,,(这些虽然我在工作中用的也不是很多ennnn,原生的是用的不多,但是我自己很注重),说下面试碰到的吧(一些记不住了,想起来我补上哈~)。

二面

1.三栏布局,(博客有)
2.position值
3.让元素不可见
4.数组深浅拷贝、对象深浅拷贝
5.webpack路由懒加载
6.ES6异步请求数据怎么操作
7.有哪些公司offer

HTML以及CSS篇,集中在CSS

  1. 说下你常用的几种布局方式
    集中往盒模型、flex布局说(至于grid布局,这个我看过没有用到过)
  2. 实现水平居中的几种方法?
  3. animate和translate有没有用过,一些常见的属性说下?
  4. CSS实现宽度自适应100%,宽高16:9的比例的矩形。
  5. 如何实现左边两栏一定比例,左栏高度随右栏高度自适应?

三面

1.类似脑筋急转弯
2.类似脑筋急转弯
3.let、const
4.结构辅助
5.rest参数
6.SPA优缺点
7.MVC、MVVM MVVM为了解决什么问题
8.箭头函数
9.XSS、CSRF
10.ES5和ES6区别
11.项目
12.项目难点
13.有哪些offer
14.全栈的看法

JavaScript篇(重要)

  1. 变量提升遇到的一些简单code题
  2. 说一下对闭包的理解,以及你在什么场景下会用到闭包?
  3. 说一下你对原型与原型链的了解度,有几种方式可以实现继承,用原型实现继承有什么缺点,怎么解决?
  4. iframe的缺点有哪些?
  5. Ajax的原生写法
  6. 为什么会有同源策略?
  7. 前端处理跨域有没有遇到过,处理跨域的方式有哪几种方式去解决
  8. 怎么判断两个对象是否相等
  9. 代码实现一个对象的深拷贝
  10. 从发送一个url地址到返回页面,中间发生了什么
  11. 说下工作中你做过的一些性能优化处理

百度第二次

ES6篇(引导篇,相对重要)

这块面试官主要是问你哪块用的比较多,你可以引导性地把面试官往你会的地方说

  1. 箭头函数中的this指向谁?
  2. 如何实现一个promise,promise的原理,以及它的两个参数是什么?
  3. promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的,分别这么写有什么区别,什么情况下会两个都同时用到?
  4. map和set有没有用过,如何实现一个数组去重,map数据结构有什么优点?

一面

1.闭包
2.作用域链
3.垃圾回收制
4.垃圾回收制的循环引用问题
5.原型链
6.浏览器的兼容(说几个CSS说几个JS)
7.PromiseA+规范
8.HTTP状态码
9.HTTP首部有哪些关于缓存的字段
10.服务器怎么判断304
11.Git

计算机网络篇(相对重要)

ennnnn,因为我专业是网络工程的,在华三和另一家公司面试的时候没有被少问这些问题

  1. http、https、以及websocket的区别
  2. http常见的状态码,400,401,403状态码分别代表什么?
  3. 协商缓存和强缓存的区别
  4. 说下计算机网络的相关协议?

二面

1.进程与线程的区别
2.SQL中事务的概念
3.死锁
4.产生死锁的条件
5.CHAR和VARCHAR的区别
6.深度遍历二叉树
7.排序算法复杂度、稳定性
8.前端安全
9.HTTP状态码
10.重定向怎么实现
11.离开确认怎么实现
12.并行和并发

浏览器兼容性问题

因为我的工作主要还在专注在web端,所以浏览器兼容性的问题没有少碰到过,因主要是兼容IE8以上以及其他各个浏览器,这个就当做总结一下吧(在被问到这一块的时候其实我是有加分的,因为回答的比较多2333)

  1. 使用meta标签来调节浏览器的渲染方式,告诉浏览器用哪种内核渲染,360双核浏览器就是在ie和chrome之间来回切换,现在使用meta标签来强制使用最新的内核渲染页面
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"/>

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f631c135f1477835695-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f631c135f1477835695-1" class="crayon-line">
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;/&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  1. rgba不支持IE8
    解决:用opacity
  2. CSS3前缀
-webkit- webkit渲染引擎 chrome/safari -moz gecko引擎 firefox -ms-
trident渲染引擎 IE -o- opeck渲染引擎 opera

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f631c135fa113332358-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c135fa113332358-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f631c135fa113332358-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c135fa113332358-4">
4
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f631c135fa113332358-1" class="crayon-line">
-webkit- webkit渲染引擎  chrome/safari
</div>
<div id="crayon-5b8f631c135fa113332358-2" class="crayon-line crayon-striped-line">
-moz gecko引擎    firefox
</div>
<div id="crayon-5b8f631c135fa113332358-3" class="crayon-line">
-ms- trident渲染引擎 IE
</div>
<div id="crayon-5b8f631c135fa113332358-4" class="crayon-line crayon-striped-line">
-o-    opeck渲染引擎 opera
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 过渡不兼容IE8,可以用JS动画实现
  2. background-size不支持IE8,可以用img
  3. 使用PIE.htc让IE6/7/8支持CSS3部分属性,像CSS3的border-radius,box-shadow,css backgrounds(-pie-background),Gradients,RGBA属性
.border-radius { border-radius: 10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; background: #abcdef; behavior:
url(css/PIE.htc); }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f631c135fe911624083-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c135fe911624083-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f631c135fe911624083-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c135fe911624083-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f631c135fe911624083-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c135fe911624083-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f631c135fe911624083-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f631c135fe911624083-1" class="crayon-line">
.border-radius {
</div>
<div id="crayon-5b8f631c135fe911624083-2" class="crayon-line crayon-striped-line">
border-radius: 10px;
</div>
<div id="crayon-5b8f631c135fe911624083-3" class="crayon-line">
-webkit-border-radius: 10px;
</div>
<div id="crayon-5b8f631c135fe911624083-4" class="crayon-line crayon-striped-line">
-moz-border-radius: 10px;
</div>
<div id="crayon-5b8f631c135fe911624083-5" class="crayon-line">
background: #abcdef;
</div>
<div id="crayon-5b8f631c135fe911624083-6" class="crayon-line crayon-striped-line">
behavior: url(css/PIE.htc);
</div>
<div id="crayon-5b8f631c135fe911624083-7" class="crayon-line">
 }
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 用css hack
IE6: _ IE7/7: * IE7/Firefox: !important IE7: *+ IE6/7/8: \9 IE8:
\0

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f631c13601410431759-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13601410431759-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f631c13601410431759-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13601410431759-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f631c13601410431759-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13601410431759-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f631c13601410431759-1" class="crayon-line">
IE6: _
</div>
<div id="crayon-5b8f631c13601410431759-2" class="crayon-line crayon-striped-line">
IE7/7: *
</div>
<div id="crayon-5b8f631c13601410431759-3" class="crayon-line">
IE7/Firefox: !important
</div>
<div id="crayon-5b8f631c13601410431759-4" class="crayon-line crayon-striped-line">
IE7: *+
</div>
<div id="crayon-5b8f631c13601410431759-5" class="crayon-line">
IE6/7/8: 9
</div>
<div id="crayon-5b8f631c13601410431759-6" class="crayon-line crayon-striped-line">
IE8: 
</div>
</div></td>
</tr>
</tbody>
</table>
  1. :IE浮动margin产生的双倍距离,通常使用float:left来实现,浏览器存在兼容性问题,导致图片与 后面的内容存在margin不一致的问题,解决方法就是给图片添加diaplay:inline即可
  2. ie8不支持nth-child,但支持first-child和last-child,可以通过转化写法来处理问题,span:nth-child(2)可以转换为span:first-child+span,可以使ie8显示该内容,last-child可以自定义一个class类兼容ie8写法
  3. IE8下不支持HTML5属性placeholder,解决问题的js插件挺多的,常用的使用jquery.JPlaceholder.js插件处理问题
  4. 识别HTML5元素,IE中可能无法识别nav/footer,使用html5shiv
  5. 火狐下表单阻止表单默认提交事件:在form中添加 action=”javascript:”,秒杀上述所有默认行为;
  6. 始终为按钮button添加type属性,IE下的默认类型是button,其他浏览器下的默认类型是submit
  7. IE下删除所有不必要的console语句,IE下当遇到console时不识别之后报错,代码不会执行,或者全局自定义一个window.console方法
  8. IE浏览器下由于参数过长导致通过GET请求下载文件方法报错,解决改为POST请求
  9. IE浏览器下iframe弹窗中输入框光标丢失(无法输入)问题,解决清一下frame
  10. 兼容IE8 new Date()返回NaN问题,解决自定义方法
function parseISO8601(dateStringInRange) { var isoExp =
/^\s*(\d{4})-(\d\d)-(\d\d)\s*$/, date = new Date(NaN),
month, parts = isoExp.exec(dateStringInRange); if(parts) { month =
+parts[2]; date.setFullYear(parts[1], month - 1, parts[3]);
if(month != date.getMonth() + 1) { date.setTime(NaN); } } return
date; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f631c13605182909953-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f631c13605182909953-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f631c13605182909953-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f631c13605182909953-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f631c13605182909953-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f631c13605182909953-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f631c13605182909953-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f631c13605182909953-14">
14
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f631c13605182909953-1" class="crayon-line">
function parseISO8601(dateStringInRange) {
</div>
<div id="crayon-5b8f631c13605182909953-2" class="crayon-line crayon-striped-line">
    var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,
</div>
<div id="crayon-5b8f631c13605182909953-3" class="crayon-line">
        date = new Date(NaN), month,
</div>
<div id="crayon-5b8f631c13605182909953-4" class="crayon-line crayon-striped-line">
        parts = isoExp.exec(dateStringInRange);
</div>
<div id="crayon-5b8f631c13605182909953-5" class="crayon-line">
 
</div>
<div id="crayon-5b8f631c13605182909953-6" class="crayon-line crayon-striped-line">
    if(parts) {
</div>
<div id="crayon-5b8f631c13605182909953-7" class="crayon-line">
        month = +parts[2];
</div>
<div id="crayon-5b8f631c13605182909953-8" class="crayon-line crayon-striped-line">
        date.setFullYear(parts[1], month - 1, parts[3]);
</div>
<div id="crayon-5b8f631c13605182909953-9" class="crayon-line">
        if(month != date.getMonth() + 1) {
</div>
<div id="crayon-5b8f631c13605182909953-10" class="crayon-line crayon-striped-line">
            date.setTime(NaN);
</div>
<div id="crayon-5b8f631c13605182909953-11" class="crayon-line">
        }
</div>
<div id="crayon-5b8f631c13605182909953-12" class="crayon-line crayon-striped-line">
    }
</div>
<div id="crayon-5b8f631c13605182909953-13" class="crayon-line">
    return date;
</div>
<div id="crayon-5b8f631c13605182909953-14" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

美团

Vue相关知识点 (框架之一重要)

因为我简历上主要写的是会vue啦,其实也不是精通,因为边学边开发,主要是实践的项目不是特别复杂,不过常见的一些坑点还是有遇到的啦,这个是看你会的框架问相应的知识点

  1. 简单阐述一下vue的生命周期
  2. 如何实现一个自定义组件,不同组件之间如何通信的?
  3. 父子组件如何通信的?
  4. 前端路由有没有用过,你在项目中怎么实现路由的嵌套?
  5. nextTick和Vuex两个有没有用过,分为什么情况下用到?
  6. Vue的响应式原理你知道是怎么实现的吗?你觉得订阅者-发布者模式和观察者模式有区别吗?有的话,说一下它们的区别。

一面

1.Vue双向数据绑定
2.diff算法
3.vue计算属性如何实现
4.vdom优缺点
5.SPA原理
6.webpack用过那些loader
7.gitHub
8.angular脏检查
9.export看代码说结果(好像babel转码的export和node里的不太一样)
10.let、const
11.箭头函数
12.localStorage缺点
13.手写算法,求二叉树中两个标记的节点之间的最短路径吧,(类似迪杰特斯拉算法吧)

构建工具

因为项目还在前后端未分离的时候,我研究的gulp比较多,像grunt、fis3也有了解过,webpack还不是很熟(感觉要GG),所以这块问的比较少,面试官也就没有这么问,不过我觉得还是有必要去熟悉或者实践一下一下

二面

1.无序数组,找出所有满足条件的数,这个数比前面的数都大,比后面的数都小
2.js继承
3.实现一个简单的mvvm
4.实现一个装饰者模式
5.看过哪些书
6.this绑定
7.HTTP缓存,ETag

Other

有一些技术主管会考量一下你除了前端之外的技术能力,例如你熟悉的后端语言,sql会不会,还有人问我Linux命令会不会的(我内心:不会不会不会====),不过node多多少少都有在用,这个也是前端应该要会的啦(but技术小白我不会,只是用到一点点~)

三面

1.prototype属性
2.跨域安全,怎么防范
3.设计方面的书
4.UI的了解
5.CSS的书
6.前端哪里不好
7.问了一些复杂的设计模式
8.项目亮点
9.MVC

最后

把面试当做学习,这个过程你会收益很大。自己也拿到了几家还不错的offer,最后选择了我比较满意的一家公司,我并没有特别在意薪资这块,都是综合考虑的一个结果啦!前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习,不要问我为什么没有在看Angular(懒懒懒),因为新公司说是偏向于React,所以最重要的还是更看重基础知识的积累吧,当然,开心最重要~

1 赞 4 收藏 1 评论

俄罗斯贵宾会 1

京东

一面

1.jq和vue区别,各自的场景
2.为什么选择Vue
3.跨域方法
4.ES6新特性
5.h5新特性
6.你做前端的优势

二面

1.Vuex原理
2.项目难点
3.水平垂直剧中
4.盒模型
5.数组去重
6.一维数组变二维
7.HTTP状态码
8.继承
9.对框架怎么看

今日头条

一面

1.ES6了解哪些
2.promise
3.promise.all是并行还是并发
4.手写promise.all
5.实现一个BST、Node构造函数,要求有inster方法,能先序、中序、后序遍历
6.css多种方式画三角形
7.css实现正方形的自适应
8.进程间的通信方式
9.详细说下三次握手、四次挥手
10.css画菱形

滴滴

一面

1.手写算法
2.手写继承
3.画盒模型

二面

1.常用的类名
2.继承
3.盒模型
4.jsonp
5.ajax同步和异步
6.window.onload,浏览器怎么渲染
7.轮播图
8.linux命令
9.数组归并去重

滴滴第二次

一面

1.css3动画
2.实现水平垂直居中
3.Promise规范、源码
4.Promise链式调用如何中断
5.Vue性能优化,用过哪些性能优化的方案(这个他和我说了好多,我也懂了好了好多,一会记录一下)
6.vue、react的区别
7.快速找到数组中只出现一次的值(用位操作)
8.async function
9.项目和我聊了很多
10.postCss、mixin
聊的挺好的,然后不知道为什么就什么消息都没有了,可能是我问了面试官很多题,他有些反感吧。

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:俄罗斯贵宾会毕业一年左右的前端妹子面经总结

您可能还会对下面的文章感兴趣: