前端面试总结（红色题为必考，其他为常考）
一、关于css面试题
1、css垂直居中的集中方式？
html结构如下：
.box{display:flex;justify-content:center;align-items:Center;}方法2：绝对定位和负边距
.box{position:relative;}.boxdiv{position:absolute;width:100px;height:50px;top:50%;left:50%;margin-left:-50px;margin-top:-25px;text-align:center;}方法3：translate
.box{position:relative;}.boxchilddiv{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align:center;}方法4：table-cell
.box{display:table-cell;vertical-align:middle;text-align:center;}方法5：偏移量0+margin:auto.wrap{positon:relative;}.center{positon:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
3、对于移动端使用rem，em、px、vw/vh区别
答：px：绝对单位，页面按像素计算，其值固定不变
em:相对定位，相对于父节点的值来计算，缺点：相对于父节点的font-size（默认为16px）值来计算，出现层层嵌套问题，计算麻烦
rem：相对定位，相当于em的升级版，区别在于rem相对于根元素html来计算，不会出现em的层层嵌套问题，可以作为弹性布局，其浏览器兼容性也比较好；（缺点：1.和根元素的font-size耦合性强，系统字体方法缩小时，会出现布局混乱的情况，2，html头部需要插入一段js代码
vwvh：浏览器视窗大小（viewport）即：100vw=window.innerwidth100vh=window.innerHeiht
%：百分比vw和%的区别：1.%是根据父元素的宽高来计算的，而vw则是以viewport来计算
2.100vw包括了页面滚动条宽度（页面滚动条属于viewport范围内，100vw当然包括了页面滚动条宽度）
4、css3的兼容问题（一般简单的答一些常用的兼容问题就好，不常用的就说碰到了百度解决的）
5、盒子模型（标准盒子模型、ie盒子模型）答：盒子模型由html元素的内容content+内边距padding+边框border+外边距margin组成，标准盒子模型（box-sizing:content-box）元素的所设宽度就是内容content宽度而ie盒子模型（box-sizing:border-box）所设宽度由content+padding+border组成
二、关于html5、css3面试题
1、html5的新属性有哪些？（列举一些新增常用的语义化标签nav、footer、section、article、aside，以及input新增属性type:date、email、time、color等，以及媒体标签(video、audio)，canvas,svg,本地存储(localstorage、sessionstorage)，websocket以及实现原理)
2、css3新增属性以及动画①border-radius：圆角边框；②border-image：图片边框；③background-size：背景的尺寸④background-origin：背景图片的定位区域
4、Localstorage、sessionstorage、cookie三者各个的区别，及特点，优点,本地存储使用场景具体怎么使用
2、原生ajax请求过程？
//第一步，创建XMLHttpRequest对象varxmlHttp=newXMLHttpRequest();//第二步，注册回调函数xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4)if(xmlHttp.status==200){//取得返回的数据vardata=xmlHttp.responseText;}}}//第三步，配置请求信息，open(),get//get请求下参数加在url后，.ashxmethodName=GetAllComment&str1=str1&str2=str2xmlHttp.open("post","/ashx/myzhuye/Detail.ashxmethodName=GetAllComment",true);//post请求下需要配置请求头信息//xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//第四步，发送请求,post请求下，要传递的参数放这xmlHttp.send("methodName=GetAllComment&str1=str1&str2=str2");//"
3、post请求以及get请求的优缺点？
（1）post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）（2）post发送的数据更大（get有url长度限制）（3）post能发送更多的数据类型（get只能发送ASCII字符）（4）post比get慢（5）post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都是get提交），目的是资源的获取，读取数据
6、如何遍历一个数组里的每个数据（主要考遍历的一些方法for循环，forEach()，map()方法，filter()）
7、js中排序的几种方式？
8、JavaScript中捕获/阻止捕获、冒泡/阻止冒泡，事件流
9、怎样进行深拷贝及浅拷贝？他们的区别？
14、为什么会有跨域、跨域的几种解决方式？答：（从同源策略方面进行回答、跨域方式jsonp，设置请求头，nginx代理vul-cli的proxyTable反向代理解决跨域）
16、js执行顺序。
18、算法题：JavaScript实现超大整数相加
19、什么是防抖与节流，分别的作用，怎么实现？
20、什么是高阶函数、纯函数？
答：高阶函数：是对其他函数进行操作的函数，可以将它们作为参数或返回它们。简单来说，高阶函数是一个函数，它接受函数作为参数或函数作为输出返回。
JS中内置了一些常用的高阶函数，例如：Array.prototype.map，Array.prototype.filter和Array.prototype.reduce等等。
例如：使用Array的sort函数，sort接收一个函数作为参数。实现为数组arr排序。
纯函数：简单来说，满足下面两个条件就称为纯函数，
21、如何一次性插入1000个div，考虑插入节点性能？
通过document.createDocumentFragment():方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
22、JS脚本三种加载方式及区别？
默认/同步；async/加载完执行,defer/dom渲染完按顺序执行。
23、JS运行机制？
阐述清楚事件循环流程。
24、浏览器渲染机制？
html/DOM树并行css/CSS树=>RenderTree渲染树=>布局渲染树=>绘制渲染树。
24、简要描述下vue2.x响应式原理？
Object.definePropertyget时收集依赖新建watcher对象，set时通过watcher对象更新视图。
延伸：1.性能优化，如何阻断响应式；2.Proxy与Object.defineProperty的区别：Object.defineProperty：不能监听到数组length属性的变化；不能监听对象的添加；只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Proxy可以监听数组length属性的变化；可以监听对象的添加；可代理整个对象，不需要对对象进行遍历，极大提高性能；多达13种的拦截远超Object.defineProperty只有get和set两种拦截。3.模板编译基础流程：解析指令=>优化/path=>生成；
四、关于vue面试题
1、Vue的生命周期有哪些，分别有哪些特性？
2、父子组件，以及非父子关系组件的通信是怎么实现的？（父传子通过props,子传父通过$emit,促发父组件自定义函数，vuex状态管理进行通信,$eventBus进行通信，provide/inject等）
4、vue路由的设置，及路由守卫的实现？
答：路由守卫有【全局路由前置守卫：beforeEach(to,from,next)、全局解析守卫（beforeResolve(to,from,next)）、全局后置守卫（afterEach(to,from)）,某个路由独享守卫beforeEnter(to,from,next),以及组件内的路由守卫：beforeRouteEnter(to,from,next)、beforeRouteUpdate、beforeRouteLeave】
6、vue中的继承mixins与extends区别？
答：两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）
7、vue中nextTick回调函数中，this指向的是当前vue组件实例，如何实现的？
答：call实现原理
8、虚拟DOM（比较算法及为什么需要虚拟DOM）？
答：核心：减少DOM渲染的范围，解析生成AST/抽象语法树，新老节点对比，最后只渲染不同部分；
延伸：patch机制：1.若不存在oldVnode,使用新的Vnode;2.若不存在新的Vnode，即删除oldVnode;3.若存在新Vnode和老Vnode,且是相同节点进行diff;若不是相同节点，则删除老Vnode，新增新Vnode；diff机制：1.同层比较，深度优先；减少复杂度；2.key值优化，新Vnode通过key索引找到可以复用的老节点；
五、关于es6面试题
2、var、let、const的区别。答：var是ES5提出的，let和const是ES6提出的。
var不存在块级作用域。let和const存在块级作用域。
ES5中作用域有：全局作用域、函数作用域。没有块作用域的概念。
ES6(简称ES6)中新增了块级作用域。块作用域由{}包括，if语句和for语句里面的{}也属于块作用域。
六、所用工具的问题1、代码管理使用的工具，svn,git(常用命令说几个)。
2、nginx使用场景，命令。
3、webpack有用过没，使用场景，以及原理。
4、webpack有用过没，使用场景，以及原理。
1.优化loader作用域，缩小文件搜索范围；2.开启cacheDirectory，将转义结果缓存至文件系统；3.dllplugin，把第三方库单独打包一个文件，生成映射文件；4.thread-loader-将loader由单进程转为多进程；5.treeshaking,可以实现删除项目中未被引用的代码；6.生成环境关闭source-map；
3.mvc,mvvm的区别？
4、说下你以前项目中遇到的问题，你是怎么解决的？
5、平时学习方法有哪些，你是怎么进行学习的，对新知识是否有洞察力，以及团队相处。
6、第二轮面试一般都是问你的兴趣爱好，学习能力，性格特点，团队协作能力，提前想好一些话题，跟面试官交心，交朋友的心态交流事半功倍