1.Ajax,Axios,Fetch有什么区别？
（1）三者都用于网络请求，但是维度不同
（2）Ajax（Asynchronous javaScript and XML），一种技术统称
（3）Fetch是一个具体的API，浏览器原生API,用于网络请求，和XMLHttpRequest是一个级别，Fetch语法更加简洁，易用，支持Promise
（4）Axios是第三方库(),内部可以用XMLHttpRequest或者Fetch来实现
注意点：lib和API的区别：
API是原生的函数，库lib是第三方的工具，库需要用API开实现。
2.节流和防抖
（1）二者有什么区别：
防抖：当一个动作连续触发，只执行最后一次。通俗来说，，就是防止抖动，“你先抖动着，啥时候停了，在执行下一步”，例如一个搜索输入框，等输入停止之后，再出发搜索。
输入框防抖实现：
<template>
<div>
输入框： <input id="input1"/>
</div>
</template>
<script>
export default {
name: 'FangDou',
data() {
return {
};
},
mounted() {
const input1 = document.getElementById('input1')
input1.addEventListener('keyup',this.debounce(()=>{
console.log('发起搜索',input1.value)
},200))
},
methods: {
debounce(fn,delay=200){
let timer = 0
return function(){
if(timer) clearTimeout(timer)
timer = setTimeout(()=>{
fn.apply(this,arguments)
timer = 0
},delay)
}
}
},
};
</script>
节流：限制一个动作在一段时间内只能执行一次。节省交互沟通。流不一定指流量。“别急，一个一个来，按照时间节奏来，插队者无效”。
鼠标拖拽节流的代码实现:
<template>
<div>
<div id="div1" draggable="true"
style="width:100px;height:100px;background:#bfa;text-align:center;line-height:100px">可拖拽</div>
</div>
</template>
<script>
export default {
name: 'JieLiu',
data() {
return {
};
},
mounted() {
const div1 = document.getElementById('div1')
div1.addEventListener('drag', this.throttle((e) => {
console.log('鼠标拖拽的位置:', e.offsetX, e.offsetY)
}, 100))
},
methods: {
// 节流
throttle(fn, delay = 200) {
let timer = 0
return function () {
if (timer) return
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = 0
}, delay);
}
}
},
};
</script>
节流与防抖的区别是：
（1）节流限制执行频率，有节奏的执行；
（2）防抖限制执行次数，多次密集的出发只执行一次；
（3）节流关注过程，防抖关注结果。
3.px,%,rem,em,vw,vh有什么区别
（1）px是基本单位，绝对单位（其他的都是相对单位）
（2）%是相当于父元素的宽度比例
（3）em是相对于当前元素的font-size
（4）rem是相对于根元素的font-size
（5）vw是屏幕宽度的1%
（6）vh是屏幕高度的1%
（7）vmin是vw和vh的最小值,vmax是两者的最大值
4.箭头函数有什么缺点，哪里不能用箭头函数？
箭头函数的缺点是：
（1）没有arguments
（2）无法通过apply,call,bind改变this,箭头函数的this是父作用域的this
（3）某些箭头函数的代码难以阅读
箭头函数不适用的情况：
（1）对象方法
（2）原型方法
（3）构造函数
（4）动态上下文中的回调函数
（5）vue的生命周期和methods
5.请描述Tcp的三次握手和四次挥手
建立TCP连接，先建立连接（确保双方都有收发消息的能力）
再传输内容（如发送一个get请求）
网络连接是TCP协议，网络传输是HTTP协议
三次握手-建立连接：
（1）client发包，server接收。server：有client要找我
（2）server发包，client接收。client：server已经收到消息了
（3）client发包，server接收。server：client要准备发送了
四次挥手-断开连接：
（1）client发包，server接收。server：client已请求结束
（2）server发包，client接收。client：server已经收到，我等待他关闭
（3）server发包，client接收。client：server此时可以关闭连接了
（4）client发包，server接收。server：可以关闭了（然后关闭连接）
6.for...in和for...of有什么区别？
（1）for...in遍历得到key
（2）for...of遍历得到value
（3）遍历对象，for...in可以，for...of不可以
（4）遍历map,set,for...of可以，for...in不可以
（5）遍历generator,for...of可以，for...in不可以
可枚举VS可迭代：
（1）for...in用于可枚举数据，如对象，数组，字符串,得到key
（2）for...of用于可迭代数据，如数组，字符串，Map,Set,得到value
7.for...await...of有什么作用？
（1）for...await...of用于遍历多个promise
8.offSetHeight，scrollHeight,clientHeight有什么区别？
计算规则：
（1）offSetHeight，offSetWidth：border+padding+content
（2）clientHeight,clientWidth：padding+content
（3）scrollHeight，scrollWidth：padding+实际内容尺寸
9.HTMLCollection和NodeList有什么区别？
（1）HTMLCollection是Element的集合
（2）NodeList是Node集合
注意点：
（1）获取Node和Element的返回结果可能不一样
（2）如element.childNodes和element.children不一样
（3）前者包含Text和comment节点，后者不会
10.vue中computed和watch有什么区别？
（1）computed用于计算产生新的数据，有缓存
（2）watch用户监听现有数据
（3）computed有缓存，methods没有缓存
11.vue通信方式有什么?尽量全面
（1）父组件给子组件传值用props，$parent
（2）子组件给父组件传值用$emit,$refs（vue3）,$children(vue2)
（3）不相关的组件通信用event自定义事件
（4）$attrs用于接收没有被接收的属性和方法，本质上是props和$emit的候补
（5）多层级组件之间传值可以用provide(产生数据)和inject（使用数据）
（6）全局组件：全局事件总线eventBus和vuex
12.vuex中的mutation和action有什么区别？
（1）mutation是原子操作，必须同步代码
（2）action可包含多个mutation，可包含异步代码
13.js严格模式有什么特点
(1)全局变量必须先声明
（2）禁止使用with
（3）创建eval作用域
（4）禁止this指向window
（5）函数参数不能重名
14.HTTP跨域请求时为何发送options请求
跨域请求：
（1）浏览器的同源策略
（2）同源策略一般限制ajax请求，不能跨域请求server
（3）不会限制<link>,,<script>,<iframe>加载第三方资源
（4）跨域：当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同，就说该接口跨域了。
（5）跨域限制的原因：浏览器为了保证网页的安全，出的同源协议策略
（6）跨域解决方案
<1> cors：目前最常用的一种解决办法，通过设置后端允许跨域实现。
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");
<2> node中间件、nginx反向代理：跨域限制的时候浏览器不能跨域访问服务器，node中间件和nginx反向代理，都是让请求发给代理服务器，静态页面面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器和服务器之间不存在同源限制。
<3>JSONP：利用的原理是script标签可以跨域请求资源，将回调函数作为参数拼接在url中。后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成javascript。
<4>postmessage：H5新增API，通过发送和接收API实现跨域通信。
HTTP跨域请求时为何发送options请求的原因：
（1）options请求时跨域请求之前的预检查
（2）浏览器自行发起，无需我们干预
（3）不影响实际功能
15.JS内存泄漏如何检测？场景有哪些？
16.什么是垃圾回收？17.移动端H5 click有300ms延迟，如何解决？
初期解决方案：FastClick
<script>
window.addEventListener("load",function(){
FastClick.attach(document.body)
},false)
</script>
原理：
（1）监听touchend事件（touchstart, touchend会先于click触发）
（2）使用自定义DOM事件模拟一个click事件
（3）把默认的click(300ms之后触发)禁止掉
现代浏览器的改进：有content="width=device-width"属性将不会延迟300ms
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
答案：
（1）背景：double tap to zoom
（2）FastClick
（3）width=device-width
18.网络请求中tocken和cookie有区别？
（1）cookie
HTTP是无状态的，每次请求都要带cookie,以帮助识别身份。
服务端也可以向客户端set-cookie,cookie大小限制4kb。
默认有跨域限制，不可跨域共享，传递cookie。
cookie本地存储: HTML5之前cookie常被用于本地存储，HTML5之后推荐使用localStorage和sessionStorage
现代浏览器开始禁止第三方cookie：和跨域限制不同，这里禁止网页引入的第三方js设置cookie
（打击第三方广告，保护用户隐私）
新增属性sameSite:strict,lax,none三个值可选。
Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。
（2）cookie和session：
cookie用于登录验证，存储用户标识（如userId）。
session在服务器端，存储用户详细信息，和cookie信息一一对应。
cookie+session是常见的登录验证解决方案。
token VS cookie：
（1）cookie是HTTP规范，而token是自定义传递
（2）cookie会默认被浏览器存储，而token需要自己存储
（3）token默认没有跨域限制
JWT(JSON Web Token):可以取代cookie+session的方式，用于用户登录校验；
前端发起校验，后端验证成功之后，会返回一个加密的token；
前端自行存储这个token（其中包含用户信息，加密了）；
以后访问服务器端接口，都带着这个token，作为用户信息；
划重点：
（1）cookie知识点很多，对HTTP也很重要；
（2）session存在的价值：配合cookie使用；
（3）token和cookie要对比理解，否则容易混淆；
答案：
（1）cookie是HTTP标准，有跨域限制，配合session使用；
（2）token无标准，无跨域限制，用于JWT。
19.Session和JWT哪个更好？（连环问）
Session的优点：
（1）原理简单，易于学习
（2）用户信息存储在服务端，可快速封禁某个用户
Session的缺点：
（1）占用服务端内存，硬件成本高
（2）多进程，多服务时不好同步，需要使用第三方缓存，如redis。
（3）默认有跨域限制
JWT的优点：
（1）不占用服务端内存
（2）多进程多服务不受影响
（3）无跨域限制
JWT的缺点：
（1）用户信息存储在客户端，无法快速封禁某个用户
（2）万一服务端秘钥被泄漏，用户信息将全部丢失
（3）token体积大于cookie，会增加请求的数据量
答案：如果有严格管理用户信息的需求（保密，快速封禁），推荐使用Session。
如果没有特殊要求，则使用JWT，如创业初期的网站。
20.如何使用SSO单点登录？（连环问）
基于cookie：
（1）cooki默认不可跨域共享，但有些情况下可设置为共享，
（2）当主域名相同，如www.baidu.com,image.baidu.com，
（3）设置cookie domain为主域名，即可共享cookie。
（4）如主域名完全不同，则cookie无法共享。
（5）可使用SSO技术方案
