前端面试准备：总结了一些面试很可能会问到的东西

JS面试题

!原型链:
原型：所有的函数都有一个特殊的属性prototype，prototype属性是一个指针，指向的是一个对象（原型对象），
原型中的属性和方法都可以被函数的实例共享，
原型链：原型链是用于查找引用对象的属性，查找属性会沿着原型链依次进行，如果找到该属性会停止搜索并做
响应的操作，否则会沿着原型链依次查找直到结尾。
!闭包:
闭包就是能够读取其他函数内部变量的函数。（可以把闭包理解为定义在一个函数内部的函数）
所以在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
最大的用处由两个，一个是可以读取到其他函数内部的变量，另一个就是让这些变量的值时钟保持在内存中
注意点：
由于闭包会使函数中的变量都保存在内存中，内存消耗比较大，所以不能滥用，发欧泽会造成网页性能问题，
在IE中可能会导致内存泄漏。解决方法是在退出函数之前，将不使用的局部变量全部删除
闭包会在父函数外部，改变父函数内部变量的值。如果把父函数当作对象使用，把闭包当作它的方法，
把内部变量当作它的私有属性，不要随便改变父函数内部变量的值
1.jQuery中的选择器
#id .class element :first :empty :odd
2.本地存储的区别
1.cookie 2.sessionStorage 3.localStorage
大小：
cookie存储数据大小不能超过4kb
sessionStorage和localStorage可以存储的数据大小可以达到5M或者更大
有效时间：
cookie：即使环比浏览器或关闭窗口，只要在设置的有效时间之内，就一直可用
sessionStorage：当前浏览器窗口关闭自动删除
localStorage：存储持久数据，浏览器关闭数据不丢失除非主动删除
与服务器交互方式：
cookie的数据会自动传递到服务器，服务器也可以写入数据到cookie到客户端
sessionStorage和localStorage不会把数据传递到服务器，除非主动删除
3.什么是ajax，ajax步骤
ajax就是异步JavaScript和XML(Asynchronous JavaScript and XML)，
能够刷新局部网页而不是重新加载整个页面
步骤：
1.创建XMLHttpRequest对象
2.使用XMLHttpRequest的open和send方法发送资源请求给服务器
3.使用XMLHttpRequest的responseText或responseXML获取服务器响应数据
4.使用onReadyStateChange，每当XMLHttpRequest的readyState发生改变都会触发
onReadyStateChange函数
4.xml和json的区别
json相对xml数据体积小
JSON的数据远远快于XML
json与JavaScript交互更加方便，容易解析处理，比较友好的数据交互
XML对数据的描述性比较好
5.数据类型有哪些
基本类型：Undefined、Null、Bollean、Number和String
引用类型：Object、Array、Function
6.undefined和null的区别
null代表空值，使用typeOf运算得到Object，可以认为它是一个特殊的对象
undefined，声明了一个变量没有初始化时，得到的就是undefined
这两个是为了区分空指针对象和为初始化的变量
7.http和https有什么区别
http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器都无法验证对方的身份
https是HTTP协议运行在SSL/TLS之上，SSL/TSL运行在TCP之上。所有传输的内容都经过加密。
此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份
8.常见的HTTP状态码
2开头(请求成功)，表示成功处理了请求的状态代码
3开头(请求被重定向)，表示要完成请求，需要进一步操作，通常这些状态码用来重定向
4开头(请求错误)，这些状态码表示请求可能出错，妨碍了服务器的处理
5开头(服务器错误)，这些状态码表示服务器在尝试处理请求时发生内部错误，这些错误可能是服务器
本身的错误，而不是请求出错
9.如何进行网站性能优化
用户角度：优化能够让页面加载更快，对用户操作响应得更及时，能够给用户提供更为友好得体验
服务器角度：优化能够减少页面请求数，或减少请求所占贷款，能够节省可观资源
1.减少HTTP请求数 2.使用缓存 3.脚本得无阻塞加载 4.内联脚本得位置优化
5.JavaScript中的DOM操作优化、css选择符优化 6.图片编码优化-懒加载
10.什么是MVVM、MVC，区别
MVC（Model-View-Controller）
MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）
->Model（数据持久化）->View（将结果返回给View）
MVVM:将”数据模型“与”数据“双向绑定的思想做为核心，因此在View和Model之间没有联系，通过ViewModel
进行交互，而且Model和ViewModel之间的交互式双向的，因此视图的数据变化会同时修改数据源，而数据源数据的变化
会立即反应到View
11.px和em的区别
px表示像素，是绝对单位
em表示相对父元素的字体大小，是相对单位，由其他元素尺寸来决定的相对值
12.兼容：
13.JS哪些操作会造成内存泄漏
意外的全局变量引起的内存泄露
闭包引起的内存泄露
没有清理的DOM元素的引用
被遗忘的定时器或者回调
子元素存在引起的内存泄露
14.什么是闭包，为什么使用它
15.同源策略
同源策略是一个很重要的科学理念，它保证数据的安全性方面有重要意义。同源策略规定跨域之间的脚本是隔离的，
一个域的脚本不能访问和操作另一个的绝大部分属性和方法。
当两个域具有相同的协议，相同的端口，相同的host，那么就可以认为他们是相同的域。
同源策略还应该对一些特殊的情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中通过、
file协议打开的，如果脚本能通过file协议访问到硬盘上其他任意文件，就会出现安全隐患，目前IE8还有这样的隐患
16.添加、移除、移动、复制、创建、查找节点
createDocumentFragment() 创建一个DOM片段
createElement() 创建一个文本节点
createTextNode() 创建一个文本节点
appendChild() 添加
removeChild() 移除
replaceChild() 替换
insertBefore() 插入
getElementByTagName() 通过标签名称
getElementByName() 通过元素的name属性值
getElementById() 通过元素的ID，唯一性
17.浏览器是如何渲染页面的
1.解析HTML文件，创建DOM树（自上而下，遇到任何样式与脚本都会阻塞），外部样式不阻塞后续外部脚本的加载
2.解析css。
3.将css与DOM进行合并，构建渲染树
4.布局和绘制，重绘和重排
18.从输入url到显示页面都尽力了什么
1.首先，在浏览器输入url
2.浏览器西安查看浏览器缓存-系统缓存-路由器缓存，如果缓存中由，会直接在屏幕中显示页面内容；否则跳转下一步
3.发送http请求前，需要域名解析，(域名解析是互联网的一项核心服务，它做为可以将域名和IP地址相互映射的一个
分布式数据库，能够使人更方便的访问互联网，而不用记住IP地址)，解析获取响应的IP地址
4.浏览器向服务器发送TCP连接（TCP即传输协议）
5.连接成功后，浏览器向服务器发送http请求，请求数据包
6.服务器处理收到的请求，将数据返回到浏览器
7.浏览器收到http请求
8.读取页面内容，浏览器渲染摩羯悉HTML源码
9.生成DOM树、解析CSS样式，js交互
10.客户端和服务器交互
11.ajax查询
19.display:none和visibility:hidden区别
display：none是彻底消失，不再文档流中占位，浏览器不会解析该元素；
visibility：hidden是视觉上消失，可以理解为透明度为0的效果，浏览器会解析该元素
使用后者比前者性能上要好
20.JavaScript如何检测一个变量时String类型
typeOf(obj) === “string”
typeOf obj === “string”
obj.constructor === String
21.判断一个字符串中出现次数最多的字符，统计这个次数
22.$(document).ready()方法和window.onload有什么区别
window.onload方法时在网页中所有的元素完全加载到浏览器后才执行的
$(document).ready()方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数
23.get和post提交的区别
相同点：都是异步请求的方式来获取服务端的数据
不同点：参数传递的方式不同，get请求会将参数跟在URL后进行传递，post则是做为HTTP消息的实体内容
发送给服务器，这种传递对用户不可见
数据传输的大小不同，get方式传输的数据大小不能超过2kb，而post大得多
安全问题：GET方式请求的数据会被浏览器缓存起来，因此有安全问题
24.函数节流和函数防抖
函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
有一个需要频繁触发的函数，出于优化性能角度，在规定事件内，只让函数触发的第一次生效，后面不生效
函数防抖：一个需要频繁触发的函数，在规定事件内，只让最后一次生效，前面的不生效

VUE面试题

1.vue的优点：
低耦合：视图可以独立于Model的变化和修改，一个ViewModel可以绑定到不同的View上。
当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
复用性：可以把一些视图逻辑放在一个ViewModel里面，让很多View宠用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计。
可测试：界面是比较难测试的，而现在测试可以针对ViewModel来写
2.组件传值：
父子组件传值：
父组件通过标签上面定义传值，子组件通过props方法接收数据
子组件向父组件传值：
子组件通过emit方法传递参数3.路由跳转：声明式（router−link标签跳转）编程式（通过route的push/replace方法实现js跳转）4.vue.cli怎样使用自定义组件？有遇到过哪些问题？定义组件−>通过import引入−>注入到components属性中−>使用5.vue如何实现按需加载配合webpack设置webpack中提供了require.ensure()来实现按需加载，以前引入路由时通过import这样的方式引入，改为const定义的方式进行引入不进行页面按需加载的引入方式：importhomefrom’xxx‘进行页面按需加载的引入方式：consthome=r=>require.ensure(r(require(′xxx′)))6.核心数据驱动和组件化只要更新状态数据，界面就会自动发生变化7.修饰符按键修饰符:.delete系统修饰符:.ctrl.alt.shift.meta鼠标按键修饰符:.left.right.middle其他修饰符:.number转换为number.trim去除前后空格.lazy：v−model在input事件中同步输入框的值于数据，添加胡转变为在change事件中同步8.说出4种指令v−model（实现双向绑定），v−if（判断是否隐藏），v−for（遍历数据），v−bind（绑定属性）v−for的优先级比v−if高9.子组件调用父组件的方法1.父组件向子组件通信2.子组件向父组件通信3.隔代组件间通信4.兄弟组件间通信实现通信方式：1.props2.vue自定义事件3.消息订阅与发布4.vuex5.slot方式一：props通过属性实现父向子组件通信通过函数实现子向父组件通信方式二：vue自定义事件子组件通过emit方法传递参数 3.路由跳转：声明式（router-link标签跳转）编程式（通过route的push/replace方法实现js跳转） 4.vue.cli怎样使用自定义组件？有遇到过哪些问题？定义组件->通过import引入->注入到components属性中->使用 5.vue如何实现按需加载配合webpack设置 webpack中提供了require.ensure()来实现按需加载，以前引入路由时通过import 这样的方式引入，改为const定义的方式进行引入不进行页面按需加载的引入方式：import home from ’xxx‘ 进行页面按需加载的引入方式：const home = r => require.ensure(r(require('xxx'))) 6.核心数据驱动和组件化只要更新状态数据，界面就会自动发生变化 7.修饰符按键修饰符:.delete 系统修饰符:.ctrl .alt .shift .meta 鼠标按键修饰符:.left .right .middle 其他修饰符:.number转换为number .trim去除前后空格 .lazy：v-model在input事件中同步输入框的值于数据，添加胡转变为在change事件中同步 8.说出4种指令 v-model（实现双向绑定），v-if（判断是否隐藏），v-for（遍历数据），v-bind（绑定属性） v-for的优先级比v-if高 9.子组件调用父组件的方法 1.父组件向子组件通信 2.子组件向父组件通信 3.隔代组件间通信 4.兄弟组件间通信实现通信方式：1.props 2.vue自定义事件 3.消息订阅与发布 4.vuex 5.slot 方式一：props 通过属性实现父向子组件通信通过函数实现子向父组件通信方式二：vue自定义事件子组件通过emit方法传递参数3.路由跳转：声明式（router−link标签跳转）编程式（通过route的push/replace方法实现js跳转）4.vue.cli怎样使用自定义组件？有遇到过哪些问题？定义组件−>通过import引入−>注入到components属性中−>使用5.vue如何实现按需加载配合webpack设置webpack中提供了require.ensure()来实现按需加载，以前引入路由时通过import这样的方式引入，改为const定义的方式进行引入不进行页面按需加载的引入方式：importhomefrom’xxx‘进行页面按需加载的引入方式：consthome=r=>require.ensure(r(require(′xxx′)))6.核心数据驱动和组件化只要更新状态数据，界面就会自动发生变化7.修饰符按键修饰符:.delete系统修饰符:.ctrl.alt.shift.meta鼠标按键修饰符:.left.right.middle其他修饰符:.number转换为number.trim去除前后空格.lazy：v−model在input事件中同步输入框的值于数据，添加胡转变为在change事件中同步8.说出4种指令v−model（实现双向绑定），v−if（判断是否隐藏），v−for（遍历数据），v−bind（绑定属性）v−for的优先级比v−if高9.子组件调用父组件的方法1.父组件向子组件通信2.子组件向父组件通信3.隔代组件间通信4.兄弟组件间通信实现通信方式：1.props2.vue自定义事件3.消息订阅与发布4.vuex5.slot方式一：props通过属性实现父向子组件通信通过函数实现子向父组件通信方式二：vue自定义事件子组件通过emit去分发事件
父组件使用子组件标签时绑定监听
方式三：需要引入消息订阅与发布的实现库，pubsub.js
订阅消息：PubSub.subscribe(‘msg’,function(msg,data))
发布消息：PubSub.publish(‘msg’,data)
方式四：vuex
集中式管理vue多组件共享状态数据的插件，对组件间关系没有限制
方式五：slot
专门同来实现父向子传递带数据的标签

vuex

1.vuex是什么？怎么使用？什么场景使用？
vue中管理状态的插件。
新建目录，引入Vue、Vuex，创建Store实例，export default暴露出去，在main.js引入store，注入。
2.vuex有哪几种属性
state：一个仓库，就是数据源存放的位置，对应一般Vue组件中的Data
mutation：直接操作state中的数据
action：类似于mutation，用来提交mutation，可以做一些异步操作
getter：
module：
3.css只在当前组件有用
style标签中加上scoped属性
4.keep-alive作用
被keep-alive包裹的组件除第一次外不会尽力创建与销毁，第一创建后就会缓存起来
包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染
5.v-el的作用是什么？
提供一个在页面上已存在的DOM元素做为Vue实例的挂载目标。可以是css选择器，
也可以是一个HTMLElement实例
6.Vue中使用插件的步骤
采用ES6的import…from…或CommonJS的require()方法引入插件
使用全局方法Vue.use(xxx)使用插件，可以传入一个选项对象
7.active-class是那个组件的属性？
vue-router的router-link组件
8.怎么定义vue-router的动态路由以及如何获取传过动态参数
定义path属性时，使用动态路径参数，以冒号开头
当匹配到路由时，参数值会被设置到this.router.params下9.vue−router有哪几种导航钩子全局：beforeEach后置：afterEach全局解析：beforeResolve路由独享：beforeEnter组件内部：beforeRouteUpdate10.生命周期相关问题beforecreate:可以在这加个loading事件，在加载实例时触发created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用mounted:挂载元素，获取到DOM节点updated:如果对数据统一处理，在这里写上相应函数beforeDestroy:可以做一个确认停止事件的确认框nextTick:更新数据后立即操作dom11.vue−loader是什么，用途？vue文件的一个加载器。js可以使用es6语法，style可以使用less或sass12.scss是什么？vue.cli安装使用步骤，有几大特性？css预处理器安装css−loader、node−loader、sass−loader−−−>在build目录找到webpack.base.config.js，extends属性中加一个拓展.scss−−−>同一个文件，配置一个module属性−−−>style标签上加上lang="scss"可以使用变量、混合、嵌套13.为什么使用key主要为了高效的更新虚拟DOM当有相同标签名的元素切换时，需要通过key特性设置唯一的值标记来区分，否则Vue为了效率只会替换相同标签内部的内容14.VNode是什么，虚拟DOM是什么Vue在页面上渲染的节点，及其子节点称为“虚拟节点(VirtualNode)”，简写为“VNode”。“虚拟DOM”是由Vue组件树建立起来的整个VNode树的称呼。15.router.params下 9.vue-router有哪几种导航钩子全局：beforeEach 后置：afterEach 全局解析：beforeResolve 路由独享：beforeEnter 组件内部：beforeRouteUpdate 10.生命周期相关问题 beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom 11.vue-loader是什么，用途？ vue文件的一个加载器。 js可以使用es6语法，style可以使用less或sass 12.scss是什么？vue.cli安装使用步骤，有几大特性？ css预处理器安装css-loader、node-loader、sass-loader ---> 在build目录找到webpack.base.config.js ，extends属性中加一个拓展.scss ---> 同一个文件，配置一个module属性 ---> style标签上加上lang="scss" 可以使用变量、混合、嵌套 13.为什么使用key 主要为了高效的更新虚拟DOM 当有相同标签名的元素切换时，需要通过key特性设置唯一的值标记来区分，否则Vue为了效率只会替换相同标签内部的内容 14.VNode是什么，虚拟DOM是什么 Vue在页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。 “虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。 15.router.params下9.vue−router有哪几种导航钩子全局：beforeEach后置：afterEach全局解析：beforeResolve路由独享：beforeEnter组件内部：beforeRouteUpdate10.生命周期相关问题beforecreate:可以在这加个loading事件，在加载实例时触发created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用mounted:挂载元素，获取到DOM节点updated:如果对数据统一处理，在这里写上相应函数beforeDestroy:可以做一个确认停止事件的确认框nextTick:更新数据后立即操作dom11.vue−loader是什么，用途？vue文件的一个加载器。js可以使用es6语法，style可以使用less或sass12.scss是什么？vue.cli安装使用步骤，有几大特性？css预处理器安装css−loader、node−loader、sass−loader−−−>在build目录找到webpack.base.config.js，extends属性中加一个拓展.scss−−−>同一个文件，配置一个module属性−−−>style标签上加上lang="scss"可以使用变量、混合、嵌套13.为什么使用key主要为了高效的更新虚拟DOM当有相同标签名的元素切换时，需要通过key特性设置唯一的值标记来区分，否则Vue为了效率只会替换相同标签内部的内容14.VNode是什么，虚拟DOM是什么Vue在页面上渲染的节点，及其子节点称为“虚拟节点(VirtualNode)”，简写为“VNode”。“虚拟DOM”是由Vue组件树建立起来的整个VNode树的称呼。15.router和$route的区别
$router为VueRouter的实例，是一个全局路由对象，包含路由跳转方法，钩子函数等
$route是路由信息对象，每一个路由都会有一个Route对象，是一个局部对象，包含path、
params、hash、query等路由信息参数
16.vue-router响应路由参数的变化
1.用watch监视
2.组件内的导航钩子beforeRouteUpdate
17.vue-router传参
1.使用params
只能使用name，不能使用path、参数不会显示在路径上、浏览器强制刷新参数会被清空
2.使用query
参数会显示在路径上，刷新不会清空、name可以使用path路径
18.不用vuex会带来什么问题
1.可维护性下降、修改数据需要维护三个地方
2.可读性下降，因为一个组件里的数据，看不出来从哪里来的
3.增大耦合，大量的上传派发，会让耦合性大大增加

协议

http：超文本传输协议，基于TCP/IP传输协议
特点：服务器不能主动联系客户端，只能由客户端发起。它的被动性预示了在完成双向通信时需要不停的连接或连接一直打开，
这就需要服务器快速的处理速度或高并发的能力，是非常消耗资源的
https：身披SSL外壳的HTTP
特点：基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护
webScoket：HTML5的一个新协议，它允许服务端向客户端传递信息，实现浏览器和客户端双向通信
特点：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，
属于服务器推送技术的一种。
1.与HTTP协议有着良好的兼容性，并且握手采用HTTP协议，因此不容易屏蔽，能通过各种HTTP代理服务器
2.建立在TCP协议基础之上，和HTTP协议属于同应用层
3.数据格式比较轻量，性能开销小，通信高效
4.没有同源限制，客户端可以与任意服务器通信
5.协议标识符为ws，加密则为wss
scoket.io最核心的两个api：emit、on

uni-app

1.是使用vue.js开发跨平台应用的前端框架。
2.使用vue.js语法

css

flex布局新老版本水平垂直居中
新版本
display: flex
justify-content: center
align-items: center
老版本
display: -webkit-box
-webkit-box-pack: center
-webkit-box-align: center
rem适配

跨域

1.什么是跨域？解决方法有哪些？
同源策略：浏览器的安全策略，协议名、域名、端口号必须完全一致
跨域：违背同源策略
解决跨域：jsonp、cors、服务器代理
JSONP跨域：
原理：利用script的特性来请求数据
限制：只能使用GET请求
步骤：
1.创建script标签
var script = document.createElement(‘script’)
2.设置回调函数
function getData (data) {console.log(data)}
3.设置script标签的src属性，设置请求地址
script.src = ‘http://localhost:xxx’
4.让script生效
document.body.appendChild(script)

对比

小程序与mpvue
mpvue就是在小程序中使用vue.js
可以使用vue-router插件，组件跳转
可以使用vuex插件，方便状态管理
可以继续使用原生小程序的一些组件
包含原生小程序页面中的生命周期
Vue与React
相同点
1.都有组件化开发和虚拟DOM
2.都支持props进行父子组件间数据通信
3.都支持数据驱动视图，不直接操作DOM，更新状态数据界面就会自动更新
4.都支持服务器端渲染
不同点
数据绑定：vue实现数据的双向数据绑定，react数据流动是单向的
组件写法不同，React推荐使用JSX；Vue推荐单文件组件格式，即html、js、css写进同一个文件
React严格上值针对MVC的view层，Vue则是MVVM模式