前端面试流程
前端面试流程
------By漆黑小T
前面5个题，有两个答不出来就可以pass
遇到面试者反问，以时间有限为由，让其自行百度，面试印象减分
1、css问题,水平、垂直居中的写法，请至少写出4种？
水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中
设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;
备注：可以只听说了几条，一般只要说出来的都不会错，三条以上及格
2、css问题，清除浮动的几种方式
最优，使用after伪元素清除浮动：
.clearfix:after{/伪元素是行内元素 正常浏览器清除浮动方法/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
zoom: 1;/ie6清除浮动的方式 号只有IE6-IE7执行，其他浏览器不执行/
}
其他，使用before和after双伪元素清除浮动：
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
备注：能准确说出来的，说明这次面试很用心准备了，说出来大概的及格，一点都不知道的可以pass
3、js问题，说一下宏任务和微任务？
宏任务：当前调用栈中执行的任务称为宏任务。（主代码快，定时器等等）。
微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务为微任务。（可以理解为回调事件，promise.then，proness.nextTick等等）。
宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。
备注：说出来大概的及格，如果回答这表示不清楚，一点都不知道的可以pass
4、深拷贝和浅拷贝？
对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。
首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。
如何实现深拷贝：
第一种方法、通过递归解析解决
第二种方法：通过JSON解析解决
备注：实现深拷贝至少说出来一种
5、缓存（session、cookie、localstorage）特点，区别
cookie 特点：
1.不同的浏览器存放的cookie位置不一样，也是不能通用的。
2.cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。
3.我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域
4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样,一般为20个。
5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。
6.cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁localStorage（本地存储）：
1.生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
2.存储的信息在同一域中是共享的。
3.当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
4.大小：据说是5M（跟浏览器厂商有关系）
5.在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
6.localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
7.localStorage受同源策略的限制
sessionStorage（本地会话存储）:
用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的。
cookie、localStorage、sessionStorage区别
相同：在本地（浏览器端）存储数据
不同：
localStorage、sessionStorage
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
localStorage是永久存储，除非手动删除。
sessionStorage当会话结束（当前页面关闭的时候，自动销毁）
cookie的数据会在每一次发送http请求的时候，同时发送给服务器而localStorage、sessionStorage不会。
备注：特点说出来一些即可，但是区别要说出来
提升题目：
1、移动端适配，rem和em区别
重点词：百分比方案、rem适配方案
rem是相对长度单位，rem方案中的样式设计为相对于根元素font-size计算值的倍数。
em是相对于父元素
2、数组去重
Indeof set 等
3、js防抖节流
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
实现原理，重点词：setTimeout
4、浏览器的回流和重绘
他们的关系？性能？（避免回流）
重点词：回流必重绘，重绘不一定回流
5、Vue数据流传递
重点词：vuex 、buds、props等
6、网站性能优化，资源加载？
重点词：懒加载，加载顺序
图片类：精灵图、字体图标(iconfont)
7、封装过axios？怎么实现可配置？
看回答的流畅度，项目中的axios是否是自己疯转的
8、项目经验丰富度：是否做过复杂的表单提交类（逻辑），可视化展示类（动画，特效），实时聊天类（异步编程）
9、目前，你做项目中遇到过比较困难的问题，怎么解决？
10、团队中有多少人，你在其中扮演什么样的角色？
11、你到目前为止做过多少个项目？几个PC，类型（中后台居多）?几个m站？几个小程序？
12、是否可以独立开发？在没有UI支持下，布局，交互，符合需求？
