82

前言

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

面试前需要注意的细节点

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

面试知识点

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

HTML以及CSS篇,集中在CSS

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

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数据结构有什么优点?

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

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

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

浏览器兼容性问题

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

  1. 使用meta标签来调节浏览器的渲染方式,告诉浏览器用哪种内核渲染,360双核浏览器就是在ie和chrome之间来回切换,现在使用meta标签来强制使用最新的内核渲染页面

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  2. rgba不支持IE8
    解决:用opacity
  3. CSS3前缀

    -webkit- webkit渲染引擎  chrome/safari
    -moz gecko引擎    firefox
    -ms- trident渲染引擎 IE
    -o-    opeck渲染引擎 opera
  4. 过渡不兼容IE8,可以用JS动画实现
  5. background-size不支持IE8,可以用img
  6. 使用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);
     }
  7. 用css hack

    IE6: _
    IE7/7: *
    IE7/Firefox: !important
    IE7: *+
    IE6/7/8: \9
    IE8: \0
  8. :IE浮动margin产生的双倍距离,通常使用float:left来实现,浏览器存在兼容性问题,导致图片与 后面的内容存在margin不一致的问题,解决方法就是给图片添加diaplay:inline即可

  9. ie8不支持nth-child,但支持first-child和last-child,可以通过转化写法来处理问题,span:nth-child(2)可以转换为span:first-child+span,可以使ie8显示该内容,last-child可以自定义一个class类兼容ie8写法
  10. IE8下不支持HTML5属性placeholder,解决问题的js插件挺多的,常用的使用jquery.JPlaceholder.js插件处理问题
  11. 识别HTML5元素,IE中可能无法识别nav/footer,使用html5shiv
  12. 火狐下表单阻止表单默认提交事件:在form中添加 action="javascript:",秒杀上述所有默认行为;
  13. 始终为按钮button添加type属性,IE下的默认类型是button,其他浏览器下的默认类型是submit
  14. IE下删除所有不必要的console语句,IE下当遇到console时不识别之后报错,代码不会执行,或者全局自定义一个window.console方法
  15. IE浏览器下由于参数过长导致通过GET请求下载文件方法报错,解决改为POST请求
  16. IE浏览器下iframe弹窗中输入框光标丢失(无法输入)问题,解决清一下frame
  17. 兼容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;
    }

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

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

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

构建工具

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

Other

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

最后

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

81 条评论
_Kwan · 5月5日

是emmm不是ennnn....

+3 回复

0

@_Kwan 哈哈哈😄,你真逗,原谅我错别字大王,看得懂就行😄

Qin菇凉 作者 · 5月5日
0

@Qin菇凉 见你用这个词用得这么嗨,纠正一下。毕业1年就能去上市公司,公司做什么业务的

_Kwan · 5月5日
0

@_Kwan 前公司也是啊哈哈哈,都是金融行业的~

Qin菇凉 作者 · 5月5日
icare · 5月5日

谢谢

+1 回复

小抚顺儿 · 5月4日

加油ヾ(◍°∇°◍)ノ゙

回复

0

一起加油哈

Qin菇凉 作者 · 5月4日
小夜 · 5月4日

写的不错,我学东西都不怎么想做笔记。

回复

0

其实我也比较懒,但是最近面试感觉还是学到了挺多的,就还是给自己总结一下

Qin菇凉 作者 · 5月4日
岗伯伯 · 5月4日

写的太好了,前途无量!

回复

0

谢谢夸奖,一起加油哈

Qin菇凉 作者 · 5月4日
胖虎他爹是我 · 5月5日

超棒!!!

回复

0

@胖虎他爹是我 没有没有,因为有一些其实没有回答上来,但是面完一次就回来看了下相关知识点,然后补了一下对应差不多的内容,下一次面试就会发挥的更好啦

Qin菇凉 作者 · 5月5日
UKer · 5月5日

大佬

回复

0

我真的还技术小白,一起加油哈

Qin菇凉 作者 · 5月5日
魏其上 · 5月5日

同毕业一年。 现在公司只关注CSS方面,完全没VUE这方面经验 最近在学习准备辞职面试。看了你的文章启发很大

回复

0

我也是因为自己的职业规划不得不辞职,不然我们其实年限不长的跳槽其实比较尴尬,先给自己一些时间做好准备面试,加油加油!

Qin菇凉 作者 · 5月5日
vipwhr · 5月5日

在数据爆炸的背景下,后端会更加注重数据挖掘,高可用高并发,所以前端的工作会逐步向下层延伸。对前端的要求也更加多且杂,比如从单纯的页面到路由的管理的趋势。如果想让自己不被淘汰取得更好的发展,就要不断的保持学习,涉猎更广,这方面甚至比后端还辛苦。加油!

回复

0

@vipwhr Java大神来啦哈哈哈,互相督促学习啊哈哈哈
😏😏

Qin菇凉 作者 · 5月5日
栋仔zxd · 5月6日

(ಥ_ಥ)同一年毕业,很佩服你这种心态,最近我也是差不多面了十家公司,收到四家,但都不是很满意,后来几家一直被刷,心态略崩

回复

0

@栋仔zxd 心态怎么说,因为毕业不是很久,但是面试就是准备工作做全一点,也急不得啦,所以还是放宽心对待吧,然后自己看看被刷的原因是什么,面试就是换个方式学习补不足之处,心态真的很重要,一定不能沮丧^O^

Qin菇凉 作者 · 5月6日
冰冰酱 · 5月8日

同去年毕业,同用vue,自己也很重视原生js,也学了很多,但是对css好不感冒啊(但是完成工作没问题),感觉自己将来的方向是不写css。。只写js。还有题主的面试邀请多吗?刚毕业感觉很难有面试机会

回复

0

前端的方向肯定不止是css啊,这只是一方面,但是也不能忽略吧(我个人觉得这也是重点的一部分),如果说只写js的话那估计要针对性地看公司要求了,有些公司比较注重这块。面试邀请确实对我们毕业一年左右的有点尴尬,有一些我很想去的大厂会卡在年限和学历上,只能有一些看机遇啦,这点就只能多投投简历啦

Qin菇凉 作者 · 5月9日
0

3月份面试过一个稍微大点的公司,一共五面过了四面(hr),然后最后他们选择了另一个人,985的,感觉非985被深深歧视了,弄的我都想考验了

冰冰酱 · 5月9日
0

公司最终选择一个人都是多方面考虑的,我也是非985或211的呀,既然你能面过了四轮,说明技术上还是很认可的,最终可能公司只是选了一个更合适的,这么对比你已经不比985的差了是不是,面试都是双向选择的一个过程,所以期间维持一个好的心态真的很重要,加油加油!

Qin菇凉 作者 · 5月9日
jrainlau · 5月8日

前途无量,赞哦~

回复

0

谢谢鼓励,一起加油~

Qin菇凉 作者 · 5月9日
Dailoge · 5月8日

上市金融公司,难道是同花顺吗,哈哈哈

回复

0

哈哈,公司就不透露啦,关键成长重要~

Qin菇凉 作者 · 5月9日
0

同花顺前端又不咋样,一家主业务的公司罢了,抱着学习的态度的话,去同花顺没前途

feb__ · 5月9日
0

不是同花顺哈哈哈(那是我离职的公司哈哈哈),对外不评价公司怎么样啦

Qin菇凉 作者 · 5月9日
jack_sirens · 5月8日

同毕业一年,同在用vue,最近也在想着出去面试调戏下hr(虽然暂时还不想跳槽😂),感觉在老环境呆的久了就不是特别容易吸收新的知识,好在**的业务再逼着不断强化自己。。。PS: Linux指令还是要看看的,一个通用且强悍的构建工具能让繁琐且重复的发布流程一键化😁

回复

0

多谢指点,其他方面的我也会不断学习哒,如果公司目前的环境能让自己成长就不着急跳槽啦,我是真的想多扩展技术方面不得不辞职也算一个无奈之举。 PS:面试调戏hr哈哈哈,你可能会被调戏哦~

Qin菇凉 作者 · 5月9日
0

这么恐怖的嘛😂

jack_sirens · 5月9日
displaynone · 5月9日

总结的很到位!如果能附上答案or思路就更棒了。

回复

0

哈哈,好的,最近更新一下

Qin菇凉 作者 · 5月9日
0

辛苦了

displaynone · 5月9日
shoukai_wang · 5月9日

直接下滑看了下问题,我还以为你面的钉钉...

回复

0

哈哈,有机会都尝试一下

Qin菇凉 作者 · 5月9日
hotyann · 5月9日

面试经验很棒!妹子是在杭州嘛(/ω\) 为什么我提离职后工作任务反而更多了,别说准备面试,连请个假都不给批_(:з」∠)_

回复

0

嗯呐,在杭州,可能你们领导舍不得你走哈哈,或者交接工作~

Qin菇凉 作者 · 5月9日
忍者无敌 · 5月9日

还不错,适合一年左右经验的朋友,不过再往后内容就没这么基础了。。。加油吧,妹子~

回复

0

嗯嗯,谢谢,会加油的

Qin菇凉 作者 · 5月9日
0

@Qin菇凉 你这回复速度够快的。。

忍者无敌 · 5月9日
0

哈哈,刚好登着

Qin菇凉 作者 · 5月9日
kraven · 5月9日

刚毕业一年的妹子,很厉害了。加油

回复

0

哈哈,谢谢哈,一起加油~

Qin菇凉 作者 · 5月9日
不要说话 · 5月9日

所以小姐姐说的这些问题都回答上来了吗?为什么我觉得我看了都很懵。。。也就能说上些html css , js那块让我怀疑人生了

回复

0

大部分吧,因为准备地还算充分,一些没有回答上来的面试完就回来自己补啦

Qin菇凉 作者 · 5月9日
0

@Qin菇凉 有的东西也知道,但是专业术语听的一头雾水

不要说话 · 5月10日
载入中...