1. cookie，sessionStorage，localStorage的区别

标题	大小限制	共享限制	读取限制
cookie	4KB	可设置白名单	http(存在安全性问题)和客户端
sessionStorage	5M以内	当前客户端访问	客户端（当前标签页）
localStorage	5M以内	当前客户端访问	客户端（跨窗口源网页，持久化保存）

2. position 的属性值相关

属性值	类型	描述
static	默认值	元素按照正常的文档流进行定位，不受 top、right、bottom、left 等属性影响。
relative	相对定位	元素相对于其正常位置进行偏移，但仍保留在文档流中。
absolute	绝对定位	元素相对于最近的定位祖先（非 static）进行定位，如果没有定位祖先，则相对于初始包含块（通常是浏览器窗口）。
fixed	固定定位	元素相对于浏览器窗口进行定位，即使页面滚动也不会移动。
sticky	粘性定位	元素在相对定位和固定定位之间切换，依赖于用户的滚动位置。在元素的滚动范围内表现为相对定位，超出范围后表现为固定定位。

3. 盒子模型&标准盒模型和怪异盒模型

盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个的box， box由内容、内边距、边框和外边距4个部分组成。除去内容部分，其余每个部分又分别包含上、下、左和右4个方向，方向既可以分别定义也可以统一定义。

类型	简称	样式设置 box-sizing	描述
标准盒模型	W3C标准盒模型	content-box	标准盒模型的 width 或 height 决定 content 的宽或高。
怪异盒模型	IE盒子模型	border-box	怪异盒子模型的 width 或 height 等于 content + padding + border 的宽或高。

4. JS的类型&作用域

Js的类型

基本类型包含：Sting类型，Number类型，Boolean类型，null，undefind
引用类型：Object类型，Arrya类型， Symbol类型（ES6）

一个变量声明了，但没有赋值，那么默认值就为undefined

一个函数，没有写return，那么默认return就是undefind

JS的作用域

作用域是指在代码中定义变量的区域，这个区域定义了变量的可见性和生命周期。JavaScript有两种主要的作用域类型：全局作用域和函数作用域。
ES6+ 块级作用域
作用域链 => 当你在一个函数内部尝试访问一个变量时，JavaScript会首先在当前的作用域查找。如果没有找到，它会去外层的作用域查找，直到找到为止。这就是作用域链。

js的闭包与递归

闭包

当一个函数能够记住并访问所在的词法作用域，即使该函数在词法作用域外部执行，这就产生了闭包。

常见问题

1. 内存泄漏：如果闭包中引用了外部函数的变量，且闭包没有被及时释放，可能导致内存泄漏。
   
2. 不易理解和调试：闭包使得函数的作用域扩大，内部函数可以访问外部函数的变量，这会增加代码的复杂性，使得代码更难理解和调试。

优点

1. 封装性：闭包可以将变量和函数封装起来，防止外部访问和修改，提高了代码的可维护性和可重用性。
   
2. 保存状态：闭包可以保存函数的状态，即使函数已经执行完毕，状态仍然保持，这在特定情况下非常有用，例如事件处理程序。

缺点

1. 内存占用：闭包会占用更多的内存，因为它会保存外部函数的变量和内部函数的引用。特别是如果闭包没有被及时释放，会导致内存泄漏。
   
2. 性能问题：由于闭包会引用外部函数的变量，导致变量无法被垃圾回收，这可能会影响性能，尤其是在循环中使用闭包。

递归

函数直接或间接调用自己。通过某个条件判断跳出结构，有了跳出才有结果。

通常用于查询树状结构数据如 菜单树匹配子节点/商户门店结构树匹配权限等

5. 普通函数与箭头函数的区别

类型	场景问题	优点
普通函数	无	适用性强
箭头函数	This的指向问题	语法简洁性比较高、不适用于构造函数、无arguments对象

6. Js与Ts的区别

类型	类型系统	继承	特殊
js	弱类型	基于原型	编译后代码可读性高
ts	强类型	基于类	静态类型检查，可选类型注解，类型推断，支持装饰器，编译时类型检查，泛型

7. Vue2与Vue3的区别

类型	构建	架构模式	性能优化	API设计
vue2	wabepack	大型单体系统架构模式		选项式API
vue3	vite或wabepack	使用组合式API+TypeScript的方式进行架构设计和实现	通过优化虚拟DOM算法、响应式系统和编译器	组合式API+Composition API(以函数的形式组织组件逻辑)

底层

Vue2底层是通过es5的Object.defineProperty，使用Object.defineProperty()进行数据劫持，结合订阅发布的方式实现，有一定的局限性。
缺点：对数组更新的时候无法实现响应式，它内部有一个this.$set去实现 如果响应式定义的数据层级比较深（对象里面有对象，对象里面还有对象）它内部是 通过递归的形式去实现的

Vue3底层是通过es6的Porxy， 使用Proxy代理，使用ref或者reactive将数据转化为响应式数据，能够更好地支持动态添加属性和删除属性。
它解决了Vue2底层实现的缺点，对数组、层级比较深的对象处理都很优秀
缺点：浏览器兼容不是很好

生命周期

Vue2------------------------------Vue3
初始化阶段：
beforeCreate ------------------ setup() 
created -------------------------- setup()
beforeMount -------------------- onBeforeMount
mounted -------------------------- onMounted 

更新阶段：
beforeUpdate ------------------ onBeforeUpdate 
updated ------------------------- onUpdated 

销毁阶段：
beforeDestroy ---------------- onBeforeUnmount 
destroyed ---------------------- onUnmounted 
————————————————

根节点

Vue2 只支持一个根节点 ，在模板中如果使用多个根节点时会报错

Vue3 支持多个根节点

模板指令

在vue2中，v-for 优先级高于 v-if;

在vue3 中，v-if 优先级高于v-for;

语法API不同

Vue2：选项式API，面向对象编程

Vue3：选项式API/组合式API，面向函数编程；没有this，处处皆函数

8. vuex与pinia的区别

类型	描述	体积和复杂性
Vuex	Vuex采用了集中式的架构，将所有状态存储在一个全局状态树中，通过mutations和actions来修改和处理状态。	拥有庞大的生态系统，适合大型和复杂的项目
Pinia	Pinia采用了去中心化的架构，将状态分布在多个模块中，每个模块拥有自己的状态、mutations和actions。	相对较小且更简单

9. Vue的路由相关

Vue路由提供了多个导航守卫，用来控制路由导航的行为

beforeEach：在路由导航之前被调用，可以用来检查用户是否有权限访问该路由。

afterEach：在路由导航之后被调用，可以用来执行一些清理操作，如重置页面滚动位置。

beforeResolve：在路由导航之前被调用，但是在路由组件被解析之后被调用，可以用来确保异步路由组件被解析。

onError：在路由导航期间发生错误时被调用，可以用来处理错误并显示错误页面。

路由懒加载和路由预加载

路由懒加载是在需要时动态加载路由组件，而路由预加载是在应用程序启动时预加载一些路由组件。路由懒加载可以提高应用程序的性能，因为它可以减少应用程序启动时需要加载的代码量，而路由预加载可以提高路由导航的性能，因为它可以减少路由导航时需要加载的代码量。

10. vite和wabepack的区别

1. 开发模式不同

Webpack在开发模式下依然会对所有模块进行打包操作，虽然提供了热更新，但大型项目中依然可能会出现启动和编译缓慢的问题；而Vite则采用了基于ES Module的开发服务器，只有在需要时才会编译对应的模块，大幅度提升了开发环境的响应速度。

2. 打包效率不同

Webpack在打包时，会把所有的模块打包成一个bundle，这会导致初次加载速度较慢；而Vite则利用了浏览器对ES Module的原生支持，只打包和缓存实际改动的模块，从而极大提高了打包效率。

11. Vue的组件通讯

父子组件通信：props / $emit

子父组件通信：$emit / v-on

兄弟组件通信：Vuex

跨级组件通信：Vuex / provide / inject

12. React和Vue的区别

1. 监听数据变化的实现原理不同

Vue通过getter/setter方法以及一些函数的劫持能精确知道数据的变化。

React默认是通过比较引用方式diff算法进行的，若不优化，会导致大量不必要的VDom的重新渲染。

2. 数据流不同

Vue实现双向绑定：props可以双响绑定，组件与Dom之间可以通过v-moudel绑定。

React不支持双向绑定：提倡单向数据流，称之为onChange/setState模式。

13. ES6的新特性

14. 原型和原型链

在js中，每一个对象（函数也是对象）都有一个特殊的属性叫做原型（prorotype），它指向另一个对象，这个对象（Test.prototype）被称为原型对象， 原型对象是用来共享属性和方法的

查找对象实例的方法和属性时，先在自身找，找不到则沿着__proto__向上查找，我们把__proto__形成的链条关系称原型链（实现了js继承）

15. js的深拷贝与浅拷贝的区别

浅拷贝（Shallow Copy）：创建一个新的对象，这个对象有着原始对象属性的一份简单拷贝。如果属性是基本类型，则拷贝的就是基本类型的值；如果属性是引用类型，则拷贝的就是内存地址，所以新旧对象还是会引用同一个对象。

深拷贝（Deep Copy）：创建一个新的对象，如果属性是基本类型，同样拷贝基本类型的值；如果属性是引用类型，则会在新对象中创建一个新的引用类型的实例。新旧对象之间不会共享任何引用。

16. js的Map与Object的区别

Object：Object是最常用的一种引用类型数据，可用于存储键值对的集合，在ECMAScript 1st中添加

Map：Map是键值对的集合，采用Hash结构存储，在ES6中新增

Object适用场景

1. 仅做数据存储，并且属性仅为字符串或者Symbol
2. 需要进行序列化转换为json传输
3. 当作一个对象的实例，需要保留自己的属性和方法

Map适用场景

1. 会频繁更新或删除键值对
2. 存储大量的数据，尤其是key类型未知的情况下
3. 需要频繁的进行迭代处理

17. 如何解决跨域问题

如何解决跨域问题

JSONP（只支持GET请求）

CORS（服务器需要设置相应的响应头）

代理服务器（在服务器端设置代理，将请求发送到目标服务器）

在服务器端设置HTML5 Access-Control-Allow-Origin头信息

18. TCP和UDP的理解

浏览器输入URL后发生了什么

1. DNS域名解析；
2. 建立TCP连接；
3. 发送HTTP请求；
4. 服务器处理请求；
5. 返回响应结果；
6. 关闭TCP连接；
7. 浏览器解析HTML；
8. 浏览器布局渲染；

TCP 三次握手&四次挥手

19. 浏览器的事件循环

JavaScript的事件循环是一个处理异步操作和用户界面交互的机制。它是浏览器中的一个重要概念，确保了浏览器可以同时处理用户交互、网络操作、定时事件等。

事件循环通常涉及以下几个阶段：

1. 执行全部同步代码。
2. 执行微任务（microtasks），如Promise的回调。
3. 检查是否有需要执行的宏任务（macrotasks），如用户输入事件、setTimeout等，如果有则执行。
4. 返回第一步继续执行剩余的同步代码。

重复步骤3和4，直到所有的任务都处理完毕。

20. 节流防抖的概念和应用场景

节流（Throttling）和防抖（Debouncing）是两种常用的优化函数执行频率的技术，它们的目的都是为了减少不必要的资源消耗或者提高性能。

节流（Throttling）：控制一定时间内函数的执行次数。

1. 应用场景： 比如用户滚动页面的事件，我们可以限制其执行的频率，避免频繁的计算或者网络请求。
2. 实现方式 可以用定时器实现，当事件触发时，设置一个定时器，如果在设定的时间内再次触发事件，则清除上一次的定时器，并重新设置。

防抖（Debouncing）：当持续触发事件时，一定时间内只执行最后一次。

1. 应用场景 比如用户输入搜索关键字，我们可以在用户完成输入后再进行搜索请求，而不是用户每输入一个字就进行一次搜索。
2. 实现方式 可以用定时器实现，当事件触发时，设置一个定时器，如果在设定的时间内再次触发事件，则清除上一次的定时器，并重新设置。当最后一次触发事件后，超过设定的时间没有再次触发事件，则执行回调函数。

21. 快速排序算法

22. 对于堆和栈直接的理解

如果想要堆溢出，比较简单，可以循环创建对象或大的对象； 如果想要栈溢出，可以递归调用方法，这样随着栈深度的增加，JVM （虚拟机）维持着一条长长的方法调用轨迹，直到内存不够分配，产生栈溢出。