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

前言

嗯(emmmm)，这篇面经我两周在SegmentFault上写过啦，如今在掘金上再更新一下会不会有人想揍我：你看又来了又来了~由于答应了一位技术经理不能食言在掘金上也写写文章，因此若是看过的那就再看一次吧(我已经推迟一天啦，摸摸本身的小肚子，周末吃喝玩乐+学习了)，可是我记得要更新，你看是吧！做为一位去年才毕业的前端妹子来讲，其实仍是个技术小白啦，近几年仍是想在技术上能有一个很大的提高，奔着我追求的永无止境的前端大神之路，开启了我一周左右的面经之路，大大小小的公司都有面，我就是奔着涨知识和积累经验去的！！！

加起来差很少10家公司左右吧，成绩本身也还挺满意的，拿到了6家公司的offer，大小公司也都有，像大华、华三，可是最终综合考虑的结果，去了一家本身面试体验最好的公司，至少也是一家上市公司啦~

面试前须要注意的细节点

1. 简历必定要写好，这个不用多说啦

2. 先想清楚你辞职想去的下一家的初衷是什么，是加薪资、提高技术 or 换个工做环境。根据你本身的真实状况，投简历的时候针对性地看看公司的招聘要求，先看看符合度是多少，以避免遇到要求极度不符合又没有在商量好的前提下去面试了，最后的结果可能就是你还不错，可是不符合咱们公司的要求。

3. 准备工做要作好，我是由于才去年毕业啦，因此集中准备在基础知识和目前在用的VUE框架这两块啦，其余的知识点我平时在撸代码的时候都有在作笔记，因此都会扫一遍知识点，其余的你实际工做中没有用到的可是比较流行的也不能忽略哦，了解一下或者临时补一下，不要被问到没有听过有点尴尬的。面试完一家记得被面到不会的要 作笔记作笔记！！！就当作是学习吧，并且有时候真的受益不浅~

4. 规划好你本身的面试时间，提早对要面试的公司作个简单的背景了解。我是一个比较想把事情集中在一个时间点一块儿作的人，因此提完离职后专心面试，一天会安排2-3家面试，面试前看看你即将面试的公司规模大小背景简单地了解一下，公司的面试流程通常是笔试 or 电话面试 (可无) —> 技术面(1-2轮) —> HR面 PS：我有两家公司还去了复试，不要管为何，我就是去学习的。一直在鼓励本身给本身加油

面试知识点

在面两个大公司和一个小公司的时候，尤为是一个传统行业的大型公司时，也有多是我年限的问题，尤为注意基础，不管是笔试仍是技术主管面试的时候都集中在这块，像原生JS、原生Ajax等，，(这些虽然我在工做中用的也不是不少ennnn,原生的是用的很少，可是我本身很注重)，说下面试碰到的吧(一些记不住了，想起来我可能也来不及补了，我懒哦~)。

HTML以及CSS篇，集中在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数据结构有什么优势？

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

emmmm(以前我在sf上打的是ennnn，一个小伙伴给我纠结了一下那我这里就纠正一哈),由于我专业是网络工程的，在华三和另外一家公司面试的时候没有被少问这些问题
PS:其实我心里很奔溃啊，大学我没有很认真听课哒，哭哭哭哭哭

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打包工具在用vue的时候确定也接触到啦，可是研究不深，只能算入门阶级(别吐槽，实践确实很少)，因此我就直接很诚实地和面试官说了，面试官好像也能理解也就没有这么问(内心暗自开心哈哈哈哈)，不过我以为仍是有必要都去熟悉或者实践一下，多知道一点不会死哒！

Other

有一些技术主管会考量一下你除了前端以外的技术能力，例如你熟悉的后端语言，sql会不会，还有人问我Linux命令会不会的(我心里:不会不会不会====),哈哈哈，不过node多多少少都有在用，这个也是前端应该要会的啦(but技术小白我不会，只是用到一点点~)
PS：对啦，忘记说啦，还有版本控制工具svn和git，大部分会问你git会不会，这个用了github的确定都会啦，我以前公司代码的控制工具都是svn啦，不过git我如今也很自信地说会啦，毕竟入职一周了唉唉唉~

最后

把面试当作学习，这个过程你会收益很大。本身也拿到了几家还不错的offer，最后选择了我比较满意的一家公司，我并无特别在乎薪资这块，都是综合考虑的一个结果啦！前端知识很杂，可能实际工做中用到的技术，像框架都是跟着公司的要求走的，像我最近也在看React啦，Vue和React都对比着再学习，不要问我为何没有在看Angular(懒懒懒),由于新公司说是偏向于React，因此最重要的仍是更看重基础知识的积累吧，固然，开心最重要~
最后的最后，说明一下，知识点是本身面试的时候被问到哒，参考参考，固然能帮助到一些人我已经很开心啦，我仍是懒没有附上答案，因此还有当心心支持我这个前端菇凉吗