项目优化

1.打包体积过大怎么优化的？

要优化前端打包体积过大的问题，可以考虑以下几个方面的优化措施：
代码拆分（Code Splitting）：使用工具如Webpack或Rollup等，将代码拆分成多个较小的模块，只加载当前页面所需的模块。这样可以减少首次加载的体积，提高页面加载速度。
按需加载（Lazy Loading）：将不常用或首屏不必要的模块延迟加载，只在需要时再进行加载。这样可以减少首屏加载的体积，提高页面的响应速度。
第三方库优化：如果项目中使用了大量的第三方库，可以考虑按需引入，只引入需要的模块或剔除不必要的功能。也可以使用替代库或自行实现一些功能，以减少第三方库的依赖。
图片优化：对图片进行压缩和合理的格式选择，可以减小图片的体积。使用图片压缩工具、选择适当的压缩算法、使用WebP或AVIF等更高效的图片格式，都可以有效减少图片的大小。
代码优化：优化代码的写法和结构，去除冗余的代码、无用的依赖，减少重复的代码。使用工具如Tree Shaking、Minification等来简化和精简代码。
资源压缩：对CSS、JavaScript等静态资源进行压缩，去除空格、注释和不必要的字符，减小资源的体积。
懒加载和分片预加载：对于长页面或包含大量图片的页面，可以使用懒加载和分片预加载技术，延迟加载页面的其他部分，提高初始加载速度。
缓存策略：合理利用浏览器的缓存机制，对经常不变的静态资源进行缓存，减少重复的下载请求。
服务端渲染（Server-Side Rendering）：对于大型应用或对SEO友好性要求较高的应用，考虑使用服务端渲染技术，减少客户端的初始加载体积。
以上是一些常见的前端打包体积优化的方法，可以根据具体项目需求和情况选择合适的优化策略。同时，定期进行代码审查和性能分析，可以帮助发现和解决潜在的性能问题。

2.首屏渲染减少白屏时间怎么优化的？

要减少前端首屏渲染的白屏时间，可以考虑以下几个优化方案：
代码拆分和按需加载：将页面所需的关键代码拆分成多个较小的模块，并将非关键代码延迟加载。这样可以首先加载页面渲染所需的关键代码，减少白屏时间。
资源预加载：使用预加载技术，提前加载页面所需的关键资源，如CSS、JavaScript、字体文件、图片等。可以使用 <link rel="preload">，<link rel="prefetch">，或者使用<script>标签的async或defer属性来进行资源预加载。
骨架屏（Skeleton Screen）：在页面加载过程中，可以使用骨架屏填充页面的主要结构，给用户一种页面正在加载的反馈。这样可以减少白屏时间的感知。
服务端渲染（Server-Side Rendering）：使用服务端渲染技术，将部分或全部页面内容在服务端完成渲染，然后再将渲染好的HTML返回给客户端。这样可以在客户端加载过程中，提供一个有内容的页面，减少白屏时间。
资源优化：对CSS进行内联，避免阻塞渲染。将JavaScript放在页面底部或使用async或defer属性，以避免阻塞页面渲染。对图片进行压缩和懒加载，减小页面的加载体积。
HTTP/2和CDN加速：使用HTTP/2协议来提高资源加载的效率。同时使用CDN加速，将静态资源部署到离用户较近的服务器上，减少网络延迟。
压缩代码和资源：对CSS、JavaScript等静态资源进行压缩，去除空格、注释和不必要的字符，减小资源的大小，提高加载速度。
缓存策略：合理设置缓存策略，使用HTTP缓存机制，将静态资源缓存在客户端，减少重复的请求。
通过采取上述优化方案，可以减少前端首屏渲染的白屏时间，提高用户的页面加载体验。同时，还可以使用性能分析工具和浏览器开发者工具来检测和定位性能瓶颈，进一步优化页面加载速度。

3.Vue

1.请说一下vue2和vue3的区别？哪些不同？

Vue 3 相对于 Vue 2，有以下几个主要的区别和不同之处：
性能提升：Vue 3 进行了重写和优化，性能相较于 Vue 2 有所提升。Vue 3 使用了 Proxy 对象作为数据劫持的实现方式，相比 Vue 2 的 Object.defineProperty，有更好的性能表现。
Composition API：Vue 3 引入了 Composition API，这是一种基于函数的 API，提供了更灵活和组合性的方式来组织和复用组件逻辑。相比于 Vue 2 的 Options API，Composition API 更加直观、可读性更高，并且更好地支持 TypeScript。
更好的 TypeScript 支持：Vue 3 对 TypeScript 的支持有所增强，包括更好的类型推断和类型定义，使得在开发过程中能够更早地捕获错误和提供更好的 IDE 支持。
Teleport：Vue 3 引入了 Teleport 组件，用于更灵活地移动组件的渲染位置。它可以将组件的内容渲染到任意的 DOM 节点中，而不仅仅是当前组件所在的位置。
Fragment 和 Portals：Vue 3 支持使用 Fragment（占位符）来包裹多个子元素，并且引入了 Portals，可以将组件的内容渲染到任意的 DOM 层级中，提供了更多的灵活性。
缩小包体积：Vue 3 在代码方面进行了优化，使用了更高效的编译器和更小的运行时，使得打包体积相对较小。
需要注意的是，虽然 Vue 3 带来了许多改进和新特性，但在迁移现有项目时需要进行一定的工作，因为 Vue 3 在一些语法和 API 上与 Vue 2 存在一些不兼容的变化。因此，在选择使用 Vue 2 还是 Vue 3 时，需要权衡项目需求、迁移成本和生态支持等因素。

2. 自定义指令做过吗，有哪些场景？

作为AI助手，我没有实际经验，但是我可以提供关于自定义指令的一些信息。
在Vue中，自定义指令是一种特殊的指令，允许你在DOM元素上添加自定义行为。自定义指令可以用于处理DOM事件、操作DOM元素、修改元素样式等。
下面是一些常见的自定义指令的应用场景：
表单验证：自定义指令可以用于表单验证，监听输入框的输入，检查输入的内容是否符合特定的规则，并给出相应的提示。
权限控制：自定义指令可以用于根据用户的权限动态显示或隐藏某些DOM元素。通过自定义指令，可以根据用户角色或权限设置元素的可见性。
Lazy Load：自定义指令可以用于图片的延迟加载。当图片进入可视区域时，通过自定义指令动态加载图片，提高页面的加载速度。
拖拽排序：自定义指令可以用于实现拖拽排序的功能。通过自定义指令，可以监听元素的拖拽事件，获取拖拽的位置信息，并实现元素的位置变换。
动画效果：自定义指令可以用于实现动画效果。通过自定义指令，可以监听元素的进入或离开动画事件，并添加相应的CSS类或样式，实现动画效果。
以上只是一些常见的应用场景，实际上，自定义指令的应用是非常灵活的，可以根据项目的需求进行扩展和定制。
使用自定义指令可以提高代码的可维护性和可复用性，将一些常见的交互行为或样式封装成指令，方便在多个组件之间共享和复用。

3.插槽用过吗，怎么用的？

是的，我了解Vue中的插槽。在Vue中，插槽（Slot）是一种组件间的内容分发机制，用于将父组件中的内容传递给子组件进行渲染。
插槽的使用方式如下：
单个插槽：
在父组件中，通过在组件标签内部插入内容，可以将这些内容作为子组件的插槽内容进行渲染。
在子组件中，使用<slot>标签作为插槽的占位符，这样父组件传递的内容就会被插入到对应的插槽位置。
具名插槽：
可以给插槽定义一个名称，在父组件中通过<template v-slot:name>或<template #name>来传递内容到具名插槽。
在子组件中，使用<slot name="name">来指定插槽的名称，这样对应名称的插槽内容就会被渲染。
作用域插槽：
可以将数据从父组件传递到子组件的插槽中，子组件可以通过插槽的作用域来使用这些数据。
在父组件中，使用<template v-slot:name="slotProps">或<template #name="slotProps">将数据传递给插槽。
在子组件中，使用<slot name="name" :data="slotProps.data">来接收传递的数据，并在插槽中使用。
使用插槽可以增强组件的灵活性和复用性。父组件可以将不同的内容传递给子组件，子组件可以根据插槽的内容进行渲染。插槽的使用方式可以根据具体需求和场景进行灵活组合。
需要注意的是，Vue 3 中的插槽语法有所变化，具体使用方式可以参考Vue官方文档中对应版本的文档进行了解。

4.webpack和vite的区别？

Webpack和Vite都是前端构建工具，但它们在设计和使用上有一些区别。下面是关于Webpack和Vite的区别以及如何回答相关问题的建议：

1. 构建速度：Vite相对于Webpack具有更快的冷启动和热更新速度。Vite利用了ES模块的特性，以原生ES模块的方式加载代码，避免了繁琐的构建和打包过程，从而提供了更快的开发体验。
2. 开发模式和生产模式：Webpack在开发和生产模式之间有明显的区分，需要在配置中进行不同的设置。而Vite在开发模式下使用本地服务实时构建，并且不需要将所有代码打包成一个或多个bundle，而是通过原生ES模块的方式直接加载。
3. 配置复杂性：Webpack的配置相对复杂，需要通过配置文件进行详细的配置。Vite的配置相对简单，采用基于约定的配置方式，减少了配置的繁琐性。
4. 插件生态系统：Webpack拥有庞大的插件生态系统，可以通过各种插件来扩展其功能。Vite在更早的阶段，插件生态系统相对较小，但随着其逐渐流行，插件生态也在不断增长。
   面试时，你可以根据上述区别提供如下回答：
   "Webpack和Vite都是前端构建工具，但它们在设计和使用上有一些区别。Vite相对于Webpack具有更快的冷启动和热更新速度，这得益于Vite利用了ES模块的特性以及原生ES模块的加载方式。另外，Vite的配置相对简单，采用了基于约定的配置方式，相比Webpack的复杂配置更加友好。然而，Webpack拥有更为庞大的插件生态系统，可以通过各种插件来进行功能扩展。根据具体项目需求和开发场景，我们可以选择Webpack或Vite来满足项目的构建和开发需求。"
   除了以上的区别，你还可以进一步扩展回答，比如谈到Webpack具有更广泛的应用和更丰富的功能，而Vite则更适合在小型项目或原型开发中使用，或者提及到Vite的支持Vue 3中的新特性，等等。根据个人的经验和实际项目使用情况，可以更加具体地回答问题。

5.从无到有怎么构建一个前端项目？需要考虑哪些？

构建一个前端项目需要考虑以下几个方面：

1. 项目需求和目标：明确项目的需求和目标，包括功能、设计、技术要求等。这有助于确定项目的规模和范围，并为后续的决策提供指导。
2. 技术选型：选择适合项目需求的技术栈，包括前端框架、UI库、构建工具等。考虑团队的经验和技术栈的生态，综合评估选择最合适的技术。
3. 项目结构和组织：设计良好的项目结构，根据功能模块划分目录和文件，遵循一致的代码风格和命名规范。可考虑使用一些脚手架工具来快速生成项目结构。
4. 构建工具和环境搭建：选择合适的构建工具如Webpack或Vite，并进行相应的配置。搭建开发环境、测试环境和生产环境，确保项目的可持续开发和交付。
5. 版本控制和团队协作：使用版本控制系统（如Git）管理代码，建立团队协作流程，确保团队成员可以高效地协同开发。
6. 页面设计和交互：设计页面结构、UI元素和交互效果，考虑用户体验和响应式设计，制定设计规范和样式库。
7. 数据管理和接口对接：考虑如何管理项目中的数据，选择合适的状态管理库如Vuex或Redux。与后端开发人员对接，定义接口规范和数据格式。
8. 性能优化和安全性：优化页面加载速度、减少资源体积，考虑缓存策略和压缩技术。确保项目的安全性，防止常见的安全漏洞。
9. 测试和调试：编写单元测试和集成测试，使用调试工具和日志记录来提高代码质量和排查问题的效率。
10. 部署和维护：配置持续集成和持续部署流程，确保项目能够高效地部署上线。监控项目的运行状态，及时修复bug和进行功能扩展。
    以上是构建一个前端项目时需要考虑的一些方面。具体的流程和步骤可能因项目的规模、技术需求和团队的实际情况而有所差异。在实施过程中，可以根据项目的具体需求进行调整和优化。

6.v-if和v-for优先级？

在Vue中，v-for指令的优先级比v-if指令的优先级更高。这意味着，如果同时在同一个元素上使用了v-if和v-for指令，v-for指令会先执行，然后v-if指令会基于v-for的结果进行条件判断。
这个优先级顺序是由Vue的编译器决定的。在编译过程中，Vue首先会对v-for指令进行处理，生成对应的虚拟节点。然后，在处理到v-if指令时，Vue会对v-if指令关联的虚拟节点进行条件判断。
以下是一个示例，展示了v-if和v-for指令的优先级顺序：

<div>
  <div v-for="item in items" v-if="item.isActive">{{ item.name }}</div>
</div>

在上述示例中，v-for指令会先遍历items数组生成对应的虚拟节点，然后v-if指令会基于v-for的结果对虚拟节点进行条件判断，并决定是否渲染。
需要注意的是，如果在同一个元素上同时使用了v-if和v-for，并且v-if的条件为false，那么该元素将不会被渲染，即使存在v-for指令。因此，在某些情况下，可能需要使用计算属性或者在数据源中进行条件过滤，以实现预期的效果。
总结起来，v-for指令的优先级高于v-if指令，v-for会先执行，然后v-if会基于v-for的结果进行条件判断。

7.前端的权限你是怎么做的？给页面按钮加权限？
在前端实现权限控制，可以通过多种方式来限制用户的操作和访问权限。以下是一些常见的权限控制方法之一：

1. 角色/权限管理：在后端定义用户角色和相应的权限，前端通过与后端的交互获取用户的角色信息。
2. 菜单和路由权限：在前端根据用户的角色信息动态生成菜单和路由配置，只显示用户有权限访问的菜单项和页面。
3. 页面级别的权限控制：在前端根据用户的角色信息，在渲染页面时判断用户是否有访问当前页面的权限，如果没有，可以显示错误提示或者重定向到其他页面。
4. 组件/按钮级别的权限控制：在前端的组件或按钮上添加权限判断逻辑，只有具备相应权限的用户才能看到或操作对应的组件或按钮。
   例如，可以在前端代码中通过以下方式实现按钮级别的权限控制：

<template>
  <button v-if="hasPermission('edit')">编辑</button>
  <button v-if="hasPermission('delete')">删除</button>
</template>

<script>
export default {
  methods: {
    hasPermission(permission) {
      // 根据用户的角色信息或权限列表判断是否具备某项权限
      // 返回 true 或 false
    }
  }
}
</script>

在上述示例中，通过hasPermission方法来判断用户是否具备某项权限，然后根据判断结果决定是否渲染对应的按钮。
需要注意的是，前端的权限控制是辅助控制手段，真正的权限验证应该在后端进行。前端的权限控制主要是为了提供更好的用户体验和界面控制，防止用户直接操作无权限的页面和功能。同时，前端的权限控制应该和后端的权限验证配合使用，确保数据和业务逻辑的安全性。

8.vue3中的ref怎么用，它与reactive 区别？
在Vue 3中，ref是一个函数，用于创建一个响应式的数据引用。ref函数接收一个初始值作为参数，并返回一个包含响应式数据的引用对象。
下面是使用ref的示例：

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出初始值 0

count.value++; // 修改值
console.log(count.value); // 输出修改后的值

需要注意的是，通过ref创建的引用对象，需要通过.value访问和修改其值。这是因为Vue 3的设计目标是对响应式数据进行了细粒度的追踪，使其可以在尽可能低的性能开销下进行观察和更新。
而reactive则是用于创建一个响应式的数据对象。与ref不同，reactive接收一个普通对象作为参数，并返回一个响应式的代理对象。
下面是使用reactive的示例：

import { reactive } from 'vue';

const state = reactive({
  message: 'Hello',
  count: 0
});

console.log(state.message); // 输出 'Hello'
console.log(state.count); // 输出 0

state.count++; // 修改值
console.log(state.count); // 输出修改后的值

可以看到，通过reactive创建的代理对象，可以直接访问和修改其属性，无需像ref那样使用.value。
总结区别：

•   ref用于创建一个单一的响应式数据引用，需要通过.value访问和修改值。
  

•   reactive用于创建一个整个对象的响应式代理，可以直接访问和修改属性。
  

•   ref适用于简单的值类型，如数字、字符串等。reactive适用于复杂的对象或嵌套结构。
  

•   ref在模板中使用时需要解构为响应式数据。reactive的代理对象可直接在模板中使用。
  

在使用时，根据具体的场景和需求选择适合的响应式创建方式。

Html css

1. 说一些常用的标签和h5新属性

常用的HTML标签包括：

1. <div>：用于定义文档中的一个分隔区块或一个容器。
2. <p>：用于定义段落。
3. <a>：用于定义超链接。
4. <img>：用于插入图像。
5. <ul>和<li>：分别用于定义无序列表和列表项。
6. <table>、<tr>和<td>：分别用于定义表格、表格行和表格单元格。
7. <form>、<input>和<button>：分别用于定义表单、输入框和按钮。
8. <h1>到<h6>：用于定义标题，按重要性递减。

HTML5引入了许多新的标签和属性，以提供更多的语义化和功能：

1. 结构标签：<header>、<nav>、<main>、<article>、<section>、<aside>和<footer>等，用于更好地组织页面结构。
2. 多媒体标签：<video>、<audio>、<canvas>和<svg>等，用于嵌入视频、音频、绘图和矢量图形。
3. 表单增强：新增了一些输入类型和属性，如<input type="date">、<input type="email">、<input type="range">等；还有<datalist>、<output>和<progress>等标签，用于增强表单的功能和用户体验。
4. 语义化标签：引入了一些用于语义化的标签，如<time>、<mark>、<figure>、<figcaption>等，可以更准确地描述内容。
5. 地理位置和地图：<geo-location>和<map>标签，用于获取和展示地理位置信息。
6. 新的API和特性：HTML5还引入了许多新的JavaScript API和特性，如地理定位API、Web存储API、拖放API、Web Workers、Web Socket等。
   这只是HTML标签和HTML5新属性的一小部分，HTML和HTML5提供了丰富的标签和功能，可以根据具体的项目需求和开发场景进行选择和使用。

2.水平居中，垂直居中？

实现水平居中和垂直居中的方法有多种，下面分别介绍一些常用的方式：
水平居中：
使用text-align: center;将元素内容水平居中，适用于块级元素。
使用margin: 0 auto;将元素的左右外边距设置为自动，适用于块级元素。
使用Flexbox布局，将容器设置为display: flex;，并使用justify-content: center;将内容水平居中。
垂直居中：
使用line-height和height来控制行高和元素高度，使文本在行内垂直居中，适用于单行文本。
使用display: table-cell;和vertical-align: middle;将元素设置为表格单元格，适用于多行文本和块级元素。
使用Flexbox布局，将容器设置为display: flex;，并使用align-items: center;将内容垂直居中。
需要根据具体的情况选择适合的方法，考虑元素的类型、上下文和浏览器兼容性。同时，还可以结合使用这些方法来实现水平居中和垂直居中的效果。
另外，对于绝对定位元素，可以使用以下方式实现居中：
水平居中：设置left: 50%;和transform: translateX(-50%);。
垂直居中：设置top: 50%;和transform: translateY(-50%);。
值得注意的是，以上方式适用于大多数情况，但在特定的布局和需求下，可能需要结合其他CSS属性或JavaScript来实现更复杂的居中效果。

3.怎么做一个三角形？

要创建一个三角形，可以使用CSS的边框和尺寸属性来实现。下面有几种常见的方法：

1. 使用border属性：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

在上面的示例中，设置了一个宽度为0和高度为0的容器，并通过border属性设置了三个边框，其中左右边框设置为透明，底边框设置为指定的颜色，这样就形成了一个等腰直角三角形。

2. 使用伪元素：

.triangle {
  width: 0;
  height: 0;
  position: relative;
}
.triangle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

在这个示例中，我们使用一个空的伪元素来创建三角形形状，并通过绝对定位将其放置在容器的顶部左侧。

3. 使用transform属性：

.triangle {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  transform: rotate(45deg);
}

这个示例中，我们先创建一个宽度和高度为0的容器，然后通过border-bottom属性设置了一个底边框，并使用transform属性将其旋转45度，从而形成一个等边直角三角形。
这些是创建三角形的几种常见方法，可以根据具体的需求和场景选择适合的方法来实现所需的三角形形状。

4.页面怎么同时兼容pc端和移动端？

为了同时兼容PC端和移动端，可以采用以下方法：

1. 响应式布局：使用CSS媒体查询（Media Queries）来适配不同的屏幕尺寸和设备。通过设置不同的CSS样式，可以根据屏幕大小和设备类型来调整布局、字体大小、元素位置等。
2. 弹性布局：使用CSS Flexbox 或 Grid布局等弹性布局技术，可以自适应不同屏幕尺寸和设备的布局需求。
3. 图片和媒体适配：使用响应式图片或CSS max-width 属性来确保图片和媒体元素在不同屏幕尺寸下适当缩放和调整大小。
4. 触摸和鼠标事件：针对移动设备和PC设备，使用适当的事件处理方式，例如使用touchstart和touchend事件来处理移动设备的触摸事件，使用click事件来处理PC设备的鼠标点击事件。
5. 使用合适的字体和字体大小：选择适合不同屏幕尺寸和设备的字体，并使用相对单位（如em或rem）来设置字体大小，以便在不同屏幕下实现一致的显示效果。
6. 浏览器兼容性：在开发前，了解目标浏览器的兼容性要求，并使用浏览器兼容性工具，如Autoprefixer等，来自动添加浏览器前缀以确保兼容性。
7. 移动端特有的交互元素：对于移动端，可以考虑使用触摸手势、滑动导航、下拉刷新等移动端特有的交互元素，以提升用户体验。
8. 使用适配框架：使用一些移动优先的前端框架，如Bootstrap、Ant Design Mobile等，这些框架已经对响应式和移动端兼容性进行了很好的处理。
   综合使用以上方法，可以实现一个同时兼容PC端和移动端的网页。需要根据具体项目需求和设备特性来选择合适的方法和技术。同时，建议在开发过程中进行跨设备的测试和调试，以确保页面在各种设备上都能正常显示和交互。

Js

1. Es6中有哪些新增的内容？

ES6（也称为ES2015）是JavaScript的第六个主要版本，引入了许多新的语言特性和功能。下面是ES6中一些常见的新增内容：

1. 块级作用域与常量声明：通过let和const关键字引入了块级作用域变量和常量的声明方式，解决了变量提升和作用域混乱的问题。
2. 箭头函数：使用箭头函数表达式 () => {} 来简化函数的声明和写法，同时绑定了父级作用域的 this 值。
3. 模板字符串：使用反引号（）包裹字符串，并使用${}`语法可以在字符串中插入变量和表达式，提供了更方便的字符串拼接和多行字符串的写法。
4. 解构赋值：可以从数组或对象中提取值并赋给变量，简化了变量赋值和属性访问的操作。
5. 默认参数：在函数声明中可以设置参数的默认值，简化了函数调用时的参数传递。
6. 展开运算符：使用...语法可以将数组或对象展开为独立的元素或属性，方便进行数组合并、复制和对象扩展等操作。
7. 类与模块：引入了class关键字和面向对象编程的语法糖，使得定义和使用类更加简洁和清晰。同时，ES6还引入了模块化的概念，可以使用import和export关键字来导入和导出模块。
8. Promise：使用Promise对象可以更好地处理异步操作，避免了回调地狱的问题，提供了更清晰和可读性更高的异步编程方式。
9. 迭代器和生成器：引入了迭代器（Iterator）和生成器（Generator）的概念，使得迭代操作更加容易实现和使用。
10. 模块化的Math和Number对象：引入了一些新的数学方法和操作符，如Math.sign、Math.trunc、Number.isNaN等，提供了更方便和准确的数学计算和数值操作。
    这只是ES6中的一些新增内容，ES6还包括了许多其他的语言特性和功能。这些新增的内容大大提升了JavaScript的表达能力和开发效率，使得代码更加简洁、可读性更强，并且提供了更多的编程模式和工具。

2.防抖节流

防抖（Debounce）和节流（Throttle）是常用的优化技术，用于限制事件触发的频率，提升性能和用户体验。
防抖（Debounce）：
防抖的原理是，在事件触发后，等待一段时间（如200ms），如果在这段时间内没有再次触发该事件，则执行对应的操作；如果在等待时间内再次触发了该事件，则重新开始计时。可以理解为，如果一个人在一段时间内不再说话，我们才认定他讲完了。
应用场景：

•   输入框搜索：在用户输入时等待一段时间，等用户停止输入后再进行搜索请求，避免频繁发送请求。
  

•   窗口调整：当窗口大小调整时，延迟执行调整大小的操作，只在用户停止调整窗口大小后执行。
  

节流（Throttle）：
节流的原理是，在一段时间内只允许事件触发一次，不论触发频率多高，都会在固定时间间隔内执行对应的操作。可以理解为，保证在一段时间内只有一个人能够说话。
应用场景：

•   滚动事件：当用户滚动页面时，在一定的时间间隔内只执行一次滚动事件的处理逻辑。
  

•   鼠标移动事件：当鼠标移动时，限制事件处理函数的触发频率，避免频繁更新界面。
  

实现防抖和节流的方式有多种，可以使用JavaScript中的定时器函数（setTimeout和clearTimeout）来实现。下面是两种常用的实现方式：
防抖（Debounce）的实现：

function debounce(func, delay) {
  let timeoutId;
  
  return function(...args) {
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  }
}

节流（Throttle）的实现：

function throttle(func, delay) {
  let canRun = true;
  
  return function(...args) {
    if (!canRun) {
      return;
    }
    
    canRun = false;
    setTimeout(() => {
      func.apply(this, args);
      canRun = true;
    }, delay);
  }
}

以上代码示例是基本的防抖和节流实现，可以根据具体的需求和场景进行调整和扩展。
需要根据实际情况选择使用防抖还是节流，以便更好地优化事件的触发频率和减少不必要的计算或请求。

3.深浅拷贝

在JavaScript中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是用来复制对象或数组的概念。
浅拷贝（Shallow Copy）是指创建一个新的对象或数组，新对象或数组中的元素是原始对象或数组的引用。如果修改新对象或数组中的元素，原始对象或数组的对应元素也会被修改。
深拷贝（Deep Copy）是指创建一个新的对象或数组，并递归地复制原始对象或数组中的所有元素和子元素。修改新对象或数组中的元素不会影响原始对象或数组。

下面是一些常见的深拷贝和浅拷贝的实现方法：
浅拷贝的实现方式：
使用Object.assign()方法进行浅拷贝：

const shallowCopy = Object.assign({}, originalObject);

使用扩展运算符（...）进行浅拷贝：

const shallowCopy = { ...originalObject };

使用数组的slice()方法进行浅拷贝：

深拷贝的实现方式：
使用JSON.parse()和JSON.stringify()进行深拷贝，但该方法无法复制函数和特殊对象（如Date对象）：```1const deepCopy = JSON.parse(JSON.stringify(originalObject));

使用递归函数进行深拷贝：

function deepClone(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}

let clone = Array.isArray(obj) ? [] : {};

for (let key in obj) {
if (obj.hasOwnProperty(key)) {
clone[key] = deepClone(obj[key]);
}
}

return clone;
}

const deepCopy = deepClone(originalObject);

需要注意的是，使用JSON.parse()和JSON.stringify()进行深拷贝时，会忽略函数和特殊对象（如Date对象），并且会丢失原始对象的原型链信息。
对于复杂的数据结构和嵌套对象，建议使用递归函数进行深拷贝，以确保所有的元素和子元素都被正确复制。
需要根据具体的情况选择适合的拷贝方式，并注意对引用类型的处理，以便实现预期的复制效果。


##4.请说一下eventloop 
Event Loop（事件循环）是 JavaScript 运行时的一种执行模型，用于处理异步代码和事件处理。
在回答关于 Event Loop 的面试问题时，可以按照以下步骤来回答：
1. 首先，简要介绍什么是 Event Loop：Event Loop 是 JavaScript 运行时的一种机制，用于处理异步任务和事件处理。它是 JavaScript 运行时的一部分，负责管理调度任务的执行。
2. 接下来，解释 Event Loop 的基本概念：
    *       JavaScript是单线程运行的，意味着在一个给定的时间点，只能执行一个代码块。
    *       但是，JavaScript 也支持异步编程，例如通过定时器、网络请求、事件处理等，这些异步任务会在后台执行。
    *       Event Loop 的作用是监控调用栈和任务队列，当调用栈为空时，它从任务队列中取出待执行的任务，并将其推入调用栈中执行。
3. 描述 Event Loop 的执行过程：
    *       首先，JavaScript 代码从上到下同步执行，遇到异步任务时，将其放入任务队列中，继续执行后续的代码。
    *       当调用栈中的代码执行完毕后，Event Loop 检查任务队列，如果队列中有任务，则将任务推入调用栈中执行。
    *       每次从任务队列中取出一个任务执行，这个过程称为一个 tick。
    *       重复上述步骤，不断地从任务队列中取出任务并执行，直到任务队列中没有任务为止。
4. 强调 Event Loop 的重要性和作用：
    *       Event Loop 是 JavaScript 异步编程的核心机制，它使得 JavaScript 可以处理大量的异步任务和事件处理。
    *       它保证了 JavaScript 的单线程特性，并使得异步任务可以在后台执行，不会阻塞主线程。
    *       Event Loop 的合理运行，可以使得 JavaScript 程序具备良好的响应性和性能。
5. 最后，可以举例说明 Event Loop 的应用场景，如定时器、网络请求、事件监听等。
请注意，Event Loop 是一个复杂的主题，面试官可能会进一步追问其细节和细微之处。因此，回答时要确保自己对 Event Loop 的原理和执行过程有深入的理解，并根据具体问题进行适当的展开和解释。

##5.＝＝和＝＝＝区别

==和===是JavaScript中用于比较相等性的运算符。
==（相等运算符）用于比较两个值是否相等，但它会进行类型转换：
*       如果两个操作数的类型不同，会尝试进行类型转换，然后再进行比较。
*       在类型转换的过程中，会遵循一定的规则（类型转换规则或抽象相等比较规则）。
===（严格相等运算符）用于比较两个值是否严格相等（值和类型都相等）：
*       如果两个操作数的类型不同，直接返回false。
*       只有当两个操作数的类型相同且值相等时，才返回true。
下面是==和===的一些区别：
1. 类型转换：
*       ==会进行类型转换，而===不会进行类型转换。
*       例如，1 == '1'会返回true，因为在进行比较之前，将字符串'1'转换为了数字1。
*       而1 === '1'会返回false，因为类型不同。
2. 比较null和undefined：
*       在==中，null和undefined是相等的，但它们与其他值不相等。
*       而在===中，null和undefined只有在类型也相等时才相等。
3. 对象比较：
*       对象比较时，==和===都是比较引用是否相等，即两个对象是否指向同一个内存地址。
*       两个具有相同内容的独立对象，在==和===比较时都会返回false。
总的来说，===比==更加严格和安全，因为它不会进行类型转换，避免了一些潜在的类型转换错误。在实际开发中，建议优先使用===进行比较，除非明确需要进行类型转换的情况下才使用==。