1. Es6新特性
（1）var,let,const的区别
a.var声明的变量属于函数作用域，let，const属于块级作用域
b.var存在变量提升（变量在声明之前可以使用，为undefined），let，const没有
c.var变量可以重复声明，而在同一块级作用域内，let不可以重复声明，const不可以修改
（2）箭头函数
（3）解构赋值 let {a,b} = {a:1,b:2}
（4）模板字符串 `${a}是个笨蛋`
（5）扩展运算符（合并对象） let obj = {…obj1} 等同于 let obj = Object.assign({},obj1)
2. es6的class的理解
a. es6之前不存在类的概念，用new来创建构造函数，现在class类本质就是一个函数，自身指向的就是构造函数，默认有个constructor方法，set，get方法
b.继承：通过extends关键字来实现继承，通过super来拓展父类构造器或方法
3.Promise的理解
(1)Promise就是一个构造函数
(2)Promise.all([fn1(),fun2()]).then((res) => console.log(res)) 两个异步函数全部执行完成之后的回调
(3)function runAsync() {
return new Promise((resolve, reject) => {
const number = 3
if (number > 5) {
resolve('随便什么数据')
} else {
reject(new Error('数字太小了'))
}
})
}
runAsync().then((data) => {
console.log(data)
}).catch((data) => {
console.log(data)
})
4.SEO搜索引擎优化
a.减少http请求
b.使用懒加载和图片预加载
c.尽量使用cdn资源
d.图片尽量用雪碧图
e.尽量压缩资源
f.Script放在body后面，防止script堵塞渲染
g.代码优化
5.Get和post请求的异同
同：本质都是tcp连接，并无区别
异：由于http规定，以及浏览器/服务器限制，导致在应用过程中会有所不同
a.get用来获取数据，post用来提交数据
b.get参数拼接在url上，post放在http请求体中
c.get不安全，post相对安全
d.get的参数限制是1024kb，post不做限制，可以达到2M
e.get请求会被浏览器缓存，post没有，除非手动设置缓存
6.浏览器渲染页面的过程
a.根据HTML解析出DOM树。构建DOM树期间，遇到js阻塞构建过程，优先加载js文件，加载完毕再继续构建。
b.根据CSS解析出CSS规则树。
c.结合DOM树和CSS规则树，生成渲染树（Render Tree）
d.根据渲染树计算每一个节点的信息。
e.根据计算好的信息对页面重绘（repaint）与重排（reflow）。页面渲染完成后，若js操作DOM节点，根据操作动作大小，对页面重绘。
7.浏览器输入地址之后，到渲染页面发生了什么
a.将域名进行dns解析，得出ip地址
b.通过ip找到服务器地址
c.Tcp三次握手，建立连接
d.浏览器发送http请求（请求行，请求头，请求体），等待服务器响应
e.服务器处理请求，并返回http报文（响应行，响应头部，响应主体）
f.浏览器收到响应，得到html代码
g.渲染页面
8.HTTP状态码的含义
a.1XX 指示信息，表示请求已接收，继续处理
b.2XX 成功，表示请求已被成功接收，处理
c.3XX 重定项
d.4XX 客户端报错
e.5XX 服务端报错
9.Cookie, LocalStorage, SessionStorage的异同
a.数据生命周期不同：cookie可以设置失效时间，localStorage永久保存，除非手动清除，sessionStorage随着浏览器关闭失效
b.与服务端通信不同：cookie是浏览器和服务器之间通信，localStorage和sessionStorage仅在浏览器保存
c.存储数据大小不同：cookie是4K, localStorage和sessionStorage能达到5MB
10.同源策略影响范围（不同源的影响）
a.Cookie，localStorage无法读取
b.Dom无法获取
c.Ajax请求无法发送
允许跨域的三个标签<img src=”XXX” /> <link href=”XXX” /> <script src=”XXX”>
11.跨域的几种处理方式
a.Jsonp 主要利用script标签没有跨域限制的漏洞
b.cors跨域（php设置Access-Control-Allow-Origin: ‘*’）
c.Nginx正向/反向代理(服务器之间是没有跨域的)
d.postMessage() （HTML5中window属性,通过异步方式实现跨文本文档，多窗口，跨域消息传递）
e.webSocket
12.svg和canvas的差异
a.svg有独立的dom节点，可以绑定事件；canvas是一整张画布
b.svg可以任意放大缩小元素，不会失真和锯齿；canvas就像一张图片一样，放大会失真和锯齿
13.移动端1px被渲染成2px的处理办法
a.Meta中viewport属性initial-scale = 1，设计稿rem缩小一倍transform:scale(0.5)
b.Meta中viewport属性initial-scale = 0.5，设计稿rem按标准走
14.各类浏览器内核
a.IE: trident
b.FireFox: gecko
c.Safria: webkit
d.Opera: blink
e.Chorme: blink
15.渐进增强和优雅降级的不同之处
a.渐进增强：低版本浏览器保证基本功能，再针对高版本浏览器追求更好的交互和用户体验
b.优雅降级：高版本浏览器保证完整功能，再针对低版本浏览器进行兼容
16.目前知道的哪些图片格式
png，jpg，jpeg，gif，svg，webp(尺寸是jpeg大小的2/3)
17.一次刷新页面，js请求会有哪些缓存处理
dns，cdn，浏览器，服务器缓存
18.http请求报文和响应报文结构
（1）请求行/响应行
（2）请求头/响应头
（3）空行
（4）消息主体（请求体/响应体）
19.形成BFC的条件
a.float不是none
b.position 是absolute或fixed
c.overflow 不是visible
d.display 是flex inline-block等
20.BFC的作用
a.清除浮动
b.避免margin重叠
21.Margin重叠值的计算
a.水平边距永远不会重叠
b.两个正值，取较大；一正一负相加；两个负值，取绝对值较大，再加负号
21.清浮动的几种方式
a.父元素设置overflow:hidden
b.父元素设置伪类after div::after {content: ‘’;display: block;clear:both}
c.给父元素设置一个高度
22.介绍一下盒模型
a.有两种盒模型：标准盒模型和IE盒模型
b.IE：border+padding+content; 标准：content
c.通过给设置box-sizing:boder-box(IE)/content-box(W3C)
23.Css3中单冒号和双冒号的区别
a.单冒号：伪类，样式选择器
b.双冒号：伪元素
24.手写动画，最小间隔时间是多少
多数显示器默认频率是60HZ,即1s刷新60次，所以理论上间隔是1/60*1000ms=16.7ms
25.Css3动画
（1）transition:定义元素的变化过程（property,duration,timing-function,delay）
（2）transform:定义元素的变化结果 (scale,translate,skew,rotate)
（3）animation:定义动画的每一帧(@keyframe)有什么效果
26.rgba和opacity的区别
设置rgba透明度的元素，其子元素不会继承透明效果
27.未知元素宽高水平垂直居中
（1）子元素{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
(2)父元素 {
display:flex;
align-items: center;
justify-content: center;
}
(3)父元素{display:table}
子元素{
display:table-cell;
vertical-align: middle;
text-align:center；
}
28.已知宽高元素水平垂直居中
（4）{
width:100px;
height:100px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0
}
(5) {
width:100px;
height:100px;
position: absolute;
left: 50%
top: 50%
margin-left: 50px
margin-top: 50px
}
29.px,em,rem的关系
1em=1rem=16px
Px是具体的像素，em是相对于父元素的大小，rem是相对于根元素的大小
30.宏任务和微任务的执行顺序
（1）浏览器是多线程，但是js是单线程，分为同步和异步
（2）主线程-微任务（promise）-宏任务（setTimeOut，setInterval，ajax）
31.闭包的理解
(1)能够读取其他函数内部变量的函数，也就是函数套函数
(2)避免全局污染，但是容易造成内存泄露
(3)在退出函数之前，将不使用的局部变量全部删除
32.事件有哪些阶段？事件代理的理解
(1) 捕获阶段
(2) 目标阶段
(3) 冒泡阶段
(4) 事件代理就是事件绑定到父元素上，使代码更简洁，节省内存
(5) addEventListener第三个参数true为捕获阶段，false为冒泡阶段（也是默认方式）
33.设计模式
发布订阅模式，中介者模式，代理模式，工厂模式，单例模式，装饰者模式，策略模式…等15种
34.js数据类型
(1)8种数据类型：Number，String，Boolean，Undefined，Null，Object，Symbol（es6），Biglnt（chrome 67）
(2)5种基本类型：Number，String，Boolean，Undefined，Null
(3)Object包含3种引用类型：Date，Array，Function
基本数据类型存在栈上，引用数据类型存在堆上
35.typeof对应的值
String-string Number-number NaN-number Boolean-boolean Undefined-undefined Null-object Object-function
36.几种遍历方式的差异
1.map 有返回值，生成一个新的数组
2.filter 有返回值，对原数组进行过滤
3.some 有返回值，有一个满足就返回true，否则false
4.every 有返回值，每一个都满足才返回true，否则false
5.forEach 没有返回值
6.for in 没有返回值，主要遍历对象，遍历数组效率低，因为索引没有顺序
7.for 最普通的for循环了
37.数组常见的一些方法
1.Unshift() push() 增加
2.Shift() pop() 删除
3.Array.isArray() 是否为数组
4.Concat() 拼接多个数组
5.Sort() 排序
6.Reverse() 反转数组
7.Splice() 添加删除元素
8.Slice() 截取数组[ )9.indexOf() 查找第一次出现的位置10.lastIndexof（） 查找最后一次出现的位置11.Join(‘,’) 数组转为字符串,用逗号拼接12.Split(‘&’) 将要字符串按照&分割成数组38.深拷贝和浅拷贝
（1）深拷贝：JSON.parse(JSON.stringify()),只能序列化可枚举的自有属性
（2）深拷贝：Object.assign()对1级属性的拷贝是深拷贝，2级属性的拷贝是浅拷贝
（3）深拷贝：lodash._cloneDeep()
（4）递归方式也可实现深拷贝
39.Vue双向数据绑定原理
Vue是采用数据劫持与发布订阅的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调
40.Js常用Math方法
(1)Math.random() 生成（0,1)之间的随机数
(2)Math.round(num) 四舍五入后的整数
(3)Math.ceil(num) 向上四舍五入取整
(4)Math.floor(num) 向上四舍五入取整
41.Js如何判断是否为数组
(1)Arr instanceof Arrary
(2)arr.constructor == Arrary
(3)Arrary.isArrary(arr)
42.JS动画和css动画的区别和实现
(1)css3动画：代码相对简单，浏览器会对其有优化，性能稍微好一点，但是不够灵活，兼容性不好
(2)js动画：控制能力好，可以单帧的控制变化，兼容性好，对于复杂动画比较靠谱，如果是小的动效，建议使用css3
43.数组去重方法总结
(1)Es6的set去重 Array.from(new Set(arr))
(2)双层循环，外层循环元素，内层循环比较元素，值相同，使用splice删除元素
(3)新建新的空数组，for循环原数组，indexOf判断新数组是否存在当前元素，有就跳过，没有就push到新数组
(4)同理（3）用includes判断
(5)filter去重，使用indexOf获取当前数组下标，对比数组内同一值下标进行去重筛选
(6)reduce去重，如果第二个参数包含在第一个里面就返回第一个参数，反之，concat拼接前后两个参数
44.怎么判断两个对象相等
JSON.stringfy(obj1) == JSON.Stringfy(obj2)
45.防抖（dubounce）和节流（throttle）
(1)防抖：事件触发n秒之后，再执行函数，如果n秒内又重新触发，就按照最后一次触发事件后n秒之后执行一次，关注一定时间内连续触发的事件只执行最后一次
场景：连续事件只需要触发一次 a.搜索框输入完成后才执行请求b.鼠标的mousemove和mouseover c.窗口大小resize，防止重复渲染
(2)节流：不管触发多少次，每n秒只执行一次，关注一定时间内只执行一次
场景：间隔一段时间执行一次回调 a.滚动加载 b.搜索联想功能 c.高频点击提交，防止重复提交
46.冒泡排序法
for(var i =0;i<arr.length-1;i++) {
for(var j=0;j<arr.length-i-1;j++) {
if (arr[j] > arr[j+1]) {
const str = arr[j]
arr[j] = arr[j+1]
arr[j+1] = str
}
}
}
47.Js中内存可能泄露的情况
(1)闭包的使用
(2)定时器未清除
(3)减少全局变量；注意程序逻辑，避免死循环；
48.call，apply，bind的区别
都是为了改变this指向，作用一样，只是传参方式不同
fn.call(obj,1,2) fn.apply(obj,[1,2]) fn.bind(obj,1,2)()
49.箭头函数与普通函数的区别
(1)箭头函数是匿名函数，不能作为构造函数，不能使用new
(2)箭头函数不绑定this，永远指向其上下文的this，普通函数指向调用他的对象
(3)箭头函数没有原型属性
50.CDN
(1)静态资源尽量使用cdn加载，由于浏览器对单个域名有并发请求上限，可以考虑使用多个cdn域名
(2)Cdn域名要与主站不同，否则每次请求都会带上主站的cookie
51.执行上下文
全局执行上下文，函数执行上下文，eval执行上下文
52.常见的SPA首屏优化方式
a.减少入口文件体积，可以使用动态路由，待路由被请求的时候单独打包路由，使得入口文件变小，加载速度加快
b.图片资源压缩
c.UI框架按需加载，使用哪个组件就引用哪个组件
d.静态资源本地缓存，前端合理使用localstorage,后端返回资源使用http缓存
53.对SPA单页面的理解，以及优缺点
概念：SAP仅在页面初始化的时候加载相应的html，css，js，一旦页面加载完成，不会因为用户的操作重新渲染和跳转，而是使用路由机制实现html内容的转换
优点：用户体验好；减轻了服务器的压力；前后端职责分明，架构清晰
缺点：初次加载耗时长；都在一个页面，没法使用浏览器的前进后退功能；所有内容都在一个页面动态替换，不利于seo检索
54.VUE的优点
a.轻量级的框架，大小只有几十kb
b.简单易学，国人开发，中文文档
c.双向数据绑定
d.组件化
e.视图，数据，结构分离
f.虚拟dom，运行速度更快
5.Vue3的响应式和vue2的区别
Vue响应式系统的核心依然是对数据进行劫持，只是vue3使用的是proxy,vue2使用的是object.defineProperty
(1)提升性能：object.defineProperty是通过层层递归劫持数据，如果对象路径比较深则会影响性能，而Proxy可以在用到数据的时候再对下一层属性进行劫持，也就是按需实现响应式，减少性能消耗
(2)Proxy可以对整个对象劫持，而object.defineProperty只能对对象的属性劫持，对于对象上的方法，或者新增，删除的属性无能为力
(3)Vue2对数组的长度变化，数组的插入删除元素无法进行响应式处理，而vue3能
(4)object.defineProperty兼容性好，支持IE9及以上
56.vue组件里面的data为什么是一个函数？而new vue实例里，data可以是一个对象？
因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的，这样会造成组件之间数据的相互影响，使用函数后，函数是有作用域的，可以保证每个组件的数据不会相互影响
57.vue中的data属性可以和methods中的方法重名吗？
可以，但是data属性会覆盖methods方法名，调试台会报错，但是不影响执行
58.vue中created和mounted的区别
created阶段，实例已经初始化，但是还没有挂载到el上，无法获取对应的节点，但是可以获取data和methods中的数据
mounted阶段，已经成功挂载，可以获取节点
59.虚拟DOM中key的作用
简单来说就是追踪列表中哪些元素被添加，被修改，被移除的辅助标志，使用key能减少重绘重排，节省浏览器性能开销
60.Vue组件通信方式
(1)父传子 props，
(2)子传父 事件形式：this.$emit()
(3)父传子孙 provide，inject
(4)Vuex
(5)Ref
(6)localStroage和sessionStroage
61.router和route的区别
router是vueRouter的实例，，相当于一个全局的路由器对象，包含 很多属性和子对象，还可以使this.$router.push()跳转
route是正在跳转的路由对象，可以从route里面获取hash，query，path，name等属性方法，如this.$route.query
62.vue-router的几种钩子函数
(1)全局路由：前置守卫（beforeEach），一定要使用next()，后置钩子（afterEach）
(2)路由独享的守卫：beforeEnter，写在路由配置里面, 一定要使用next()
(3)组件内的守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave, 一定要使用next()
63.Vue-router路由跳转方式
(1)声明式（标签跳转） <router-link :to="{ name:'home'}"></router-link>
<router-link :to="{ path:'/home'}"></router-link>
(2)编程式（js跳转） this.$router.push({name: 'home'}) this.$router.push({path: '/home'})
64.Vue使用query和params传参的区别
（1）query参数在地址栏
（2）params只支持name跳转，参数不在地址栏，刷新页面之后参数丢失
65.vuex的使用介绍
(1)state:提供了唯一的公共数据源，所有共享数据统一放在这里处理
获取：一般放在computed里面， a. this.$store.state.a b. …mapState([‘a’])
(2)mutations: 唯一能够修改state里面数据，但是必须为同步函数
修改方式：a.this.$store.commit() b.…mapMutations([‘addFunction’])
(3)action:如果通过异步操作变更数据，必须通过action，而不是mutations，但是action最终还是通过触发mutations修改数据
修改方式：a.this.$store.dispatch() b.…mapAction([‘addFunction’])
(4)getter:对于state中的数据进行加工处理形成新的数据，类似computed，返回值会被缓存起来
获取：一般放在computed里面， a. this.$store.getters.a b. …mapGetters([‘a’])
(5)modules:项目特别复杂的时候，可以让每个模块拥有自己的state,getters,action,mutation
66.vue3的新特性
速度更快，体积更小，更容易维护，更好的typeScript支持，更接近原生，支持多个根节点
（1）新增三个组件：Fragment支持多个根节点,Suspense可以在组件的渲染之前的等待时间显示指定内容，Teleport可以让子组件在视觉上跳出父组件
（2）支持tree-shaking,可以在打包时去掉无用代码，使得打包体积更小
（3）用proxy代替object.defineProperty重构响应式系统
（4）Vue3用ts写的，所以对ts的支持更好
（5）不兼容IE11
（6）重构虚拟dom，在编译时会将数据缓存，将slot编译为lazy函数，提速200%
（7）Vue2：v-for > v-if Vue3：v-if > v-for
67.hash模式和history模式的差异
(1)hash-即地址栏#/hello这一串值，改变hash不会重新加载页面
(2)history模式下，前端的url必须与实际向后端发送的请求url保持一致
68.vue父组件怎么监听子组件的生命周期
在父组件下的子组件上@hook: mounted="doSomething"
69.原型和原型链
(1)构造函数是使用new关键字的函数，用来创建对象，所有函数都是function的实例
(2)原型对象是用来存放实例对象的公有属性和公有方法的一个公共对象，所有原型对象都是object（）的实例
(3)原型链又叫隐士原型链，是由_proto_属性串联起来，原型链的尽头是Object.prototype
70.怎么解决白屏问题
(1)Loading
(2)骨架屏
71.http和https协议的区别
(1)https需要CA证书，费用较高；http不需要
(2)https使用具有安全性的SSL加密传输协议；http使用超文本传输协议，信息是明文传输
(3)使用不同的连接方式，端口不同：https是443；http是80
72.为什么0.1+0.2=0.30000000004？
大多数十进制无法正确的转换为二进制
