1.websocket是什么？
详解链接地址：https://blog.csdn.net/m0_64346035/article/details/124910497
websocket是一种通信协议，可在单个TCP连接上进行全双工通信。webSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在websocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，并进行双向数据传输。
首先，要明白websocket是一种通信协议，区别于HTTP协议，HTTP协议只能实现客户端请求，服务端响应的这种单项通信。
而WebSocket可以实现客户端与服务端的双向通讯，说白了，最大也是最明显的区别就是可以做到服务端主动将消息推送给客户端
其余的特点有：
1.握手阶段采用HTTP协议
2.数据格式轻量，性能开销小。客户端与服务端进行数据交换时，服务端到客户端的数据包头只有2到10字节，客户端到服务端需要加上另外4字节的掩码，HTTP每次都需要携带完整头部。
3.更好的二进制支持，可以发送文本，和二进制数据
4.没有同源限制，客户端可以与任意服务器通信
5.协议标识符是ws (如果是加密，则是wss),请求的地址就是后端支持websocket的API
tcp协议的三次握手，为什么是三次握手，是为了在不可靠的信道上建立可靠的链接
tcp协议的四次挥手
2.undefined和null的区别？
null表示“没有对象”，即该处不应该有值，典型的用户
1.作为函数的参数，表示该函数的参数不是对象
2.作为对象原型链的终点
Object.getPrototypeof(Object.prototype) ///null
undefined表示“缺少值”，就是此处应该有一个值，但是还没有定义。典型的用法
1.变量被声明了，但是没有赋值，就等于undefined
2.调用函数时，应该提供的参数没有提供，该参数就是undefined
3.对象没有赋值的 属性，该属性的值为undefined
4.函数没有返回值时，默认返回undefined
3.ES6有哪些新特性？
4.let var const 三者的区别？
ES5引入两个新关键词:let和const,他们在js中提供了块作用域变量，在这之前js只有全局作用域和函数作用域
1.通过var声明的变量没有块作用域，在块{}内声明的变量可以从外面直接访问
{var x = 10}
///此处可以直接访问
2.使用var在块中重新声明变量也将重新声明块外的变量
var x = 10;
//此处x为10
{
var x = 6; //此处x为6
}
//此处x为6
5.await async的区别？
6.vuex是什么？
7.vue Route有什么作用？
8.vue的计算属性computed跟watch的区别？
9.可以在computed里面写异步请求数据吗？
10.vue 的生命周期函数有哪些？
11.beforeach是什么？有什么用？
12.vue的导航守卫？
13.$nexttick是做什么的？
14.cookie locastorage session 三者区别
1.cookie始终在同源的http请求中携带，即使不需要，cookie在浏览器和服务器中来回传递。
而localStorage和sessionStora仅仅在本地存储，不会和服务器通信，也不会自动把数据发送给服务器。
2.存储大小不同，cookie为4kb左右；localStorage， sessionStorage可以达到5M
3.数据有效期不同，sessionStorage仅在同源窗口中有效，关闭窗口就消失了，cookie可以设置过期时间，localStorage长期有效
localStorage， sessionStorage有现成的API， cookie需要程序员手动封装
15.vue的本地存储？
16.promise，await 跟后台是怎么交互的？
17.疑问为什么vm.fullName = "John Doe"时，firstName和lastName不变？？？？
image.png
18.==与===的区别？
==在比较两个不同的类型的值的时候会发生隐式强制转换，会将 其中的一或两个值变为同一种类型而进行比较
1、字符串与数字之间的比较
var a = 43,b="43";
a==b;//true
a===b//false
2.其他类型和布尔型之间的比较:通过隐士的强制类型转换type(x),把布尔型转换为数字，把字符串型转换为数字
var c="42";
var b= true;
c==b//true
c===b//false
3.null 和undefined 之间的比较
var a = null,b=undefined;
a==b//true
a===b//false
4.对象和非对象之间的比较
1. 如果type(x)是字符串或者数字，type(y)是对象，则返回x==ToPrimitive(y)的结果
2.如果type(x)是对象，type(y)是字符串或数字，则返回ToPrimitive(y)==y 的结果
var a=42,v =[42];
a==v;//true
a===v//false
5.假值得相等比较：null，undefined,+0,-0,NAN,false,""
"0" == null; //false
"0" == undefined; //false
"0" == false; //true
"0" == NAN; //false
"0" == 0; //true
"0" == ""; //false
false == null; //false
false == undefined; //false
false == NAN; //false
false == 0; //true
false == ""; //true
false == []; //true
false == {}; //false
"" == null; //false
"" == undefined; //false
"" == NAN; //false
"" == 0; //true
"" == []; //true
"" == {}; //false
0 == null; //false
0 == undefined; //false
0 == NAN; //false
0 == []; //true
0 == {}; //false
19.get请求与post请求的区别？
20.严格模式？
21.闭包的概念？
22.url的请求的过程？
23.冒泡事件？DOM的事件流
24.创建对象的方法有哪些？
25.typeOf()返回的数据类型有哪些？
26.http协议，header的失效时间怎么设置？
27.页面的优化方法有哪些？
28.vue页面传值有哪些? prop emit vuex eventBus
29.Router的模式有哪些？
30.浅拷贝与深拷贝的区别？
1.浅拷贝：只是复制了原数据的内存地址，相当于两个数据指针指向了相同的地址，其中任一数据元素发生改变，会影响另外一个
var arr = [0, 1, 2];
var arrB;
//把arr赋值给arrB
arrB = arr;
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);
2：深拷贝：两个数据指向了不同的地址，数据元素发生改变时不会相互影响
注：深拷贝使用时，一定要弄清楚对深拷贝的要求程度，时仅深拷贝第一层级的对象属性或数组元素，还是递归拷贝所有层级的对象属性和数组元素?
var arr = [1, 2, 3, 4];
function copy(arr){
var newArr = [];
for(var i=0;i<arr.length;i++){
newArr.push(arr[i]);
}
return newArr;
}
var arrB = copy(arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
24.如何快速实现深拷贝？
JOSN.parse(Json.stringfy())
25.怎么解决跨域？
26.清除浮动的方法有哪些？
1.在父标签结尾处添加overflow:hidden;
2.在标签结尾处加空div标签 clear:both
3.父级div定义 伪类:after 和 zoom
27.js 有哪些数据类型？用typeOf()能比较出来数组跟对象吗？
number string boolean undefined null,
28.父子组件生命周期加载的顺序？
29.vue懒加载？
30.路由的钩子函数？
31.axios请求，响应拦截？
32.如何给带有abc class类名设置字体颜色为红色？
33.ES6是什么？
ES6是ECMAScript6，是最新版本JavaScript语言的可以用来编写复杂的大型应用程序，他的目标是使得JavaScript语言成为企业级开发语言标准。
ECMAScript 定义了：
语言语法：语法解析规则，关键字，语句，声明，运算符等。
类型：布尔型，数字，字符串，对象等
原型和继承
内建对象和函数的标准库：JSON,Math,数组方法，对象自省方法等
34.什么是虚拟DOM?
用JS模拟DOM结构
35.什么是vuex？
36.JS中的基本类型和引用类型
1.基本类型：number、boolean、string、undefined、 null
2.引用类型：array、object、function、regexp…
37.js的循环机制？
38.js是一种单线程语言？
39.ts泛型？
40.flex布局？
41.setInterval是3秒执行一次，里面的promise执行完毕是4-5秒，怎么操作，每次等到promisez执行完毕后再执行定时器？(递归)
this.timer = setInterval(function(){
clearSetInterval(this.timer);
//4-5秒执行完毕，做每次都执行完promise后再调用定时器
promise().then(res=>{
this.timer})
},3000)
42.哪些动作会引起回流?
回流是指浏览器为了重新渲染部分或者全部的文档，重新计算文档中的元素位置和几何构造的过程
以下操作会引起回流:
1.改变窗口大小，
2.font-size大小改变
3.input输入文字会导致
4.激活css伪类(:hover)
5.操作class属性，
6.新增或者减少
7.offset相关属性计算
8.增加或者移除样式表
43.怎么实现http的长连接?
44.js的节流跟防抖动？
防抖：在一段时间内允许多次触发函数，但是只在最后一次有效（执行）
做法：每次触发函数清除掉原来的定时器，重新开始计时。
如果在规定时间内不再触发函数，则执行，否则，清除掉之前的定时器，重新计时。
<!-- 防抖：防抖和节流不同点在于，函数在一段时间内可以多次调用，尽仅在最后一次调用有效 -->
<!-- 每一次的点击都要清除掉之前的定时器，重新定时 -->
<input type="text">
<button>提交</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', debounce(submit, 2000));
function submit() {
console.log('点击了');
}
// 为submit函数添加防抖
function debounce(func, delay) {
var timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, arguments);
}, delay)
}
}
</script>
</body>
节流：在一段时间内，只能触发一次函数。
做法：触发函数时判断是否到达了指定时间，如果到达了指定时间，执行；否则不执行弹出警告
<input type="text">
<button>提交</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', throttle(submit, 2000));
function thorttle(func,delay){ //传入需要节流的函数，延迟时间
var last = 0; // 上一次触发的时间
return function(){
var now = Date.now(); //获取当前时间
if(now >= delay + last){
//当前时间已经符合再次触发条件了
func(this,arguments);
// console.log(this); //this指向window
last = now; //当前的时间就变为了上次的
}else{
console.log('时间未到');
}
}
}
</script>
<body>
<input type="text">
<button>提交</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', throttle(submit, 2000));
function thorttle(func, delay) {
//设置一个空的定时器
var timer = null;
return function () {
if (!timer) {
// 如果定时间为空，执行操作
func.apply(this, arguments);
// 设置定时器，并且在delays后定时器变为空时，可再次操作
timer = setTimeout(() => {
timer = null;
}, delay);
} else {
console.log('时间未到');
}
}
}
</script>
45.vue的自定义指令？
46.父组件，子组件的生命周期执行顺序？
47.map和for...earch的区别？
48.pop,push返回什么?
49.提交表单有哪些方式?
submit 按钮绑定click事件
50.generate函数和async区别
Generator函数时ES2015提供的异步解决方案，与普通函数有很大不同；
1.在function关键字后面跟一个* 号
2.在函数体内使用yeild表达式作为一个状态；
3.generator函数返回一个遍历器，可通过for...of遍历每个状态
4.用法：执行generator并不立即执行，返回一个遍历器，遍历器通过调用next(),throw（)或者return()执行下一个状态
5.generator可以在执行过程中多次返回，它看上去就像一个可以记住状态的函数
async 函数时ES2017提供的异步函数语法，是generator的语法糖，但是用法很不一样
1.在fucntion关键字前面加一个async
2.函数体内部使用await表达式
3.async 返回一个promise对象
4.用法:执行async函数会立即执行，和普通函数一样，但是返回一个promise对象
51.首屏优化？
52.vue项目如何按需引入element-ui？
54.vue中的宏任务和微任务？
55.vue中的动画用到了哪些?
transition animation
56.vue的nexttick应用原理?
57.vue的自定义指令?
58.vue的keep-alive？
缓存组件状态，在app.vue中添加<keep-alive></keep-alive>
作用:避免多次重复渲染降低性能
常用知识点:
1.inclued - 字符串或正则表达式。只有名称匹配的组件会被缓存
2.exclued - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
3.max - 数字，最多可以缓存多少组件实例。
4.结合Router,缓存部分页面
$route.meta.keepAlive选项
59.vue的插槽？
60.http和https有什么区别？
https是http的安全版本，叫超文本安全传输，https是有加密传输协议的通道，
并且SSL提供了安全加密基础，https主要是用于http的传输，并且在HTTP与TCP之间有一个特殊的加密/身份验证。
http是一种普通的传输协议，在互联网上，所有所有的文件都要遵守这个HTTP协议，同时超文本也是http传输的基本部分，实现客户端和服务器的相互强求
1.https的端口是443，http的端口号是80，且两者的连接方式不一样
2.http传输的是明文，而https 是ssl进行加密的，https的安全性更高
3.https是需要申请证书的，而http不需要
61.websocket是怎么通信的？
