1.async 和 defer，使用 async 要注意什么吗

• async和defer都是用于在 HTML 中加载外部脚本的属性。

async属性的作用是让脚本异步加载，不阻塞页面的渲染。当脚本加载完成后，会立即执行。使用async的注意事项有：

• 脚本的执行顺序不确定：由于脚本是异步加载的，所以它们的执行顺序可能与在 HTML 中出现的顺序不同。如果多个脚本之间存在依赖关系，需要特别注意执行顺序的问题。
• 可能会在页面尚未完全加载时执行：如果脚本的执行依赖于页面的某些元素或状态，可能会出现问题。因为脚本可能在页面尚未完全加载时就执行了。

defer属性的作用是让脚本延迟加载，在页面完全加载后再执行。脚本的执行顺序与在 HTML 中出现的顺序相同。

2. 事件循环

事件循环是 JavaScript 运行时的一种机制，用于处理异步任务和事件。它的主要作用是不断地检查任务队列，当有任务可执行时，就将其取出并执行。

事件循环的工作流程如下：

• 执行同步任务：JavaScript 引擎首先执行同步任务，即代码中按照顺序依次执行的任务。
• 检查任务队列：当同步任务执行完成后，JavaScript 引擎会检查任务队列中是否有可执行的异步任务。异步任务包括定时器、网络请求、事件处理等。
• 执行异步任务：如果任务队列中有可执行的异步任务，JavaScript 引擎会将其取出并执行。执行完成后，继续检查任务队列，重复这个过程。

事件循环使得 JavaScript 可以在不阻塞主线程的情况下处理异步任务，提高了程序的响应性和性能。

3. 宏队列细分为哪些队列

在 JavaScript 中，宏任务队列可以细分为以下几种队列：

• 定时器队列（Timer Queue）：用于存储由setTimeout()和setInterval()设置的定时器任务。
• I/O 队列（I/O Queue）：用于存储由异步 I/O 操作（如文件读取、网络请求等）触发的任务。
• UI 渲染队列（UI Rendering Queue）：用于存储与用户界面渲染相关的任务，如浏览器的重绘和回流操作。

当事件循环检查宏任务队列时，会按照队列的顺序依次取出任务并执行。不同类型的任务可能会在不同的队列中等待执行。

4、js 实现异步的方式有哪些，各个方式之间的区别

• 回调函数

  • 这是最传统的异步实现方式。将一个函数作为参数传递给另一个函数，当异步操作完成后，调用这个回调函数来处理结果。
  • 缺点是容易导致回调地狱，代码可读性和可维护性差。

• Promise

  • Promise 是一种更优雅的异步处理方式。它代表了一个异步操作的最终完成或失败，并提供了一种统一的接口来处理异步操作的结果。
  • Promise 可以链式调用，避免了回调地狱的问题。同时，它还提供了then、catch、finally等方法来处理不同的状态。

• async/await

  • 这是基于 Promise 的语法糖，使异步代码看起来像同步代码一样。使用async关键字定义一个异步函数，在函数内部可以使用await关键字等待一个 Promise 的结果。
  • 大大提高了异步代码的可读性和可维护性，同时也更容易进行错误处理。

• 事件监听和发布 / 订阅模式

  • 通过监听特定的事件，当异步操作完成后触发相应的事件，然后在事件处理函数中处理结果。
  • 发布 / 订阅模式则是一种更通用的事件处理方式，允许不同的组件之间进行松耦合的通信。

1.Webpack 的 loader 和 plugin

• Loader：

  • 作用：Loader 用于将不同类型的文件转换为 Webpack 能够处理的模块。例如，将 CSS 文件转换为 JavaScript 模块，将图片文件转换为数据 URL 等。
  • 工作原理：当 Webpack 遇到需要处理的文件时，会根据文件的类型和配置的 Loader 规则，依次调用相应的 Loader 进行处理。Loader 可以对文件进行转换、压缩、优化等操作，并将处理后的结果返回给 Webpack。

• Plugin：

  • 作用：Plugin 用于扩展 Webpack 的功能。可以在 Webpack 的不同阶段执行自定义的任务，如打包优化、代码分割、生成静态资源等。
  • 工作原理：Plugin 通过在 Webpack 的构建过程中注册特定的事件钩子，在相应的阶段执行自定义的逻辑。Plugin 可以访问 Webpack 的内部状态和配置信息，并对构建过程进行干预和控制。

1.MVVM

MVVM（Model-View-ViewModel）是一种前端开发架构模式。它将应用程序分为三个主要部分：

• 模型（Model）：负责存储和管理应用程序的数据。可以是数据库、服务器端 API 或本地存储中的数据。
• 视图（View）：负责展示用户界面。通常是 HTML、CSS 和 JavaScript 代码组成的页面。
• 视图模型（ViewModel）：连接模型和视图的中间层。它将模型中的数据转换为视图可以显示的格式，并处理用户与视图的交互。

MVVM 的主要优点有：

• 分离关注点：将数据和界面逻辑分离，使得代码更易于维护和测试。
• 双向数据绑定：实现了视图和模型之间的自动同步，减少了手动更新数据和界面的工作量。
• 提高开发效率：通过使用数据绑定和声明式编程，开发人员可以更快速地构建用户界面，减少了繁琐的 DOM 操作。

1.Vue 响应式原理

Vue 的响应式原理主要通过以下几个步骤实现：

• 数据劫持：Vue 使用Object.defineProperty()方法对数据对象的属性进行劫持，当数据被访问或修改时，可以触发相应的操作。
• 依赖收集：在读取数据时，Vue 会收集依赖于该数据的 Watcher（观察者）。Watcher 可以是组件的渲染函数、计算属性函数等。
• 数据变化通知：当数据被修改时，Vue 会通知所有依赖于该数据的 Watcher，触发它们的更新操作。
• 视图更新：Watcher 在接收到数据变化通知后，会执行相应的更新操作，从而更新视图。

通过这种方式，Vue 实现了数据和视图的自动同步，当数据变化时，视图会自动更新，无需手动操作 DOM。

2.Vue 数据双向绑定

Vue 的数据双向绑定是指在表单元素（如输入框、复选框等）和数据之间建立自动同步的机制。当表单元素的值发生变化时，数据也会相应地更新；反之，当数据发生变化时，表单元素的值也会更新。

Vue 实现数据双向绑定主要通过以下方式：

• v-model指令：在表单元素上使用v-model指令，Vue 会自动将表单元素的值与数据进行绑定。当表单元素的值发生变化时，数据会自动更新；当数据发生变化时，表单元素的值也会更新。
• 数据劫持和依赖收集：与 Vue 的响应式原理类似，Vue 会对数据进行劫持，并在读取数据时收集依赖于该数据的 Watcher。当表单元素的值发生变化时，会触发数据的 setter 方法，从而通知依赖于该数据的 Watcher 进行更新。

3.Vue 状态更新后如何渲染页面的

当 Vue 的状态更新时，Vue 会通过以下步骤渲染页面：

• 数据变化通知：当数据被修改时，Vue 会通知所有依赖于该数据的 Watcher。
• Watcher 更新：Watcher 在接收到数据变化通知后，会执行相应的更新操作。对于组件的渲染 Watcher，它会重新执行组件的渲染函数，生成新的虚拟 DOM。
• 虚拟 DOM 对比：Vue 会将新生成的虚拟 DOM 与旧的虚拟 DOM 进行对比，找出两者之间的差异。
• 真实 DOM 更新：根据虚拟 DOM 的差异，Vue 会对真实 DOM 进行最小化的更新操作，只更新发生变化的部分，从而提高性能。

4、vue 和 react 的 diff 算法区别是什么

• Vue 的 diff 算法

  • Vue 的 diff 算法是基于双端比较的。在更新虚拟 DOM 时，Vue 会同时从新旧虚拟 DOM 的两端开始比较，找到相同的节点进行更新，提高了比较的效率。
  • 对于列表的更新，Vue 会通过 key 属性来识别节点，尽量复用相同的节点，减少 DOM 操作。

• React 的 diff 算法

  • React 的 diff 算法是基于单端比较的。它首先比较根节点，如果根节点不同，则直接替换整个子树。如果根节点相同，则继续比较子节点。
  • React 的 diff 算法采用了启发式的策略，对于同层级的节点，它会假设节点的位置是不变的，只进行同位置节点的比较。如果节点的位置发生了变化，React 会进行额外的处理，但可能会导致一些不必要的 DOM 操作。

5、react 的 fiber 机制

React 的 Fiber 机制是一种对 React 核心算法的重新实现，旨在提高 React 应用的性能和响应性。

• 任务分割：将渲染任务分割成小的任务单元，称为 Fiber。每个 Fiber 代表一个虚拟 DOM 节点，可以暂停、恢复和重新调度任务。这样可以避免长时间占用主线程，使得浏览器有机会处理用户输入和其他事件。
• 优先级调度：Fiber 机制引入了优先级的概念，可以根据任务的优先级来决定哪些任务先执行，哪些任务可以延迟执行。例如，用户交互相关的任务会被赋予较高的优先级，优先执行，以保证应用的响应性。
• 增量渲染：Fiber 机制支持增量渲染，即可以在部分渲染完成后就显示给用户，而不是等待整个渲染过程完成。这样可以减少用户等待的时间，提高用户体验。
• 可中断和恢复：渲染过程可以被中断，然后在合适的时候恢复。例如，当浏览器有更高优先级的任务需要处理时，React 可以暂停渲染，等浏览器空闲时再继续。

6、vue-router 的 api 有哪些，使用的场景是什么

• Vue Router 的 API

  • router.push()：导航到指定的路由，可以传递参数。
  • router.replace()：导航到指定的路由，替换当前历史记录。
  • router.go()：在历史记录中向前或向后导航。
  • router.back()：后退一步。
  • router.forward()：前进一步。
  • $route：当前激活的路由信息对象，包含路由的路径、参数、查询参数等。
  • $router：路由器实例，可以访问路由的各种方法和属性。

• 使用场景

  • 单页应用（SPA）：Vue Router 是构建单页应用的重要组成部分，用于管理应用的不同页面和导航。
  • 页面切换和路由过渡：可以实现页面之间的平滑过渡效果，提升用户体验。
  • 路由参数传递：在不同页面之间传递参数，方便数据的共享和处理。
  • 导航守卫：可以在路由切换前后执行一些逻辑，如权限验证、登录状态检查等。

1.CDN

CDN（Content Delivery Network）即内容分发网络。它是一组分布在不同地理位置的服务器，用于存储和分发静态内容，如图片、脚本、样式表等。

CDN 的主要作用有：

• 提高访问速度：将内容分发到离用户更近的服务器上，减少网络延迟，提高用户访问网站的速度。
• 减轻源服务器压力：通过将请求分发到多个服务器上，减少源服务器的负载，提高网站的可用性和稳定性。
• 提高安全性：CDN 可以提供一些安全功能，如 DDoS 防护、SSL 加密等，保护源服务器和用户数据的安全。

2. 如果离用户最近的缓存服务器没有想要的资源，会怎么样

如果离用户最近的缓存服务器没有所需的资源，通常会发生以下情况：

• 向上级缓存服务器或源服务器请求资源：缓存服务器会检查其上级缓存服务器或直接向源服务器发送请求，以获取所需的资源。
• 可能引入延迟：如果需要从上级缓存服务器或源服务器获取资源，会增加网络延迟，因为数据需要经过更多的网络节点传输。
• 更新本地缓存：一旦获取到资源，缓存服务器会将其存储在本地缓存中，以便下次请求时可以更快地提供服务。

3、DNS 解析过程

• 浏览器缓存查询：当用户在浏览器中输入网址时，浏览器首先会在自己的缓存中查找是否有对应的 IP 地址记录。如果有，则直接使用该 IP 地址进行访问。
• 操作系统缓存查询：如果浏览器缓存中没有找到，浏览器会查询操作系统的缓存，看是否有对应的 IP 地址记录。
• 路由器缓存查询：如果操作系统缓存中也没有，会查询本地路由器的缓存。

• DNS 服务器查询

  ：如果以上缓存中都没有找到对应的 IP 地址，浏览器会向本地 DNS 服务器发送查询请求。本地 DNS 服务器通常由互联网服务提供商（ISP）提供。

  • 如果本地 DNS 服务器有该域名的缓存记录，则直接返回对应的 IP 地址。
  • 如果没有缓存记录，本地 DNS 服务器会向根域名服务器发送查询请求。根域名服务器会返回顶级域名服务器的地址。
  • 本地 DNS 服务器再向顶级域名服务器发送查询请求，顶级域名服务器返回权威域名服务器的地址。
  • 本地 DNS 服务器最后向权威域名服务器发送查询请求，权威域名服务器返回对应的 IP 地址。
• 结果返回：本地 DNS 服务器将查询到的 IP 地址返回给浏览器，浏览器使用该 IP 地址进行访问。

4、说一说 https，加密方式，数字证书包含哪些信息

• https

  • HTTPS（Hypertext Transfer Protocol Secure）是在 HTTP 基础上通过传输层安全（TLS）或安全套接层（SSL）进行加密的协议。它确保了在客户端和服务器之间传输的数据的保密性、完整性和真实性。

• 加密方式

  • 对称加密：通信双方使用相同的密钥进行加密和解密。优点是加密和解密速度快，效率高。缺点是密钥的分发和管理比较困难，如果密钥被泄露，整个通信就会被破解。
  • 非对称加密：使用一对密钥，即公钥和私钥。公钥可以公开，用于加密数据；私钥只有所有者知道，用于解密数据。非对称加密的优点是密钥管理相对容易，安全性高。缺点是加密和解密速度较慢。
  • HTTPS 结合了对称加密和非对称加密的优点。在建立连接时，使用非对称加密交换对称密钥，然后在后续的通信中使用对称加密进行数据传输。

• 数字证书包含的信息

  • 证书所有者的名称：通常是网站的域名或组织的名称。
  • 公钥：用于加密数据和验证数字签名。
  • 数字签名：由证书颁发机构（CA）使用私钥对证书的内容进行签名，用于验证证书的真实性和完整性。
  • 有效期：证书的有效时间范围。
  • 颁发机构信息：包括证书颁发机构的名称、数字签名等，用于验证证书的来源和可信度。