菜鸡Littleegg的前端面经（一）

大四，考虑了很久放弃了考研之后呢，本菜鸡就准备找实习了，但是发现都挺难的。

因为学校没有统一的安排，所以得自己去找实习，这里比较推荐boss直聘和实习僧。下面整理一下我的面试经验吧，也算是一个复习。

先是自我介绍，这个还是要好好准备下的，具体我也还是新手，在摸索中。

问题一：你觉得一个前端工程师需要会哪些技能？

答：我觉得首先需要会三件套——HTML、CSS、JavaScript，然后进行进一步深入，了解一些前端的框架，比如jQuery库，Bootstrap框架等，也需要学习主流的MVVM框架，比如vue.js、react.js、angular.js等，然后前端也需要会一些后端知识，因为涉及到向服务器请求数据等等。当然前端也不仅仅局限于这些，这是是我个人目前对此的认识。

算是已经把个人接触到的一些说了，但是整的一个前端还设计更多的方面，可以看一下别人的整理自学前端需要达到什么水平才能去工作？

问题二：知道HTTP有哪些状态码吗？

答：状态码主要分为5种，分别是1—5的开头。1开头表示请求，2开头的表示请求成功，3开头的表示重定向，4开头一般是客户端这边的错误，比如404 Not found。5开头是服务器端的错误，比如内部错误或者负载过重。

把5种状态码都说出来了，觉得应该还不错，但是面试官继续深入下去问，问我有没有了解过100和101，知不知道301和302的区别。呜呜呜，我就记住了302是临时性重定向，另外几个没有特别去记，真的可惜。然后我就说我会再去复习一下，最近也有在看《图解HTTP》。

菜鸟教程网址：HTTP状态码 | 菜鸟教程 (runoob.com)

尽量能够全部了解吧，因为你也不知道面试官会随机抽哪一个，理解了的话，记起来也还行。

问题三：行内元素和块级元素的区别？

这里我就不贴我的回答了，简直不堪入目！主要是把p标签说成了行内元素，救命，应该是span啊，呜呜呜。

下面是两者的概念和不同。

块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。

常见块级元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th；

行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。

常见内联元素有：em,strong,span,button,input,label,code,select,img,textarea

两者之间的区别：
1.块级元素占据一整行，内联元素的宽度是其元素内容的宽度，多个内联元素排列会放在同一行里除非放不下，才会挤到新的一行
2.块级元素可以设置宽度width和高度height，而内联元素设置widht和height是无效的
3.块级元素可以包含块级元素和内联元素，而内联元素只能包含文本
4.块级元素可以设置margin和padding属性，行内元素只有margin-left、margin-right、padding-left、padding-right起作用

问题四：了解跨域吗？为什么会产生跨域，如何解决呢？

答：当一个两个页面的协议、主机和端口，三者有任一不相同即会产生跨域。
解决：1、客户端浏览器解除跨域限制2、发送JSONP请求替代XHR请求3、修改服务器端（包括HTTP服务器和应用服务器）

对跨域的解释比较不到位，解决的方法倒是都说了，但是最后的修改服务器端面试官具体问了，但是我没有很好的打出来，还是最主要的漏洞——没有深入了解。

跨域：跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务端之间是不存在跨域的。

具体建议看下面两篇，我也要去好好学习了~

什么是跨域？跨域解决方法_越努力，越幸运！-CSDN博客

一文搞懂跨域的所有问题，生活从此669~_慕课手记

问题五：说一下json的工作原理。

答：这个我没有具体深入了解过

呜呜呜，本菜鸡真的没深入了解，唉，真惨，现在要去了解了！

JSON: JavaScript Object Notation（JavaScript 对象标记法），是一种存储和交换数据的语法，通过 JavaScript 对象标记法书写的文本。

还是继续附上链接：JSON的基本结构和数据交换原理 - Dulk - 博客园 (cnblogs.com)

问题六：cookie和session的区别。

答：cookie是在本地存储的，session还没有特别接触过。

因为本没有做过很多与服务器相关并进行数据交换的项目，所以真的不好解释，硬背也有风险。最好还是去找项目练手。

区别：

1、数据存储位置：cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、安全性：cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。

3、服务器性能：session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie。

4、数据大小：单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5、信息重要程度：可以考虑将登陆信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中。
两者的工作原理和使用可以看这篇文章：cookie和session的详解与区别 - 测试开发喵 - 博客园 (cnblogs.com)

问题七：sessionStorage和localStorage

答：我不清楚这个。

内心os，救命救命，谁来救救我！！！

sessionStorage和localStorage的区别是：1、localStorage没有过期时间；2、sessionStorage针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器后，数据将被删除。

sessionStorage和localStorage的区别是什么-php教程-PHP中文网

问题八：JavaScript有哪些数据类型？

答：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、对象(Object)、数组(Array)

少答了几个，一时之间没反应出来。

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（ES6）。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

问题九：说一下什么是事件监听和事件冒泡。

答：事件冒泡就是比如你在一个按钮上点击了一下，他就会一层一层向上冒，父元素也会有这个事件；事件监听就是添加一个Listener，监听在上面的事件比如鼠标点击、滑动，输入等

感觉解释的不够好，语言没组织好，主要是知道这么回事但是说不出来……

事件冒泡：从事件源到顶层对象，即触发元素到window的事件执行顺序

事件捕获：从顶层对象到事件源，即触发元素到window的事件执行顺序

事件监听：调用对象.addEventListener(参数1，参数2，参数3)

问题十：JavaScript中new的工作原理。

答：具体内在我没有深入，只知道是创建了一个对象。

内心os：啊这啊这！！！

1. 创建一个新对象
2. 将新对象的_proto_指向构造函数的prototype对象
3. 将构造函数的作用域赋值给新对象 （也就是this指向新对象）
4. 执行构造函数中的代码（为这个新对象添加属性）
5. 返回新的对象

问题十一：深拷贝与浅拷贝的区别。

答：浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存。

其实我不是这样回答的，但是意思是对的，我是举了一个a=1，b=a的例子，形象一点。这个题目一般都会问到，绕不过去的。

问题十二：JavaScript中事件循环机制是什么？

答：我不清楚

具体可以看这篇文章，我没深入了解过，就被问的挺懵的。

深入理解JavaScript事件循环机制 - ChessZhang - 博客园 (cnblogs.com)

问题十三：如何让一个元素垂直居中？

我回答了两种，一种是设置绝对定位，然后还有margin设置为auto；还有就是一部分正一部分负的，具体其实没记太清，一般用css的时候都用的第一种，所以还是得多学学，捡起来。

这里就不具体整理了，看大佬整理的文章吧：元素垂直居中

问题十四：Vuejs的生命周期

这道题复习过了，能够完整把几个阶段都说出来，也有部分拓展，但是依然可以完善。

beforeCreate：是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created：在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。

beforeMount：发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

mounted：在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

beforeUpdate：发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

updated：发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

beforeDestroy：发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed：发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

问题十五：v-if和v-show的区别？

这里清楚不同，但是依旧没有很好的组织语言，还问出了几个小错，太不应该了。

1.共同点：都能控制元素的显示和隐藏。

2.不同点：实现本质⽅法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。

3.总结：如果要频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）。

下面一些就是拓展题目了，没有标准答案，看个人发挥吧，要注意把自己的项目说清楚一点，最好是有在线的展示会更好。

问题十六：做过哪些项目？

问题十七：你觉得未来的职业规划是怎么样的？

问题十八：你认为怎样才算到达了前端大牛的程度？

问题十九：你觉得阿里的技术强吗？怎么能到达这种技术呢？

问题二十：你觉得你最有成就感的一件事是什么？

问题二十一：你有什么问题想问吗？

说起来后来聊着聊着发现原来面试官原本曾在阿里做过面试官，最后他跟我说是按照阿里的流程来面的，我内心：救救我！！！！

最后我倒还是问了问他这件事情，面试官很耐心的解答了，又问了问工作时间，然后如果我能成功进入贵公司的话会不会有像他这样的大佬带，什么时候有面试结果啥的。本来还想继续聊聊（对大佬的崇拜），但是面试我的时间其实已经超了，本来是预计半个小时，但是中途还穿插了部分面试题之外的（问了问奖项和奖学金的事情），就长了点，哈哈哈哈哈。

感觉面试官很不错，我又学到了很多！