1、说说你对Event Loop(事件循环)的理解？

Event Loop是JavaScript中的一种机制，用于处理异步操作。它是JavaScript运行时环境中的一个循环，不断地从任务队列中取出任务并执行，直到任务队列为空。

当JavaScript代码执行时，同步任务会直接进入调用栈中执行，而异步任务则会被放入任务队列中等待执行。当调用栈中的任务执行完毕后，Event Loop会检查任务队列中是否有任务需要执行，如果有，则将任务取出并放入调用栈中执行。

在执行异步任务时，JavaScript会将任务交给对应的宿主环境（如浏览器或Node.js）处理，等待宿主环境将任务放入任务队列中。当任务队列中有任务时，Event Loop会不断地从队列中取出任务并执行，直到队列为空。

总的来说，Event Loop是JavaScript中用于处理异步操作的机制，它通过任务队列和调用栈的配合，实现了异步任务的执行。

2、说说你对BOM的理解，常见的BOM对象你了解哪些？

DOM就是我们的文档对象，也就是HTML元素等

BOM则是浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象。其实BOM就是利用JavaScript开发web应用的核心，它提供给我们可以操作浏览器的一些功能对象。

作用就是跟浏览器做一些交互，比如如何进行页面的后退、前进、刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息。如：浏览器品牌版本，屏幕分辨率。

浏览器的全部内容可以看成DOM，整个浏览器可以看成BOM。

DOM和BOW的区别：

DOM

• 是文档对象模型
• DOM就是把文档当做一个对象来看待
• DOM的顶级对象是document
• DOM主要学习是操作页面元素
• DOM是WSC标准规范

BOM

• 是浏览器对象模型
• BOM就是把浏览器当做一个对象来看待
• BOM的顶级对象是window
• BOM学习的是浏览器窗口交互的一些对象
• BOM是浏览器厂商在各自的浏览器定义的，兼容性较差

Bom的核心对象是window，它表示浏览器的一个实例

在浏览器中，window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象

因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

常见的BOM对象都有哪些？

• window对象：是js最顶层对象
• document对象：文档对象
• location对象：浏览器当前URL信息
• navigator对象：浏览器本身信息
• screen对象：客户端屏幕信息
• history对象：浏览器返回历史信息

3、浏览器的内核都有哪些,什么区别

1. 360浏览器：Chrome内核和IE内核
2. 百度浏览器：IE和WebKit内核
3. QQ浏览器：Chromium内核+IE双内核
4. 猎豹浏览器：Trident和WebKit
5. 搜狗浏览器：Chromium内核

常见的浏览器内核有一下几种，及区别？

• Trident内核：是微软开发的浏览器内核，主要用于IE（Internet Explorer）浏览器
• Gecko内核：是Mozilla Firefox浏览器的内核，也被其他浏览器所采用
• Webkit内核：是苹果公司开发的浏览器内核，主要用于Safari浏览器和Chrome内核
• Blink内核：是Google公司基于Webkit内核开发打的浏览器内核，主要用于Chrome浏览器

这些内核的区别主要在于渲染引擎、Javascript引擎、CSS解析器等方面的实现方式和性能表现。不同的内核对网页的渲染效果、网页的兼容性、网页的加载速度等都有一定的影响。

4、说说浏览器的渐进增强和优雅降级的区别？

浏览器的渐进增强和优雅降级都是为了解决不同浏览器或设备之间的兼容性问题，但它们的实现方式和目的不同。

两者的区别

• 渐进增强是指在设计和开发网站或应用程序时，首先考虑基本功能和核心内容，然后逐步添加更高级的功能和特性，以适应不同的设备和浏览器。这种方法强调的是向前兼容，即在旧版本的浏览器中也能够正常使用基本功能，而在新版本的浏览器中则能够享受更多的功能和体验。渐进增强的目的是为了提高用户体验和网站的可访问性。
• 优雅降级则是指在设计和开发网站或应用程序时，首先考虑高级功能和特性，然后逐步降低要求，以适应不同的设备和浏览器。这种方法强调的是向后兼容，即在新版本的浏览器中能够正常使用高级功能，而在旧版本的浏览器中则能够降低要求，以保证基本功能的正常使用。优雅降级的目的是为了确保网站或应用程序在不同的设备和浏览器中都能够正常运行。

总的来说，渐进增强和优雅降级都是为了解决兼容性问题，但渐进增强更注重向前兼容，而优雅降级更注重向后兼容。

5、网站性能优化的方案都有哪些？

网站性能优化的方案包括以下几个方面：

1. 压缩文件（静态资源压缩）：压缩CSS、JavaScript和HTML文件可以减少文件大小，从而加快页面加载速度。
2. 图片优化（延迟加载内容）：使用适当的图片格式、压缩图片大小、使用懒加载等方式可以减少图片对页面加载速度的影响。
3. CDN加速：使用CDN（内容分发网络）可以将网站的静态资源分布到多个服务器上，从而加快资源加载速度。
4. 缓存优化：使用浏览器缓存、服务器缓存等方式可以减少对服务器的请求，从而加快页面加载速度。
5. 减少HTTP请求：减少页面中的HTTP请求可以减少页面加载时间。
6. 前端优化：使用合适的前端框架、优化代码结构、减少DOM操作等方式可以提高页面的渲染速度。
7. 数据库优化：优化数据库查询语句、使用索引等方式可以提高网站的响应速度。
8. 服务器优化：使用高性能的服务器、优化服务器配置、使用负载均衡等方式可以提高网站的响应速度。
9. 去除无用代码：去除无用的代码可以减少页面加载时间。
10. 压缩响应数据：压缩响应数据可以减少数据传输时间，从而加快页面加载速度。

---

1. 使用离线缓存： 把常用的变动又少的js、css、图片存储到localstorage，第二次访问的时候直接走本地缓存。在移动端使用广泛。
2. 预加载：在某个功能还没展现时，在空闲时间预先加载相关图片或者js代码
3. 优化算法：在js处理中优化查找、排序算法。尽量少使用嵌套循环。

6、Link和@import之间有什么区别?

css引入外部标签的两种方式：第一种使用最多，稳定

<link rel="stylesheet" href="标签路径">

<style>
@import url("标签路径")
</style>

• 本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式
• 加载顺序的差别： 当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
• 兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。
• 使用 dom(document object model文档对象模型 )控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为**@import** 不是 dom 可以控制的。

总的来说，Link标签更加灵活和可靠，而@import则更加简洁和方便。

7、说说你对BFC的理解，触发条件有哪些？

BFC的理解？

BFC（块级格式化上下文）是Web页面中的一种CSS渲染机制，它是一个独立的渲染区域，内部的元素布局不会影响到外部元素。

BFC具有以下特性：

1. 内部的元素会在垂直方向上一个接一个地放置，因此BFC内部的元素不会发生重叠。
2. BFC区域的左边与包含块的左边相接触，右边同理。
3. BFC区域的高度由其包含的所有元素的高度计算而来，因此BFC区域内部的元素不会影响到外部元素的布局。
4. FC区域内部的元素会形成一个独立的渲染环境，因此BFC区域内部的元素不会影响到外部元素的样式。

触发条件有哪些？

• 根元素或包含根元素的元素。
• 浮动元素（float不为none）。
• 绝对定位元素（position为absolute或fixed）。
• 行内块元素。元素的 display 为 inline-block；
• 表格单元格。元素的 display为 table-cell，HTML表格单元格默认为该值；
• 弹性元素。display为 flex 或 inline-flex元素的直接子元素；
• 网格元素。display为 grid 或 inline-grid 元素的直接子元素
• overflow不为visible的元素。

8、null，undefined 的区别

首先 undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。它们都是表示没有值的情况。

区别：

• undefined代表的是未定义，null代表的含义是空对象。

• undefined 表示一个变量被声明了，但没有赋值，或者一个对象属性存在，但没有赋值。

• null 表示一个变量被声明了，但是它的值是空的，或者一个对象属性存在，但它的值是空的。

在使用时，通常建议使用 null 来表示空值，而不是 undefined。因为 undefined 可能会导致一些意外的错误，而 null 更明确地表示一个空值。

9、说说css中元素脱离文档流的方式有哪些？定位的方式有哪些以及区别？

一、什么是文档流？

将窗体自上而下分成一行一行，并在每行中按左至右依次排放元素，称为文档流，也成为普通流。

就是HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

二、什么是脱离文档流？

元素脱离文档流之后，将不再文档流中占据空间，而是处于浮动状态(可以理解为是漂浮在文档流的上方)。脱离文档流的元素的定位基于正常的文档流。当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

三、脱离文档流的方式有哪些？

• 使用浮动（float）：可以脱离文档流，使其向左或者向右浮动，可以让其他元素环绕它。
• 使用绝对定位（position：absolute）：因为使用absolute脱离文档流后的元素，是相对于该元素的父类元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。
• 使用固定定位（position：fixed）：完全脱离文档流，相对于浏览器窗口进行定位，不随页面滚动而移动。
• 使用弹性盒子（display：flex）：将元素变成弹性容器，可以通过设置弹性项目的属性来控制其在容器中的位置
• 使用网络布局（display：grid）：将元素变成网格容器，可以通过设置网格项目的属性来控制其在容器中的位置。

10、同步和异步的区别？

同步任务 在主线程上排队执行的任务，只有前一个任务执行完毕之后，才会执行下一个任务

异步任务 不进入主线程，而进入 任务队列 的任务，只有等主线程的任务执行完毕，任务队列 开始通知主线程请求执行任务，该任务才会进入主线程执行。

简单来说，同步是阻塞式的，需要等待操作完成后才能进行下一步操作，而异步是非阻塞式的，不需要等待操作完成就可以进行下一步操作。

11、伪类和伪元素的区别有哪些？ Css3新增了哪些选择器

相同点：

都是属于选择器中的一种，能实现对于页面元素的修饰。

不同点：

• 概念不同：

  • 伪类是用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的，例如鼠标的悬停效果。
  • 伪元素：用于创建一些不在DOM树中的元素，并为其添加样式，例如：向前先后插入元素内容等

• 使用方法不同：

  • CSS3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素，比如::before和::after等伪元素使用双冒号（::），:hover和:active伪类使用单冒号（:）。目前来看有一部分浏览器为了达到一个更好的兼容性的问题，我们的双冒号也可以写成单冒号；但是在一些低版本浏览器里面有些时候还是需要使用双冒号的

• 写法得不同：

  • 伪类使用单冒号（:）表示
  • 伪元素用双冒号（:）表示

CSS3新增选择器有：

• 伪类选择器：

  • :nth-child()
  • :nth-last-child()
  • :nth-of-type()
  • :nth-of-of-type()
  • :first-child() 和 ：last-child()
  • :first-of-type、:last-of-type、:only-child、:only-of-type、:not()

• 伪元素选择器:

  • ::before、::after、::first-letter、::first-line、::selection

12、 说说Promise和async/await的区别是？

promise是es6新增的异步处理函数，主要是为了解决回调函数产生的地狱回调问题，是一种链式回调问题

Promise简单来说就是一个容器，里面保存这未来才会结束的事件的结果

promise是一个对象，从它里面可以获取异步操作的最终状态（成功或失败）

Promise是一个构造函数，对外提供统一的API，自己身上有all，reject ，resolve等方法，原型上有then、catch等方法。

Promise有三种状态,pedding准备中，fullfiilled已完成， rejected失败，状态只能有准备中=>已完成 或 准备中=>失败。

async是es6中新增的异步的一种解决方案，是可以让异步的操作同时执行，async是Generator函数的语法糖，将Generator函数的*替换成了async，将yield替换成了await，async需要配合await使用。

.async函数返回值是一个Promise对象，可以使用.then接受一个回调函数，和Promise的所有操作

await有等待的意思，需等待后面的Promise执行结束才会执行下一步。await后面可以跟Promise和其他类型的数据。

13、说说重排和重绘的区别？触发条件有哪些？

**重排（reflow）和重绘（repaint）**都是浏览器渲染页面时的操作，但它们的含义和触发条件不同。

重排和重绘的区别：

重排是指当页面中的元素发生位置、尺寸、内容等方面的变化时，浏览器需要重新计算元素的位置和大小，然后重新布局整个页面，这个过程称为重排。重排会导致页面的重新渲染，因此会比重绘消耗更多的资源，影响页面的性能。

触发重排的条件包括：

• 页面初次渲染
• 浏览器窗口大小发生变化
• 元素的位置、尺寸、内容等发生变化
• 元素的样式发生变化
• 元素的字体大小发生变化
• 元素的子元素发生变化
• 页面滚动

重绘是指当页面中的元素的样式发生变化时，浏览器只需要重新绘制这些元素的样式，而不需要重新计算元素的位置和大小，这个过程称为重绘。重绘不会影响页面的布局，因此比重排消耗的资源少。

触发重绘的条件包括：

• 元素的样式发生变化
• 元素的背景色、边框等样式发生变化
• 元素的透明度发生变化
• 元素的文本内容发生变化

需要注意的是，重排和重绘是相互关联的，重排会导致重绘，而重绘不一定会导致重排。因此，在编写页面时应尽量减少重排和重绘的次数，以提高页面的性能。

14、 Javascript如何实现继承？

1. 原型继承

   原型链继承是通过将子类的原型指向父类的实例来实现继承的。这种方式的缺点是父类的引用类型属性会被所有子类实例共享，容易造成数据污染。

   function Parent() {this.name = 'parent';
   }Parent.prototype.sayName = function() {console.log(this.name);
   }function Child() {this.age = 18;
   }Child.prototype = new Parent();var child = new Child();
   child.sayName(); // 'parent'
   

2. 构造函数继承

   构造函数继承是通过在子类构造函数中调用父类构造函数来实现继承的。这种方式的缺点是无法继承父类原型上的属性和方法。

   function Parent() {this.name = 'parent';
   }Parent.prototype.sayName = function() {console.log(this.name);
   }function Child() {Parent.call(this);this.age = 18;
   }var child = new Child();
   child.sayName(); // TypeError: child.sayName is not a function
   

3. 组合继承

   组合继承是将原型链继承和构造函数继承结合起来的方式，既可以继承父类原型上的属性和方法，又可以避免引用类型属性共享的问题。

   function Parent() {this.name = 'parent';
   }Parent.prototype.sayName = function() {console.log(this.name);
   }function Child() {Parent.call(this);this.age = 18;
   }Child.prototype = new Parent();
   Child.prototype.constructor = Child;var child = new Child();
   child.sayName(); // 'parent'
   

4. 原型式继承

   原型式继承是通过创建一个空对象作为中介来实现继承的，这个空对象的原型指向父类的原型。

   function createObj(o) {function F() {}F.prototype = o;return new F();
   }var parent = {name: 'parent',sayName: function() {console.log(this.name);}
   };var child = createObj(parent);
   child.sayName(); // 'parent'
   

5. 寄生式继承

   寄生式继承是在原型式继承的基础上，对继承的对象进行扩展，返回一个新的对象。

   function createObj(o) {function F() {}F.prototype = o;return new F();
   }function createChild(parent) {var child = createObj(parent);child.sayName = function() {console.log(this.name);}return child;
   }var parent = {name: 'parent'
   };var child = createChild(parent);
   child.sayName(); // 'parent'
   

6. 寄生组合式继承

   寄生组合式继承是在组合继承的基础上，使用Object.create()方法来优化继承过程，避免调用父类构造函数时创建多余的实例

   function Parent() {this.name = 'parent';
   }Parent.prototype.sayName = function() {console.log(this.name);
   }function Child() {Parent.call(this);this.age = 18;
   }Child.prototype = Object.create(Parent.prototype);
   Child.prototype.constructor = Child;var child = new Child();
   child.sayName(); // 'parent'
   

15、说说什么是严格模式，限制都有哪些？

严格模式是 JavaScript 的一种执行模式，它对代码的执行进行了限制和规范，以避免一些常见的错误和不安全的行为。严格模式可以通过在代码开头添加 "use strict"; 来启用。

启用严格模消除了代码运行的一些不安全之处，保证代码运行的安全。也提高了编译器效率，增加运行速度。

严格模式的限制有？

• 变量必须先声明再使用，否则会抛出错误。
• 禁止使用with语句
• 禁止只要evel函数
• 禁止在函数内部遮盖全局变量
• 禁止删除不可删除的属性。如：delete.Object.prototype
• 函数的参数名不能重复
• 对象不能有同名属性
• this的值不能为null或者是undefined
• 严格模式下eval、argument、function等关键字不能作为变量名或函数名

16、如何快速的让一个打乱一个数组的顺序，比如 var arr = [1,2,3,4,5,6,7,8,9,10]

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.sort(() => {return Math.random() - 0.5;
})
console.log(arr);

17、Vue的自定义指令钩子函数有哪些？你用自定义指令做过什么？

• bind：指令第一次绑定到元素时调用，只调用一次。
• inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
• update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
• componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
• unbind：指令与元素解绑时调用，只调用一次。

18、从A页面跳转到B页面，缓存A组件，从A组件跳转到C组件，取消缓存，如何实现？

可以通过在A组件中使用 keep-alive 组件来实现缓存，然后在从A组件跳转到C组件时，通过在 beforeRouteLeave 钩子中移除A组件的缓存来取消缓存。在从A组件跳转到C组件的时候，使用 router-link 组件，并在 to 属性中指定目标路由

19、Vue2和Vue3中响应式原理及区别？

Vue2和Vue3中的响应式原理都是基于Object.defineProperty实现的。

Vue2中的响应式原理是通过将data对象中的每个属性都转换为getter和setter函数来实现的。当数据发生变化时，setter函数会触发依赖更新，从而更新视图。Vue2中的响应式原理存在一些限制，例如无法监听新增属性、数组的变化需要通过特定的方法触发等。

Vue3中的响应式原理使用了Proxy对象来实现。Proxy对象可以监听对象的所有属性，包括新增属性和删除属性。Vue3中的响应式原理还支持了更细粒度的依赖追踪，可以更准确地判断哪些依赖需要更新。此外，Vue3中还引入了Reactivity API，使得开发者可以更灵活地控制响应式数据的行为。

总的来说，Vue3中的响应式原理相比Vue2更加灵活、高效，可以更好地满足开发者的需求。

20、Vue是如何实现实现权限管理的，按钮级别权限如何实现？

Vue可以通过路由守卫和自定义指令来实现权限管理，其中路由守卫可以控制页面级别的权限，而自定义指令可以控制按钮级别的权限。

在路由守卫中，可以通过beforeEach函数来判断用户是否有权限访问该页面，如果没有权限则跳转到登录页面或者其他提示页面。

---

21、Vue2和Vue3的区别至少说5点

• 响应式系统：
  • vue2中使用Object.defineProperty实现响应式系统。
  • vue3中使用Proxy实现响应式系统。
  • Proxy比Object.defineProperty更高效、更灵活，可以监听数组的变化。
• 性能优化：
  • Vue3在编译器方面进行了优化，使用了静态提示和基于Proxy的响应式系统，使得渲染性更改，同时，Vue3还引入了Tree shaking，可以更好的优化打包后的代码
• 数据和方法的定义：
  • vue2中使用的是选项类型API，Vue3中使用的是组合式API。
• 生命周期：
  • vue3的生命周期钩子函数发生了变化，取消了beforeCreate和created钩子函数，还引入了setup函数。
• 父子传参不同，setup()函数特性
• TypeScript支持：Vue3对TypeScript的支持更加友好，提供了更好的类型推断和类型检查。

22、Vue3中组件通信的流程【父传子，子传父】？

• 1、父组件向子组件传递数据

  • 父组件通过props属性将需要传递的数据传递给子组件，在子组件中定义props属性接收父组件传递的数据
    子组件通过props属性访问父组件传递过来的数据

• 2、子组件向父组件传递数据

  • 子组件通过e m i t 方法触发父组件的事件，子组件在 emit方法触发父组件的事件，子组件在emit方法触发父组件的事件，子组件在emit方法中传递需要传递的数据
    父组件中监听子组件的事件，在监听方法中获取子组件传递过来的数据

• 3、setup中的返回值

  • 在setup函数中定义需要传递的数据或方法返回一个对象或数组
    在子组件中使用props属性获取父组件传递过来的数据，子组件通过setup函数提供的数据或方法来使用

• 4、provide / inject

  • provide在父组件中提供需要传递的数据
    inject在子组件中获取提供的数据
    可以在组件树中遥远的组件之间进行传递

  在Vue3中，父子组件之间的通信需要通过props和$emit方法、setup函数以及provide / inject来进行。这些方式的选择需根据实际情况和项目需求和组织结构而定。需要注意的一点是，过于频繁的组件通信也可能导致应用的耦合度过高，因此，在使用时需要权衡其利弊。

23、Apply/call/bind的原理是什么？

1. 三者都是用来改变this指向的。
2. 三者第一个参数都是this要指向的对象，如果没有这个参数或参数为undefined或null，则默认指向全局window。
3. call和apply在调用时会执行，而bind在调用时会返回一个新的函数，需要进行手动调用。
4. 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
5. bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。

24、说说你对原型和原型链的理解？

每个实例对象上都有一个隐式原型属性（在浏览器中展示效果[[prototype]] 获取对象.__proto__）隐式原型属性指向该对象对应的构造函数的原型对象。当一个对象.属性 时，首先从自身去查找，找到即返回，如果自身没有找到该属性则会沿着__proto__查找对应的原型对象，直到原型链的最顶端object，找到则返回，如果一直没有找到则返回undefined。

• 每个对象都会在其内部初始化一个属性，就是__proto__，当我们访问一个对象的属性时
• 如果这个对象内部不存在这个属性，那么他就会去__proto__里找这个属性，这个__proto__又会有自己的__proto__，于是就这样一直找下去，也就是我们平时所说的原型链的概念。按照标准，__proto__ 是不对外公开的，也就是说是个私有属性
• 关系：instance.constructor.prototype == instance.__proto__

var a = {}
a.constructor.prototype == a.__proto__    

• 特点：
  • JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变
• 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的
• 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象
• 原型：
  • JavaScript的所有对象中都包含了一个 [__proto__] 内部属性，这个属性所对应的就是该对象的原型
  • JavaScript的函数对象，除了原型 [__proto__] 之外，还预置了 prototype 属性
  • 当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [__proto__]。
• 原型链：
  • 当一个对象调用的属性/方法自身不存在时，就会去自己 [__proto__] 关联的前辈 prototype 对象上去找
  • 如果没找到，就会去该 prototype 原型 [__proto__] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”
• 原型特点：
  • JavaScript对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变

25、说说你对ES6中Generator的理解

ES6中的Generator是一种特殊的函数，它可以在执行过程中暂停并返回一个中间结果，然后再次从暂停的位置继续执行。Generator函数通过使用yield关键字来实现暂停和恢复执行。当调用Generator函数时，它会返回一个迭代器对象，通过调用迭代器对象的next()方法，可以让Generator函数继续执行并返回下一个中间结果。

Generator函数的主要优点是可以使异步编程更加简单和直观。通过使用Generator函数，可以将异步操作的回调函数转化为同步的代码风格，从而避免了回调地狱的问题。此外，Generator函数还可以用于实现惰性求值和无限序列等功能。

需要注意的是，Generator函数并不是线程或进程，它只是一种特殊的函数，因此在使用Generator函数时需要注意避免阻塞主线程的执行。

26、说说浏览器事件循环和nodeJs的事件循环的区别？

浏览器事件循环和Node.js的事件循环都是基于事件驱动的模型，但是它们之间还是有一些区别的。

1. 执行环境不同：浏览器事件循环是在浏览器的主线程中执行的，而Node.js的事件循环是在单独的线程中执行的。
2. 定时器实现不同：浏览器事件循环使用的是基于系统时间的定时器，而Node.js使用的是基于事件循环的定时器。
3. 事件触发机制不同：浏览器事件循环中的事件是由用户操作或者浏览器内部事件触发的，而Node.js的事件循环中的事件是由I/O操作或者定时器触发的。
4. 异步I/O实现不同：浏览器事件循环中的异步I/O操作是通过Web API实现的，而Node.js的事件循环中的异步I/O操作是通过libuv库实现的。

总的来说，浏览器事件循环和Node.js的事件循环都是基于事件驱动的模型，但是它们之间的实现细节有所不同。

27、说说你对浏览器缓存机制的理解

浏览器缓存机制是指浏览器在访问网页时，将网页的一些资源（如图片、CSS、JS等）缓存在本地，以便下次访问同一网页时能够更快地加载页面。浏览器缓存机制可以分为两种：强缓存和协商缓存。

强缓存是指浏览器在第一次请求资源时，将资源的过期时间或者最后修改时间记录下来，下次请求时会先判断是否过期或者是否有修改，如果没有则直接从缓存中读取资源，不会向服务器发送请求，从而提高页面的加载速度。

协商缓存是指浏览器在请求资源时，会向服务器发送一个请求，询问服务器该资源是否有更新，如果没有更新则返回304状态码，告诉浏览器可以使用缓存，如果有更新则返回新的资源，浏览器会将新的资源缓存起来。

浏览器缓存机制可以通过设置HTTP响应头来控制，如设置Cache-Control、Expires、Last-Modified、ETag等。合理使用浏览器缓存机制可以有效减少网络请求，提高页面的加载速度，减轻服务器的负担。

28、Methods watch computed区别是什么？

在Vue.js中，watch和computed都是用于监听数据变化的方法，但是它们的作用和使用方法有所不同。

watch方法用于监听某个数据的变化，并在数据变化时执行一些操作。watch方法接受两个参数：要监听的数据和回调函数，回调函数会在数据变化时被调用，可以在回调函数中执行一些操作，比如发生请求、更新DOM等。

computed方法用于计算某个数据的值，并在数据变化时自动更新计算结果。computed方法接受一个函数作为参数，这个函数会返回计算结果。当计算结果所依赖的数据发生变化时，computed方法会自动重新计算结果，并将计算结果缓存起来，知道下一次数据变化时再重新计算。

总的来说，watch方法适用于监听数据变化并执行一些操作。而computed方法使用于计算数据的值并自动更新计算结果。

29、 说说你对Virtual DOM的理解？

传统的DOM操作在更新页面时需要重新计算和渲染整个页面，这样会导致页面更新的性能较低，而且会产生大量的性能瓶颈。而Virtual DOM可以通过比较新旧两个虚拟DOM之间的差异，然后只对需要更新的部分进行操作，从而减少了页面的渲染次数和计算量，提高了页面的渲染性能。

Virtual DOM的实现原理可以简单描述为：

• 每次数据变化后，生成一个新的虚拟DOM树。

• 将新的虚拟DOM树和旧的虚拟DOM树进行比较，找出两个树之间的差异。

• 根据差异，只对需要更新的部分进行DOM操作，从而更新页面。

需要注意的是，由于Virtual DOM是通过JavaScript对象来描述页面结构的，因此它的操作速度非常快。同时，由于Virtual DOM只更新需要更新的部分，因此它可以减少不必要的页面渲染和计算，提高了页面的性能和响应速度。

30、说说你对nextTick的理解和作用？

理解：

nextTick是Vue.js中的一个异步方法，它的作用是在下一个DOM更新周期之后执行指定的回调函数。在Vue.js中，当数据发生变化时，Vue.js会异步的更新DOM，而nextTick方法可以让我们在DOM更新完成之后执行一些操作，例如获取更新后的DOM元素或者执行一些需要在DOM更新之后才能进行的操作。

作用：

nextTick的作用主要有一下几个方面的作用：

• 异步更新DOM：Vue.js的数据更新是异步的，nextTick可以让我们在DOM更新完成之后执行一些操作，避免在DOM更新之前执行操作导致错误。
• 获取更新后的DOM元素：有时候我们需要获取更新后的DOM元素，例如在某些情况下需要获取某个元素的宽度或高度，这时候可以使用nextTick方法来确保获取到的是更新后的DOM元素。
• 执行一些需要在DOM更新之后才能进行的操作：有些操作需要在DOM更新之后才能进行，例如在某个元素上添加事件监听器，这时候可以使用nextTick方法来确保DOM更新完成后再执行操作。

总之，nextTick方法可以让我们在Vue.js的数据更新周期中执行一些需要在DOM更新之后才能进行的操作，避免在DOM更新之前执行操作导致错误。

31、说说你对webpack的理解？

Webpack是一个现代化的JavaScript应用程序打包工具，它可以将多个JavaScript文件、CSS文件、图片等资源打包成一个或多个静态资源文件，以便于在浏览器中加载和使用。

Webpack的主要功能包括模块化管理、代码转换、文件压缩、代码分割、热更新等。

Webpack的核心思想是将应用程序看作是一个依赖关系图，其中每个模块都是一个节点，每个依赖关系都是一条边。Webpack通过分析这个依赖关系图，将所有的模块打包成一个或多个静态资源文件，以便于在浏览器中加载和使用。

Webpack的优点包括：

1. 模块化管理：Webpack支持模块化开发，可以将应用程序拆分成多个模块，方便管理和维护。
2. 代码转换：Webpack支持将ES6、TypeScript等高级语言转换成浏览器可识别的JavaScript代码。
3. 文件压缩：Webpack可以将多个文件压缩成一个或多个静态资源文件，减少网络传输的时间和带宽。
4. 代码分割：Webpack支持将应用程序拆分成多个代码块，按需加载，提高应用程序的性能和用户体验。
5. 热更新：Webpack支持热更新，可以在开发过程中实时更新代码，提高开发效率。

总之，Webpack是一个非常强大的JavaScript应用程序打包工具，可以大大提高应用程序的性能和开发效率

32、谈谈GET和POST的区别？

GET和POST是HTTP协议中常用的两种请求方法，

它们的主要区别在于：

1. 参数传递方式不同： GET请求的参数是通过URL传递的，即将参数拼接在URL后面，例如：http://www.example.com/search?q=keyword。因此，GET请求的参数长度有限制，一般不超过2048个字符。 POST请求的参数是通过请求体传递的，即将参数放在请求体中，例如表单提交。因此，POST请求的参数长度没有限制。
2. 安全性不同： GET请求的参数会被浏览器缓存，也会被服务器日志记录，因此不适合传递敏感信息。 POST请求的参数不会被浏览器缓存，也不会被服务器日志记录，因此适合传递敏感信息。
3. 使用场景不同： GET请求适合用于获取数据，例如查询操作。 POST请求适合用于提交数据，例如表单提交、文件上传等操作。

总之，GET和POST各有优缺点，需要根据具体的业务需求来选择使用哪种请求方法。

33、说说HTTP和HTTPS的区别，HTTPS加密原理是?

HTTP和HTTPS的区别：

• 安全性：HTTP是明文传输，安全性较低，而HTTPS采用SSL/TLS加密传输，安全性更高。
• 端口号：HTTP默认使用80端口，而HTTPS默认使用443端口。
• 证书：HTTPS需要使用数字证书，而HTTP不需要。
• 速度：HTTPS比HTTP慢，因为加密和解密需要消耗一定的时间和资源。

HTTPS加密原理：

HTTPS采用SSL/TLS协议进行加密传输，其加密原理如下：

• 客户端向服务器发起HTTPS请求
• 服务器返回数字证书，包含公钥和证书信息
• 客户端验证证书的合法性，并生成一个随机数作为对称加密的密钥
• 客户端使用服务器的公钥对密钥进行加密，并将加密后的密钥发送给服务器
• 服务器使用私钥对密钥进行解密，得到对称加密的密钥。
• 服务器使用对称加密算法对数据进行加密，并将加密后的数据发送给客户端。
• 客户端使用对称加密算法对数据进行解密，得到原始数据。

34、TCP为什么要三次握手？

三次握手其实就是指建立一个TCP连接时，需要客户端和服务器总共发送3个包。主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备

TCP采用三次握手的方式建立连接，主要是为了确保通信双方的可靠性和数据的完整性。

第一次握手：客户端向服务器发送一个SYN（同步）请求，请求建立连接。

第二次握手：服务器收到请求后，回复一个SYN+ACK（同步+确认）的响应，表示可以建立连接。

第三次握手：客户端收到服务器的响应后，再次发送一个ACK（确认）请求，表示连接已经建立。

通过三次握手，可以确保通信双方都能够正常收发数据，并且数据的完整性得到了保障。如果只有两次握手，可能会出现一些异常情况，例如客户端发送的SYN请求在网络中丢失，导致服务器一直等待连接，浪费资源。因此，采用三次握手可以避免这些问题，保证通信的可靠性和稳定性。

35、 说说Proxy代理的原理？

Proxy代理是一种网络技术，它充当客户端和服务器之间的中间人，代理服务器接收客户端的请求并将其转发给目标服务器，然后将目标服务器的响应返回给客户端。

Proxy代理的原理如下：

1. 客户端向代理服务器发送请求，请求中包含目标服务器的地址和端口号。
2. 代理服务器接收到请求后，会检查请求的合法性，并根据请求的内容和规则，决定是否将请求转发给目标服务器。
3. 如果代理服务器决定将请求转发给目标服务器，它会建立与目标服务器的连接，并将客户端的请求转发给目标服务器。
4. 目标服务器接收到请求后，会处理请求并返回响应。
5. 代理服务器接收到目标服务器的响应后，会将响应返回给客户端。

通过使用Proxy代理，客户端可以通过代理服务器访问目标服务器，而不必直接连接目标服务器。这种方式可以提高网络安全性，减少网络拥塞，加快数据传输速度，并且可以隐藏客户端的真实IP地址。

36、说说内存泄漏的理解？内存泄漏的情况有哪些?

程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。

对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。

不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。

内存泄漏的情况有哪些？

• 全局变量过多。通常是变量未定义或者胡乱引用了全局变量
• 闭包。未手动解决闭包遗留的内存引用。定义了闭包就要消除闭包带来的副作用。
• 事件监听未被移除
• 缓存。建议所有缓存都设置好过期时间。
• 文件描述符泄漏：在程序中打开文件时，如果没有正确关闭文件，就会导致文件描述符泄漏，从而导致内存泄漏。
• 循环引用：如果两个或多个对象之间存在循环引用，即它们互相引用对方，但是没有其他对象引用它们，这些对象就无法被垃圾回收器回收，从而导致内存泄漏。
• 资源泄漏：如果程序中使用了其他资源，如数据库连接、网络连接等，但是没有正确释放这些资源，就会导致资源泄漏，从而导致内存泄漏。

37、说说对盒子模型的理解？

盒子模型是指在网页中，每个元素都被看作是一个矩形的盒子，这个盒子由四个边框、内边距、外边距和内容区域组成。这个模型是用来描述网页中元素的布局和定位的。

具体来说，盒子模型包括以下几个部分：

1. 内容区域（content）：元素的实际内容，包括文本、图片、视频等。 2. 内
2. 边距（padding）：内容区域与边框之间的距离，可以设置上下左右四个方向的内边距。
3. 边框（border）：包围内容区域和内边距的线条，可以设置边框的宽度、样式和颜色。
4. 外边距（margin）：边框与相邻元素之间的距离，可以设置上下左右四个方向的外边距。

盒子模型的理解对于网页布局和样式的设计非常重要，可以通过设置不同的属性值来控制元素的大小、位置和间距等。同时，盒子模型也是CSS中的一个重要概念，掌握盒子模型的原理和应用可以帮助我们更好地理解和使用CSS。

38、Css的选择器有哪些？优先级?哪些可以继承？

CSS选择器主要有以下几种：

1. 元素选择器：通过元素名称来选择元素，如p、div、h1等。
2. 类选择器：通过类名来选择元素，以"."开头，如.class。
3. ID选择器：通过ID来选择元素，以"#"开头，如#id。
4. 属性选择器：通过元素的属性来选择元素，如[type=“text”]。
5. 伪类选择器：通过元素的状态来选择元素，如:hover、:active、:focus等。
6. 伪元素选择器：通过元素的某个部分来选择元素，如::before、::after等。

CSS选择器的优先级由高到低分别为：

!important > 行内样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器 > 通配符选择器。

可以继承的CSS属性包括：

color、font-family、font-size、font-style、font-weight、line-height、text-align、text-decoration、visibility等。

39、元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

元素水平垂直居中的方法有以下几种：

1. 使用Flexbox布局：将父元素设置为display: flex;，并使用align-items和justify-content属性来将子元素水平垂直居中。
2. 使用绝对定位：将父元素设置为相对定位，子元素设置为绝对定位，并使用top、bottom、left、right属性来将子元素水平垂直居中。
3. 使用transform属性：将父元素设置为相对定位，子元素设置为绝对定位，并使用transform属性来将子元素水平垂直居中。

如果元素不定宽高，可以使用以上方法中的第二种或第三种方法，同时将子元素的宽高设置为100%。这样子元素会自适应父元素的宽高，并且仍然可以水平垂直居中。

40、怎么理解回流跟重绘？什么场景下会触发？

对回流和重绘的理解:

**回流（reflow）和重绘（repaint）**是浏览器渲染页面时的两个重要概念。

回流指的是当页面中的元素发生位置、大小等属性的变化时，浏览器需要重新计算元素的位置和大小，然后重新布局整个页面，这个过程就是回流。回流会导致页面的重新渲染，因此会比重绘更加耗费性能。

重绘指的是当页面中的元素的样式发生变化时，浏览器只需要重新绘制这些元素的样式，而不需要重新计算元素的位置和大小，这个过程就是重绘。重绘不会导致页面的重新布局，因此比回流的性能消耗要小。

在什么场景下会触发回流?

• 页面首次渲染时； -
• 浏览器窗口大小发生变化时；
• 元素的位置、大小、内容发生变化时；
• 元素的样式发生变化时；
• 获取某些属性（如 offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight）时。

在什么场景下会触发重绘?

• 元素的样式发生变化时；
• 元素的背景色、文本颜色、边框颜色等颜色属性发生变化时；
• 元素的不透明度发生变化时。

因此，在开发过程中，我们应该尽量避免频繁触发回流和重绘，可以采取以下措施：

• 尽量减少 DOM 操作；
• 将需要多次操作的 DOM 元素缓存起来，避免重复获取；
• 将需要多次操作的样式集中在一起，避免多次触发重绘；
• 使用 CSS3 动画代替 JavaScript 动画，因为 CSS3 动画可以利用硬件加速，性能更好；
• 使用虚拟列表等技术，避免一次性渲染大量数据。

41、什么是响应式设计？响应式设计的基本原理是什么？如何做？

什么式响应式设计？

指在同一页面在不同屏幕尺寸下有不同的布局。

响应式设计是一种网页设计方法，它可以使网站在不同设备上（如桌面电脑、平板电脑、手机等）呈现出最佳的视觉和用户体验。响应式设计的基本原理是使用弹性网格布局、弹性图片和媒体查询等技术，根据不同设备的屏幕大小和分辨率，自动调整网页的布局和内容，以适应不同设备的屏幕大小和分辨率。

响应式设计的基本原理是什么？

1. 媒体查询
2. 流体布局（float）
3. 弹性布局（flex）
4. 通过 JavaScript、JQuery 进行判断来显示不同的布局页面
5. Bootstrap 等第三方框架 。 BootStrap的官网
6. rem
7. vw/vh
8. 百分比

响应式设计可以提高网站的可访问性和用户体验，同时也可以减少开发和维护成本。

42、如果要做优化，CSS提高性能的方法有哪些？（Css性能优化有哪些常见的方法？具体如何实现？）

1. 压缩CSS文件：使用CSS压缩工具可以去除不必要的空格、注释和换行符，减小文件大小，提高加载速度。
2. 使用CSS Sprites：将多个小图片合并成一张大图，减少HTTP请求次数，提高加载速度。
3. 避免使用@import：@import会导致浏览器多次请求CSS文件，影响加载速度，建议使用标签引入CSS文件。
4. 避免使用过多的CSS选择器：选择器越复杂，匹配元素的时间就越长，建议尽量简化选择器。
5. 避免使用!important：!important会覆盖其他样式，导致样式冲突，建议使用更具体的选择器来覆盖样式。
6. 使用缩写属性：缩写属性可以减少CSS代码量，提高加载速度。
7. 避免使用CSS表达式：CSS表达式会导致页面重绘，影响性能，建议使用JavaScript来实现相应的功能。
8. 将CSS放在标签中：将CSS放在标签中可以让浏览器更快地加载CSS文件，提高页面渲染速度。
9. 使用外部CSS文件：将CSS代码放在外部文件中可以让浏览器缓存CSS文件，提高加载速度。
10. 使用CSS预处理器：CSS预处理器可以让CSS代码更加简洁、易于维护，提高开发效率。
11. 使用字体图标：字体图标可以减少HTTP请求的次数，从而提高页面加载速度。
12. 使用CSS3动画：CSS3动画可以代替JavaScript动画，从而减少JavaScript的运行时间，提高页面性能。
13. 避免使用过多的嵌套：嵌套层级过多会导致选择器的匹配过程变慢，应该尽量避免使用过多的嵌套。

43、对前端工程师这个职位是怎么样理解的？它的前景会怎么样？

我对前端工程师的理解是，前端工程师是负责开发和维护网站和应用程序前端部分的专业人员。他们使用HTML、CSS和JavaScript等技术来创建用户界面和交互式体验，同时与后端开发人员合作确保应用程序的完整性和性能。

前端工程师的前景非常好，随着互联网和移动设备的普及，越来越多的公司需要拥有一个优秀的网站和应用程序来吸引和保留客户。此外，随着技术的不断发展，前端工程师需要不断学习新的技术和工具，以保持竞争力。因此，前端工程师是一个非常有前途的职业。

44、说说JavaScript中的数据类型？存储上的差别？

JavaScript中的数据类型包括基本数据类型和引用数据类型。

基本数据类型（原始类型）包括——（存储在栈内存中）：

• 数字类型（Number）：表示数字，包括整数和浮点数
• 字符串类型（String）：表示文本字符串
• 布尔类型（Boolean）：表示真或假
• 空类型（Null）：表述空值
• 未定义（undefined）：表示未定义的值
• 符号（Symbol）：唯一的标识符

引用数据类型（对象类型）包括——（存储在堆内存中）：

• 对象类型（Object）：表示复杂数据类型，包括数组、函数、日期、正则表达式等。
• 数组类型（Array）：表示一组有序的数据。
• 函数类型（Function）：表示可执行的代码块
• 正则表达式（RegExp）：用于匹配字符串的模式

存储的差别？

• 基本数据类型存储在栈内存中，而引用数据类型存储在堆内存中。

• 栈内存是一种临时存储区域，用于存储基本数据类型的值和引用数据类型的引用地址。堆内存是一种动态分配的内存区域，用于存储引用数据类型的实际数据。

• 当一个变量存储的是基本数据类型时，它的值直接存储在栈内存中；当一个变量存储的是引用数据类型时，它的值是一个指向堆内存中实际数据的地址。

45、 请简单叙述js数据类型判断的方法有哪些？（判断数据类型的方法有哪些？）

• typeof运算符：可以判断一个变量的数据类型，返回值为字符串类型，包括"number"、“string”、“boolean”、“undefined”、“object”、“function”、“symbol”。
• instanceof运算符：可以判断一个对象是否属于某个类，返回值为布尔类型。
• Object.prototype.toString方法：可以判断一个对象的具体类型，返回值为字符串类型，格式为"[object 类型]“，其中类型包括"Number”、“String”、“Boolean”、“Undefined”、“Null”、“Object”、“Array”、“Function”、"RegExp"等。
• Array.isArray方法：可以判断一个对象是否为数组类型，返回值为布尔类型。
• isNaN方法：可以判断一个值是否为NaN，返回值为布尔类型。
• null和undefined的判断：null表示空对象指针，undefined表示未定义的变量或属性，可以使用"=“或者”!"运算符进行判断。

46、说说你对闭包的理解？闭包使用场景？

什么是闭包？

闭包是指在一个函数内部定义另一个函数，并且这个内部函数可以访问外部函数的变量和参数，即使外部函数已经执行完毕，内部函数仍然可以访问这些变量和参数。闭包可以用来创建私有变量和方法，以及实现函数式编程中的柯里化和高阶函数等功能。

闭包的使用场景包括：

1. 创建私有变量和方法：通过在函数内部定义变量和方法，并返回一个函数，可以实现对这些变量和方法的封装，从而创建私有变量和方法。
2. 实现柯里化：通过返回一个函数，可以将一个多参数函数转化为一个单参数函数，从而实现柯里化。
3. 实现高阶函数：通过将函数作为参数或返回值，可以实现高阶函数，从而实现函数式编程的一些功能。
4. 缓存数据：通过在闭包内部定义一个缓存对象，可以将一些计算结果缓存起来，从而提高程序的性能。
5. 事件处理：通过在闭包内部定义一个事件处理函数，并返回该函数，可以实现对事件的封装和管理。
6. setTimeOut传参
7. 回调
8. 为节点循环绑定click事件

47、bind、call、apply 有什么区别？如何实现一个bind方法?

三者都可以改变函数的 this 对象指向
三者第一个参数都是 this 要指向的对象，如果如果没有这个参数或参数为 undefined 或 nu11，则默认指向全局 window
三者都可以传参，但是 apply 是数组，而 cal1 是参数列表，且 apply 和 ca1 是一次性传入参数，而 bind
可以分为多次传入
bind 是返回绑定this之后的函数， apply 、 call 则是立即执行

如何实现一个bind？

• 修改this指向
• 动态传递参数
• 兼容new关键字

48、Javascript本地存储的方式有哪些？区别及应用场景？

JavaScript本地存储的方式有以下几种：

• Cookie：
  • Cookie是一种小型文本文件，可以存储在用户的计算机上。Cookie的大小有限制，一般为4KB，可以通过设置过期时间来控制Cookie的存储时间。Cookie可以在浏览器和服务器之间传递数据，但是由于Cookie存储在用户的计算机上，所以存在被篡改的风险。
  • 应用场景：适用于存储少量的数据，如用户的登录信息、购物车信息等。
• Web Storage：
  • Web Storage包括localStorage和sessionStorage，它们都是HTML5新增的API。localStorage和sessionStorage都可以存储大量的数据，localStorage的数据不会过期，而sessionStorage的数据只在当前会话中有效。localStorage和sessionStorage都只能存储字符串类型的数据，但可以通过JSON.stringify和JSON.parse方法将对象转换为字符串进行存储。
  • 应用场景：适用于存储大量的数据，如用户的个人信息、应用程序的配置信息等。
• IndexedDB：
  • IndexedDB是一种浏览器本地数据库，可以存储大量的结构化数据。IndexedDB使用异步API进行操作，支持事务和索引，可以通过索引进行高效的查询。IndexedDB的数据可以在多个页面之间共享，但是需要注意数据的同步问题。
  • 应用场景：适用于存储大量的结构化数据，如离线应用程序、浏览器扩展等。
• File API：
  • File API可以让JavaScript读取和写入本地文件，可以将数据存储在本地文件中。File API可以读取和写入文本文件、二进制文件和图片等文件类型。
  • 应用场景：适用于需要将数据存储在本地文件中的应用程序，如离线应用程序、浏览器扩展等。

不同的存储方式适用于不同的场景，需要根据具体的需求选择合适的存储方式

49、请叙述Vue2和Vue3的diff算法的区别？

Vue2和Vue3的diff算法有以下几点区别：

1. Vue2使用的是双指针算法，而Vue3使用的是单指针算法。Vue2的双指针算法需要同时遍历新旧节点，而Vue3的单指针算法只需要遍历新节点，可以减少一半的遍历次数。
2. Vue3的diff算法采用了全量更新策略，即每次更新都会重新渲染整个组件树，而Vue2的diff算法采用了增量更新策略，只会更新发生变化的部分。全量更新策略可以减少diff算法的复杂度，提高渲染性能。
3. Vue3的diff算法引入了静态标记和动态标记的概念，可以更好地处理静态节点和动态节点的更新。静态节点是指在组件渲染过程中不会发生变化的节点，动态节点是指会发生变化的节点。Vue3会对静态节点进行标记，避免重复渲染，提高渲染性能。
4. Vue3的diff算法对于列表渲染的优化更加明显。Vue3会对列表中的节点进行缓存，避免重复创建和销毁节点，提高渲染性能。

总的来说，Vue3的diff算法在性能上有很大的提升，特别是在处理大型组件树和列表渲染时更加优秀。

50、请简单叙述你对作用域链得理解?

• 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的
• 简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

51、Vue3中的生命周期函数的变化以及含义？

Vue3中的生命周期函数有所变化，主要是为了更好地支持Composition API和优化性能。以下是Vue3中的生命周期函数及其含义：

• beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。在这个阶段，实例的属性和方法还没有被创建。
• created：实例已经创建完成之后被调用。在这个阶段，实例的属性和方法已经被创建，但是还没有被挂载到DOM上。
• beforeMount：在挂载开始之前被调用。在这个阶段，模板已经编译完成，但是还没有被渲染成DOM。
• mounted：实例挂载之后被调用。在这个阶段，实例已经被挂载到DOM上，可以访问到DOM元素。
• beforeUpdate：数据更新之前被调用。在这个阶段，实例的数据已经被更新，但是DOM还没有被重新渲染。
• updated：数据更新之后被调用。在这个阶段，实例的数据已经被更新，并且DOM已经被重新渲染。
• beforeUnmount：实例卸载之前被调用。在这个阶段，实例还没有被卸载，但是已经被从DOM中移除。
• unmounted：实例卸载之后被调用。在这个阶段，实例已经被卸载，DOM元素也已经被移除。

需要注意的是，Vue3中去掉了beforeDestroy和destroyed两个生命周期函数，取而代之的是beforeUnmount和unmounted。这是因为Vue3中使用了更加高效的卸载机制，可以在不需要销毁实例的情况下卸载组件，从而提高了性能。

52、Vue3中自定义指令生命周期的变化及含义？

Vue3中自定义指令的生命周期相比于Vue2有所变化，主要包括以下几个：

• bind 生命周期被重命名为 beforeMount
  在 Vue3 中，bind 生命周期被重命名为 beforeMount，表示指令和组件实例的挂载准备工作已经完成，但是尚未挂载到页面上。

• update 生命周期被重命名为 mounted
  在 Vue3 中，update 生命周期被重命名为 mounted，表示指令和组件已经挂载到页面上，此时可以访问 DOM 节点。

• componentUpdated 生命周期被重命名为 updated
  在 Vue3 中，componentUpdated 生命周期被重命名为 updated，表示组件已经更新完毕，可以访问 DOM 节点。

• unbind 生命周期被重命名为 beforeUnmount
  在 Vue3 中，unbind 生命周期被重命名为 beforeUnmount，表示指令和组件即将被卸载。

这些生命周期的变化主要是为了和组件生命周期保持一致，方便开发者理解和使用自定义指令。

在使用自定义指令时，我们可以根据具体的场景选择不同的生命周期钩子函数来处理指令的功能。比如，在 mounted 钩子函数中可以访问 DOM 节点，可以用来操作 DOM，而在 updated 钩子函数中可以对组件进行更新操作等。

需要注意的是，Vue3 中的自定义指令也可以通过使用 watchEffect 和 watch 等函数来实现响应式数据的更新，这也是 Vue3 中响应式系统的一大特点。

53、Vue3中的组合式Api有哪些？ 和Vue2的Options Api又什么不同?

Vue3中的组合式API包括以下几个：

1. reactive：将一个普通对象转换为响应式对象。
2. ref：创建一个响应式的基本数据类型，如数字、字符串等。
3. computed：创建一个计算属性。
4. watch：监听一个响应式对象的变化。
5. provide/inject：用于跨层级传递数据。
6. onMounted/onUpdated/onUnmounted：用于在组件生命周期中执行操作。
7. toRefs：将一个响应式对象转换为普通对象，但保留其属性的响应式性。

与Vue2的Options Api有什么不同？

与Vue2的Options API相比，Vue3的组合式API更加灵活和可组合。Options API将组件的逻辑分散在不同的选项中，难以维护和重用。而组合式API将组件的逻辑封装在一个函数中，可以更好地组织和重用代码。此外，组合式API还可以更好地支持TypeScript等类型检查工具，提高代码的可维护性。

54、如何让一个盒子水平垂直居中,有哪些方法越多越好？

• 使用flex布局：将父元素设置为display：flex，并使用justify-content：center和align-items：center属性将子元素水平垂直居中。
• 使用绝对定位：将父元素设置为相对定位，子元素设置为绝对定位，并使用top、bottom、left、right属性将子元素水平垂直居中
• 使用transform属性：将父元素设置为相对定位，子元素设置为绝对定位，并使用transform属性将子元素水平垂直居中。例如：可以设置transform：translate（-50%，-50%）；将子元素向左上方移动50%的宽度和高度。
• 使用表格布局：将父元素设置为display：table；并将子元素设置为display：table-cell；使用vertical-align：middle；将子元素垂直居中，使用text-align：center；将子元素水平居中。
• 使用grid布局：将父元素设置为display：grid；并使用justify-content: center;和align-items: center;属性将子元素水平垂直居中。
• 使用calc函数：将子元素的margin设置为calc（50%-子元素宽度/2）和calc（50%-子元素高度/2）.这将使子元素水平垂直居中。

55、简单说一下什么是事件代理？

事件代理也称为事件委托。使JavaScript中常用绑定事件的常用技巧。

事件代理是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。

事件代理的原理是DOM元素的事件冒泡。

事件流的会经过三个阶段：捕获阶段->目标阶段->冒泡阶段。而事件为委托就是在冒泡阶段完成的。

• 捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
• 目标阶段：在目标节点上触发，称为“目标阶段”
• 冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。

事件委托（事件代理）的优点？

• 减少整个页面所需的内存，提升整体性能。
• 动态绑定，减少重复工作

但是使用事件委托也是有局限性：

• focus、blur这些事件没有事件冒泡机制，所以无法进行委托绑定事件
• mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的

56、什么是防抖和节流？有什么区别？如何实现？

什么是防抖和节流：

防抖：在用户多次触发事件，当用户停止触发事件，将事件执行一次。等待一段时间。
节流：在用户多次触发事件，会在多次触发的过程中，间隔执行事件。按照一定的频率执行。

区别：

相同点：

都可以通过setTimeOut实现，目的都是降低回调执行效率，节省计算资源

不同点：

函数防抖，在一段连续操作结束后，处理回调，利用clearTimeOut和setTimeOut实现。

函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。

函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次。