菜鸡Littleegg的前端面经（一）
菜鸡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服务器和应用服务器）
对跨域的解释比较不到位，解决的方法倒是都说了，但是最后的修改服务器端面试官具体问了，但是我没有很好的打出来，还是最主要的漏洞——没有深入了解。
跨域：跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务端之间是不存在跨域的。
具体建议看下面两篇，我也要去好好学习了~
问题五：说一下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：啊这啊这！！！
- 创建一个新对象
- 将新对象的_proto_指向构造函数的prototype对象
- 将构造函数的作用域赋值给新对象 （也就是this指向新对象）
- 执行构造函数中的代码（为这个新对象添加属性）
- 返回新的对象
问题十一：深拷贝与浅拷贝的区别。
答：浅拷贝（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（初始渲染开销较⼩，切换开销⽐较⼤）。
下面一些就是拓展题目了，没有标准答案，看个人发挥吧，要注意把自己的项目说清楚一点，最好是有在线的展示会更好。
问题十六：做过哪些项目？
问题十七：你觉得未来的职业规划是怎么样的？
问题十八：你认为怎样才算到达了前端大牛的程度？
问题十九：你觉得阿里的技术强吗？怎么能到达这种技术呢？
问题二十：你觉得你最有成就感的一件事是什么？
问题二十一：你有什么问题想问吗？
说起来后来聊着聊着发现原来面试官原本曾在阿里做过面试官，最后他跟我说是按照阿里的流程来面的，我内心：救救我！！！！
最后我倒还是问了问他这件事情，面试官很耐心的解答了，又问了问工作时间，然后如果我能成功进入贵公司的话会不会有像他这样的大佬带，什么时候有面试结果啥的。本来还想继续聊聊（对大佬的崇拜），但是面试我的时间其实已经超了，本来是预计半个小时，但是中途还穿插了部分面试题之外的（问了问奖项和奖学金的事情），就长了点，哈哈哈哈哈。
感觉面试官很不错，我又学到了很多！
