1.js执行机制

js它是一门单线程的编程语言,所有的任务需要排队得以执行,前一个任务未结束或者出错,那么后面的任务均得不到执行.如果前一个任务因为耗时太长,则影响后面的任务执行,这样使得JS执行效率过低,所以JS异步模式产生。

2.js事件循环

1.0.当JS代码执行时，所有任务（同步/异步）都在主线程上执行，形成一个执行栈；
执行栈之外有用于存储待执行异步回调的任务队列(task queue) ===> 宏队列与微队列;
浏览器中有在其它分线程执行相关管理模块：定时器管理模块，Ajax请求管理模块，DOM事件管理模块。若碰到这些任务源，就会将其回调函数加入到宏队列中；
若碰到微任务源，例如Promise，则会将其回调函数加入到微队列中；
直至script宏任务执行结束后，就会执行微队列中的任务；
当微队列中的所有微任务执行结束，就会检查宏队列中有没有可执行的宏任务。如果有，则执行该宏任务，之后检查微队列并执行微任务，依次循环；反之，要是宏队列中没有待执行任务，则循环结束。
2.0. JavaScript的事件循环机制是基于宏任务和微任务。宏任务包括全局执行栈中的同步代码、setTimeout和setInterval的回调函数，微任务包括Promise的回调函数、MutationObserver和queueMicrotask。
事件循环的顺序是：
1.执行同步代码（宏任务）。
2.执行执行栈为空后，执行微任务。
3.再次执行同步代码（宏任务）。
重复步骤2和3，直到没有微任务或者宏任务。

3.js基本数据类型和引用数据类型的区别

1.基本数据类型（存放在栈中）
基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问
2.引用数据类型（存放在堆内存中的对象，每个空间大小不一样，要根据情况进行特定的配置）
引用类型是存放在堆内存中的对象，变量其实是保存的在栈内存中的一个指针（保存的是堆内存中的引用地址），这个指针指向堆内存。
引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象

4.get请求和post请求区别

1、 get是从服务器上获取数据，post是向服务器传送数据。
2、 url 可见性不同： get请求的参数 url 可见，而 post 请求的参数 url 不可见。 get请求时通过url直接请求数据，数据信息可以在url中直接看到，比如浏览器访问；而post请求是放在请求头中的，用户无法直接看到。
3、 get传送的数据量较小，有限制，不能大于2KB；这主要是因为它受约于url长度的限制。post传送的数据量较大，一般被默认为不受限制，但理论上，IIS4中最大量为80KB，IIS5中为100KB。
4、get请求因为数据参数是暴露在url中的，所以安全性比较低，如密码不能暴露的就不能用get请求；post请求中，请求信息是放在请求头的，安全性较高，可以使用。

5.组件卸载怎么阻止异步请求和异步事件

1.react取消请求
useEffect(() => {
let isUnmounted = false
(async () => { //异步请求
const res = await fetch(SOME_API)
const data = await res.json()
if (!isUnmounted) {
setValue(data.value)
setLoading(false)
}
})()
return () => {
isUnmounted = true;
}
}, [])
//

6.在请求拦截器/响应拦截器一般做了哪些操作

1、请求拦截器
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
如axios，都只是对ajax进行了统一的封装，它暴露出来的拦截器，其实就是写了一个方法，把ajax写在这个方法里面，在执行这个方法的时候，先将请求时要添加给请求头的那些数据（token、后端要的加密码…具体要看实际情况）先执行一遍，都赋值给一个变量，然后再统一传给ajax，接下来就是执行ajax，这就是所谓的请求拦截，其实就是先执行要添加的数据，然后再执行ajax，如果把这个添加数据的过程抽出来，就成了所谓的请求拦截器；
2、响应拦截器：
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。
响应拦截器也是一样如此，就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器；
3、它们的共同点都是:都是提前做了一些操作，可以作为程序优化的一种处理方式；
//

7.es6方法 Set和Map的区别

共同点：
集合、字典 可以储存不重复的值
区别：
1、set指的是“集合”结构，而map指的是“字典”结构；
2、set是以“[value, value]”的形式储存元素，而map是以“{key: value}”的形式储存；
3、map可用get()通过键查找特定值并返回，而set不行。
集合（Set）：
操作方法：
add(value)：新增，相当于 array里的push。
delete(value)：存在即删除集合中value。
has(value)：判断集合中是否存在 value。
clear()：清空集合。
遍历方法：遍历方法（遍历顺序为插入顺序）
keys()：返回一个包含集合中所有键的迭代器。
values()：返回一个包含集合中所有值得迭代器。
entries()：返回一个包含Set对象中所有元素得键值对迭代器。
forEach(callbackFn, thisArg)：用于对集合成员执行callbackFn操作，如果提供了 thisArg 参数，回调中的this会是这个参数，没有返回值。
字典（Map）：
操作方法：
set(key, value)：向字典中添加新元素。
get(key)：通过键查找特定的数值并返回。
has(key)：判断字典中是否存在键key。
delete(key)：通过键 key 从字典中移除对应的数据。
clear()：将这个字典中的所有元素删除。
遍历方法：
Keys()：将字典中包含的所有键名以迭代器形式返回。
values()：将字典中包含的所有数值以迭代器形式返回。
entries()：返回所有成员的迭代器。
forEach()：遍历字典的所有成员。
//

8.对缓存的了解

1.Cookie（4kb）
Cookie的工作原理如下：

6.在请求拦截器/响应拦截器一般做了哪些操作
>>>1、请求拦截器
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
如axios，都只是对ajax进行了统一的封装，它暴露出来的拦截器，其实就是写了一个方法，把ajax写在这个方法里面，在执行这个方法的时候，先将请求时要添加给请求头的那些数据（token、后端要的加密码…具体要看实际情况）先执行一遍，都赋值给一个变量，然后再统一传给ajax，接下来就是执行ajax，这就是所谓的请求拦截，其实就是先执行要添加的数据，然后再执行ajax，如果把这个添加数据的过程抽出来，就成了所谓的请求拦截器；
2、响应拦截器：
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。
响应拦截器也是一样如此，就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器；
3、它们的共同点都是:都是提前做了一些操作，可以作为程序优化的一种处理方式；
//
>>>
7.es6方法 Set和Map的区别
>>>共同点：
集合、字典 可以储存不重复的值
区别：
1、set指的是“集合”结构，而map指的是“字典”结构；
2、set是以“[value, value]”的形式储存元素，而map是以“{key: value}”的形式储存；
3、map可用get()通过键查找特定值并返回，而set不行。
集合（Set）：
操作方法：
add(value)：新增，相当于 array里的push。
delete(value)：存在即删除集合中value。
has(value)：判断集合中是否存在 value。
clear()：清空集合。
遍历方法：遍历方法（遍历顺序为插入顺序）
keys()：返回一个包含集合中所有键的迭代器。
values()：返回一个包含集合中所有值得迭代器。
entries()：返回一个包含Set对象中所有元素得键值对迭代器。
forEach(callbackFn, thisArg)：用于对集合成员执行callbackFn操作，如果提供了 thisArg 参数，回调中的this会是这个参数，没有返回值。
字典（Map）：
操作方法：
set(key, value)：向字典中添加新元素。
get(key)：通过键查找特定的数值并返回。
has(key)：判断字典中是否存在键key。
delete(key)：通过键 key 从字典中移除对应的数据。
clear()：将这个字典中的所有元素删除。
遍历方法：
Keys()：将字典中包含的所有键名以迭代器形式返回。
values()：将字典中包含的所有数值以迭代器形式返回。
entries()：返回所有成员的迭代器。
forEach()：遍历字典的所有成员。
//
>>>
8.对缓存的了解
>>>1.Cookie（4kb）
Cookie的工作原理如下：
客户端（浏览器）发送请求到服务器。
服务器在响应中设置一个或多个Cookie，并将其发送到客户端。
客户端收到响应后，将Cookie存储在本地计算机上的Cookie文件中。
客户端在每次发送请求时，都会将相应的Cookie信息包含在请求头中发送到服务器。
服务器接收到请求后，可以读取请求头中的Cookie信息，以获取客户端的状态和其他相关信息。
Cookie可以在不同的HTTP请求之间存储和传递数据。服务器可以使用Cookie来跟踪用户会话、存储用户首选项、实现购物车功能等。
每个Cookie由一个名字（Name）和一个值（Value）组成，还可以包含其他可选的属性，例如过期时间（Expires/Max-Age）、作用域（Domain/Path）、安全标记（Secure/HttpOnly）等。这些属性可以控制Cookie的行为和可访问性。
需要注意的是，Cookie是存储在客户端的文本文件，因此可以被篡改、窃取或滥用。为了增强安全性，可以使用安全标记和仅限HTTPS标记来限制Cookie的传输和访问。
2.web storage(localstorage,sessionstorage)5MB
//

9.vue和react的原理了解多少
vue[https://zhuanlan.zhihu.com/p/138114429]
10.call/apply/bind区别

1.call、bind、apply 都是 JavaScript 中用于改变函数执行上下文（即 this 指向）的方法。
2.call和bind 参数是列表，call会立即执行，bind不会
3.apply参数是数组，立即执行
//

11.promise / async await 有什么关联

Promise 和 async/await 是 JavaScript 中最常用的两种异步编程方式。Promise 通过使用 then() 和 catch() 方法来处理异步操作的结果，而 async/await 通过使用 async 和 await 关键字来等待异步操作的结果。async/await 是建立在 Promise 之上的语法糖，它使得异步代码更加易读、易写，同时也使得代码结构更加清晰、易于维护。在实际开发中，我们可以根据需要选择合适的异步编程方式来处理异步操作。

12.单点登陆的实现

单点登录的关键在于，如何让 Session ID（或 Token）在多个域中共享。
1.将token存在父域cookie中子域验证cookie
2.认证中心 网站跳转将token携带到url中，从url获取token并验证登录用户
//

13.webpack常用的配置 优化
14.git 常用工作流
15.怎么监听文件上传下载的进度
1.上传

// 涉及函数onUploadProgress
// 形参: event
// 函数作用：请求接口上传的过程中会不停的调用onUploadProgress函数
axiox({
    url: 'api/XXX',
    method: 'post',
    onUploadProgress: function (e) {
        console.log('e:',e);
    }
})
在上传的过程中，会不停的多次的调用onUploadProgress函数，
其中里面的total为本次上传的总数据大小，loaded为本次上传已上传了多少数据。

2.下载

// 函数 onDownLoadProgress
axiox({
    url: 'api/XXX',
    method: 'post',
    onDowbloadProgress: function (e) {
        console.log('e:',e);
    }
})
其中loaded还是已经下载了的数据大小，至于总数据大小，需要后端提供

16.vue怎么修改一个数组的长度

this.arr = [];
this.arr.splice(0);
//

17.平时喜欢使用函数组件还是类组件 为什么？

函数式组件 基本上是JavaScript函数，接受props作为参数并返回要呈现的React元素。它们比类组件更简单，更简洁，更容易理解和测试。它们通常也更快速地进行渲染。

18.vue/react怎么缓存页面

1.vue/(keep-alive)
include 字符串或正则表达式 只有名称匹配的组件会被缓存。
exclude 字符串或正则表达式 任何名称匹配的组件都不会被缓存。
max 数字 最多可以缓存多少组件实例
//

19.首屏优化方案有哪些

1.按需加载
2.骨架屏
3.图片懒加载，预加载
4.cdn静态资源加速
5.图片压缩
6.精灵图

20.浏览器输入url按下回车发生了什么

1.URL解析：浏览器会解析输入的URL，将其分解为不同的组成部分。例如协议（通常是HTTP或HTTPS），域名（例如www.example.com），以及可选的端口号，路径和查询参数等。
2.DNS解析：浏览器需要将域名解析为IP地址，以便能够与服务器进行通信。它会首先检查浏览器缓存中是否有与该域名对应的IP地址。如果没有，则向DNS服务器发送查询请求，以获取该域名对应的IP地址。一旦找到IP地址，浏览器就可以建立与服务器的连接。
3.建立连接：浏览器使用HTTP或HTTPS协议与服务器建立TCP连接，以便在服务器和浏览器之间传输数据。这个过程会进入一些握手和验证的步骤，以确保连接的安全性和稳定性。
4.发送HTTP请求：一旦连接建立好，浏览器会发送一个HTTP请求到指定的服务器。这个请求中包含了请求的方法（GET，POST等），路径，请求头部和可选的请求体等信息。
5.服务器处理请求：服务器收到浏览器发送的请求后，会根据请求中的信息来处理请求。服务器可能会执行一些操作，例如查找请求的资源，执行服务器端的逻辑，查询数据库等。
6.服务器响应：一旦服务器处理完请求，就会生成一个HTTP响应并返回给浏览器。这个响应中包含了响应的状态码，响应头部和响应体等信息。常见的状态码有200表示成功，404表示资源未找到，500表示服务器内部错误等。
7.接收和渲染页面：浏览器接收到服务器返回的响应后，会根据响应的内容进行解析和渲染。如果响应是一个HTML页面，浏览器会解析HTML，CSS和JavaScript，并将其渲染成可视化的页面。同时，浏览器还会发送其他的请求来获取页面中引用的其他资源，例如图片，样式表，JavaScript文件等。
8.关闭连接：一旦浏览器完成对页面的渲染，它会关闭与服务器的连接，释放网络资源。

21.动态路由的实现（怎么控制路由权限的）

route = [
{
meta: {permissionCode: 10023}
}
]

22.接口返回的状态码有哪些，都代表什么含义？

//
1、200 OK：客户端请求成功，表示请求已成功，请求所希望的响应头或数据体将随此响应返回。
2、302 (临时重定向) : 表示请求的资源临时搬到了其他位置请求的资源暂时被配到到了新的URI。
3、304 (未修改) : 表示客户端发送附带条件的请求（GET方法请求报文中的IF…）时，条件不满足返回304时，不包含任何响应主体
4、400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
5、401 Unauthorized：请求未经授权，请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
6、403 Forbidden：服务器收到请求，但是拒绝提供服务。
7、404 Not Found：请求资源不存在，服务器无法根据客户端的请求找到资源，前端调用的URL不存在。
8、500 Internal Server Error：服务器发生不可预期的错误，一般来说，这个问题都会在服务器程序出错时出现，即后端问题。
9、502 bad gateway：错误网关，由于连接超时，向服务器发送请求，由于服务器当前链接太多，导致服务器方面无法给出正常的响应。
10、503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常。
11、504 ：网关超时，服务器作为网关或代理，未及时从上游服务器接收请求。
12、405: 请求方式错误

23.项目上遇到最难的问题，举例说明一下
24.eslint使用过吗，都用过什么配置
25.除了npm还使用过哪些下载包的工具

1.cnpm yarn pnpm

26.谈谈vue的v-model数据双向绑定怎么实现的

v-model是v-bind:value和v-on:input的语法糖
input的值改变赋值给value，value的值改变，input输入框的值也随之改变，从而实现数据双向绑定
//

27.vue的传参方式有哪些

1、父子组件间利用“props”和“$emit”进行传参；2、爷孙组件间利用“provide”和“inject”进行传参；3、兄弟组件间利用公共文件来传参；4、路由间使用“query”和“params”来传参。

28.对vue响应式原理的理解
29.v-if和v-show的区别，使用场景分别是什么
30.nextTick的作用和使用场景？

$nextTick是用来知道什么时候DOM更新完成的。

31.let、var、const区别

//
一、let、var、const区别
（1）块级作用域:
块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题:
<> 内层变量可能覆盖外层变量
<> 用来计数的循环变量泄露为全局变量
（2）变量提升： var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。
（3）给全局添加属性： 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。
（4）重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。
（5）暂时性死区： 在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。
（6）初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。
（7）指针指向： let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。
二、const对象的属性可以修改吗
const保证的并不是变量的值不能改动，而是变量指向的那个内存地址不能改动。对于基本类型的数据（数值、字符串、布尔值），其值就保存在变量指向的那个内存地址，因此等同于常量。
但对于引用类型的数据（主要是对象和数组）来说，变量指向数据的内存地址，保存的只是一个指针，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了。

32.实现对象深拷贝的方法，JSON.stringify() 有什么缺点

1、JSON.stringify(obj);//将对象转换为json字符串形式
2、lodash.cloneDeep()实现深拷贝

3、递归实现 (推荐使用)

//使用递归的方式实现数组、对象的深拷贝
export function deepClone (obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj === "object") {
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                //判断ojb子元素是否为对象，如果是，递归复制
                if (obj[key] && typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
};   

33.检测数据类型的方式

// 判断是否为undefined或null

const isDef = (v) => {
  return v !== undefined && v !== null
}
 

// 判断是否为Promise 函数

const isPromise = (val) => {
  return (
    val !== undefine &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}
 

// 判断是否为简单数据类型

const isPrimitive (value) => {
  return (
    typeof value === 'string' ||
    typeof value === 'number' ||
    typeof value === 'symbol' ||
    typeof value === 'boolean'
  )
}
 

// 严格检查复杂数据类型

const isPlainObject = (obj) => {
  return Object.prototype.toString.call(obj) === '[object Object]'
}

const isRegExp = (v) => {
  return Object.prototype.toString.call(v) === '[object RegExp]'
}

34.HTTP/HTTPS协议

1.HTTP
超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。
1.1.HTTP特点
1.无状态：协议对客户端没有状态存储，对事物处理没有“记忆”能力，比如访问一个网站需要反复进行登录操作
2.无连接：HTTP/1.1之前，由于无状态特点，每次请求需要通过TCP三次握手四次挥手，和服务器重新建立连接。比如某个客户机在短时间多次请求同一个资源，服务器并不能区别是否已经响应过用户的请求，所以每次需要重新响应请求，需要耗费不必要的时间和流量。
3.基于请求和响应：基本的特性，由客户端发起请求，服务端响应 简单快速、灵活
4.通信使用明文、请求和响应不会对通信方进行确认、无法保护数据的完整性
2.HTTPS
HTTPS是身披SSL外壳的HTTP。
HTTPS是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。
2.2.HTTPS特点
1.内容加密：采用混合加密技术，中间者无法直接查看明文内容
2.验证身份：通过证书认证客户端访问的是自己的服务器
3.保护数据完整性：防止传输的内容被中间人冒充或者篡改

35.vue路由传参params和query的区别

// 1.params传参：
//**1.1**
this.$router.push({
    name:'about', //组件名
    params: {id:'1'}  //传递的参数 {key:value,key:value}
})
// 这种方式参数在url中看不到刷新页面参数会丢失
//**1.2**
{
    path: "/about/:id",
    name: "about",
    component: () => import("../views/about/about.vue"),
  },
// 在路由中配置参数显示在url中参数不会丢失
// 获取参数：this.$route.params
//2.query传参：
this.$router.push({
     path:'/about',
     // name:'about',
     query:{id:1}
})
// 参数在url中显示参数不会丢失
// 获取参数： this.$route.query

36.vue题集[https://zhuanlan.zhihu.com/p/644543319
]