2024高频前端面试题合集(一)

1、请简述Js Bridge

JavaScript Bridge 是一种技术，用于在不同的编程语言或环境中传递数据和调用函数。在 Web 开发中，JavaScript Bridge 通常指在 JavaScript 和其他语言（如 Java、Objective-C、Swift 等）之间建立通信的机制。

在移动应用开发中，特别是混合应用开发（Hybrid App Development）中，JavaScript Bridge 是常用的技术。它允许开发人员通过 JavaScript 代码与原生应用程序交互，调用原生功能或者将原生数据传递到 JavaScript 环境中。

具体来说，在移动应用开发中，开发人员可以使用 JavaScript Bridge 实现以下功能：

1. 调用原生功能：通过 JavaScript Bridge，JavaScript 代码可以调用原生应用程序提供的功能，比如摄像头、地理位置、传感器等。
2. 获取原生数据：JavaScript 代码可以通过 Bridge 从原生应用程序中获取数据，比如设备信息、文件系统中的文件等。
3. 事件通知：原生应用程序可以通过 Bridge 向 JavaScript 环境发送事件通知，以便 JavaScript 代码可以做出相应的处理。
4. 性能优化：通过 JavaScript Bridge，开发人员可以选择性地将一些耗时的操作委托给原生代码执行，从而提高应用程序的性能和响应速度。

总的来说，JavaScript Bridge 构建了 JavaScript 和原生代码之间的桥梁，使得在混合应用开发中能够更方便地利用原生功能和数据，同时也使得开发过程更灵活和高效。

2、请说一下SSR的单机QPS

SSR（Server-Side Rendering，服务器端渲染）是一种将网站或应用程序的界面在服务器端渲染成 HTML，然后再将渲染好的 HTML 发送到客户端的技术。SSR 的单机 QPS（Queries Per Second，每秒查询率）取决于多个因素，包括服务器性能、应用程序的复杂度、并发请求处理能力等。

通常情况下，单机 SSR 的 QPS 受限于服务器的性能。如果服务器性能足够强大，并且应用程序的逻辑相对简单，那么单机 SSR 的 QPS 可能会很高。然而，如果服务器资源有限或者应用程序有复杂的计算逻辑，那么单机 SSR 的 QPS 将会受到限制。

除了服务器性能之外，网络带宽和延迟也会影响 SSR 的 QPS。如果服务器的带宽有限或者网络延迟较高，那么单机 SSR 的 QPS 可能会受到限制。

另外，SSR 的实现方式也会影响单机 QPS。一些 SSR 框架可能会采用异步处理请求的方式，从而提高并发处理能力，进而提高 QPS。

总的来说，单机 SSR 的 QPS 取决于多个因素，包括服务器性能、应用程序复杂度、网络带宽和延迟等。在实际应用中，可以通过性能测试来评估单机 SSR 的 QPS，以确保满足应用程序的性能需求。

3、请说一下eggJs的初始化原理

Egg.js 是一个基于 Node.js 和 Koa 框架的企业级应用开发框架，它提供了一套约定优于配置的开发规范，能够帮助开发者快速构建稳定、可扩展的应用。Egg.js 的初始化原理主要包括以下几个方面：

1. 目录结构约定： Egg.js 使用一套统一的目录结构约定，开发者只需要按照约定将应用的代码组织到指定的目录中，框架会自动加载并运行这些代码。这种约定优于配置的方式可以减少开发者在项目初始化阶段的工作量，同时也有利于团队协作和项目维护。

2. 启动流程： Egg.js 的初始化过程从应用启动开始，框架会先加载配置文件，然后初始化应用和插件，最后启动应用服务器。在初始化过程中，框架会依次执行各个阶段的初始化逻辑，并将初始化过程中的错误信息记录下来，方便开发者进行排查和调试。

3. 插件机制： Egg.js 提供了强大的插件机制，开发者可以通过 npm 安装各种插件来扩展框架的功能。在初始化过程中，框架会自动加载并初始化应用依赖的插件，使得插件的功能可以无缝集成到应用中。

4. 框架核心： Egg.js 的核心部分是基于 Koa 框架进行封装的，它提供了一套面向企业级应用开发的解决方案，包括路由、中间件、控制器、服务等组件。在初始化过程中，框架会加载并运行这些核心组件，从而构建出一个完整的应用程序。

总的来说，Egg.js 的初始化原理基于一套统一的目录结构约定和插件机制，通过加载配置文件、初始化应用和插件，并启动应用服务器来完成应用的初始化过程。这种约定优于配置的开发模式可以帮助开发者快速构建稳定、可扩展的企业级应用。

4、前端错误如何捕获，promise的错误是如何捕获的

前端错误捕获是 Web 开发中非常重要的一环，它可以帮助开发者及时发现并解决应用程序中的问题。在前端开发中，主要有以下几种方式来捕获错误：

1. try-catch 块： 可以使用 try-catch 块来捕获同步代码中的错误。将可能抛出异常的代码放在 try 块中，然后使用 catch 块来捕获异常并进行处理。

try {

// 可能抛出异常的代码

} catch (error) {

// 处理异常

}

2. window.onerror： 可以通过 window 对象的 onerror 事件来捕获全局的 JavaScript 错误。当页面中发生未捕获的 JavaScript 错误时，onerror 事件会被触发，并传递错误信息、错误所在文件、错误行号等相关信息。

window.onerror = function(message, source, lineno, colno, error) {

// 处理错误

};

3. Promise 错误捕获： 对于 Promise 中的错误，可以通过 .catch() 方法来捕获并处理。Promise 的错误会沿着 Promise 链向后传递，如果没有在链中的某个位置进行捕获处理，最终会触发 unhandledrejection 事件。

somePromise.catch(function(error) {

// 处理 Promise 中的错误

});

4. unhandledrejection 事件： 当 Promise 中的错误未被捕获时，会触发 unhandledrejection 事件。可以通过监听这个事件来捕获未被处理的 Promise 错误。

window.addEventListener('unhandledrejection', function(event) {

// 处理未被捕获的 Promise 错误

});

5. 资源加载错误： 对于资源加载错误，比如图片加载失败、CSS 文件加载失败等，可以通过监听相应的事件来捕获并处理。

window.addEventListener('error', function(event) {

// 处理资源加载错误

});

综上所述，前端错误可以通过 try-catch 块、window.onerror、Promise.catch()、unhandledrejection 事件以及资源加载错误事件来捕获和处理。这些方法可以帮助开发者及时发现并解决应用程序中的问题，提高应用的稳定性和用户体验。

5、vue的dom diff算法

Vue.js 使用 Virtual DOM 和 diff 算法来提高页面更新的效率。下面是 Vue.js 中的 Virtual DOM 和 diff 算法的简要说明：

Virtual DOM（虚拟 DOM）

1. 概念： Virtual DOM 是一个 JavaScript 对象表示的虚拟 DOM 树，它与真实 DOM 一一对应。Vue.js 在每次数据变化时都会重新生成一个新的 Virtual DOM 树，然后通过 diff 算法比较新旧两棵 Virtual DOM 树的差异，最终只对差异部分进行更新，从而减少对真实 DOM 的操作，提高页面更新的效率。

2. 优势： Virtual DOM 的存在使得开发者可以在不直接操作真实 DOM 的情况下更新视图，从而简化了开发流程并提高了性能。

diff 算法

1. 概念： diff 算法是用来比较两棵 Virtual DOM 树的差异，并将差异应用到真实 DOM 上的算法。Vue.js 中的 diff 算法采用了一种叫做"双端比较"的策略，即同时从新旧两棵 Virtual DOM 树的头部和尾部开始比较节点，从而尽可能地减少比较的次数和提高性能。

2. 过程： diff 算法的具体过程如下：

• 从两棵 Virtual DOM 树的根节点开始，逐层比较节点类型和属性，并记录下差异；

• 当发现节点类型相同但属性不同时，更新差异；

• 当发现节点类型不同或者节点位置发生变化时，将整个子树视为一个差异，暂时忽略其子节点的比较；

• 最后根据记录的差异，更新真实 DOM。

3. 优化： Vue.js 中的 diff 算法还进行了一些优化，比如通过设置唯一的 key 来标识每个节点，从而减少节点比较的次数，提高 diff 算法的效率。

综上所述，Vue.js 中的 Virtual DOM 和 diff 算法可以帮助开发者高效地更新视图，并且通过一些优化策略提高了页面更新的性能。

vue3的dom diff算法

Vue 3 中的 diff 算法与 Vue 2 中的略有不同，主要是因为 Vue 3 使用了新的响应式系统和编译器，进一步优化了 diff 算法的性能和效率。以下是 Vue 3 中的 diff 算法的一些特点：

1. 静态标记和静态提升： Vue 3 编译器会标记静态节点，即在组件渲染期间不会发生变化的节点。在 diff 过程中，静态节点会被忽略，从而减少了不必要的比较操作。此外，Vue 3 的编译器还会对静态节点进行静态提升，将其提升到 render 函数之外，从而进一步减少了渲染时的计算成本。

2. 优化的组件更新： Vue 3 引入了基于 Proxy 的响应式系统，使得在组件更新时能够更精确地追踪依赖关系。在 diff 过程中，Vue 3 会比较新旧节点的依赖关系，并只对发生变化的节点进行更新，而不需要重新渲染整个组件。

3. Fragments 和 Teleport： Vue 3 支持 Fragments（片段）和 Teleport（传送门）等新的特性，它们可以帮助开发者更灵活地组织页面结构。在 diff 过程中，Vue 3 会正确处理这些新特性，确保它们能够正确地与其他节点进行比较和更新。

4. Patch Flag 和 Block Tree： Vue 3 中引入了 Patch Flag 和 Block Tree 的概念，用于表示节点的更新状态和依赖关系。在 diff 过程中，Vue 3 会利用 Patch Flag 和 Block Tree 来跳过不需要比较的节点，从而进一步提高了 diff 算法的效率。

总的来说，Vue 3 在 diff 算法方面进行了一系列的优化和改进，通过静态标记、优化的组件更新、新特性的支持以及 Patch Flag 和 Block Tree 的引入等方式，提高了 diff 算法的性能和效率，从而进一步提升了 Vue 应用程序的性能和用户体验。

6、vue的ChildNode diff算法

Vue 的 ChildNode Diff 算法是 diff 算法的一个组成部分，用于比较和更新组件的子节点。它主要用于处理组件的子节点列表变化，例如在列表渲染、条件渲染等场景下的子节点变化。

Vue 的 ChildNode Diff 算法主要有以下几个特点：

1. 通过索引进行比较： Vue 通过比较新旧子节点列表中的节点类型和 key，以及子节点在列表中的位置，来确定新旧子节点之间的对应关系。如果节点类型相同且 key 相同，则认为是相同的节点；如果节点类型相同但 key 不同，则认为是不同的节点；如果节点类型不同，则直接移除旧节点并插入新节点。

2. 双端比较： Vue 采用了一种双端比较的策略，从新旧子节点列表的头部和尾部开始比较节点，以尽可能减少比较的次数。这种策略可以在大部分情况下有效地减少节点移动的次数，提高 diff 算法的效率。

3. 复用已有节点： 在比较过程中，如果发现新节点与旧节点是相同类型且拥有相同的 key，Vue 将会复用已有的节点而不是销毁并重新创建节点。这样可以减少不必要的 DOM 操作，提高渲染性能。

4. 针对特殊情况的优化： 在某些特殊情况下，比如只有一个子节点、没有子节点、只有文本节点等情况下，Vue 会进行特殊处理，避免不必要的比较操作，从而进一步提高 diff 算法的效率。

总的来说，Vue 的 ChildNode Diff 算法是 diff 算法的一个重要组成部分，它通过比较新旧子节点列表来确定节点之间的对应关系，并尽可能复用已有节点以减少 DOM 操作，从而提高组件更新的效率和性能。

7、HTTP的400、401、403的区别

HTTP 状态码 400、401 和 403 分别表示客户端请求错误、未经授权和禁止访问，它们之间有一些区别：

1. 400 Bad Request（请求错误）： 这个状态码表示服务器无法理解客户端发送的请求，通常是因为请求中包含了语法错误、无效的参数或格式不正确等问题。当服务器收到 400 错误时，通常会返回一个错误页面或者错误信息，提示客户端检查请求内容并修正错误。

2. 401 Unauthorized（未经授权）： 这个状态码表示客户端发送的请求需要进行身份认证，但是没有提供有效的身份凭证（如登录凭证、令牌等）。通常情况下，服务器会返回一个包含身份认证要求的响应，并在响应头中包含一个 WWW-Authenticate 头字段，提示客户端提供有效的身份凭证。

3. 403 Forbidden（禁止访问）： 这个状态码表示客户端没有权限访问请求的资源，即使提供了有效的身份凭证。服务器收到请求后，会认识到请求者身份合法，但是服务器拒绝该请求访问所请求的资源。通常情况下，服务器会返回一个错误页面或者错误信息，说明客户端无权访问该资源。

总的来说，400 表示客户端请求错误，401 表示未经授权需要身份认证，403 表示服务器拒绝访问，即使客户端提供了有效的身份凭证。这些状态码可以帮助客户端识别和处理不同类型的请求问题。

请说一下浏览器缓存，http缓存，什么是强缓存，什么是协商缓存，Cache-Control中max-age、no-cache的作用

浏览器缓存是指浏览器在本地存储资源的副本，以减少网络请求并加快页面加载速度。HTTP 缓存是指通过 HTTP 头部字段控制客户端（浏览器）和服务器之间对缓存资源的管理和交互。

强缓存

强缓存是指客户端在请求资源时，首先检查本地是否有缓存副本，并通过特定的 HTTP 头部字段（例如 Expires 和 Cache-Control 中的 max-age）判断缓存是否过期。如果缓存未过期，则直接从本地缓存中获取资源，不会向服务器发送请求，从而减少了网络延迟和服务器负载。

协商缓存

协商缓存是指客户端在本地缓存失效时，向服务器发送一个请求，询问该资源是否有更新。服务器通过比较资源的标识（如 ETag 和 Last-Modified 等）来判断资源是否已经更新。如果资源未发生变化，则服务器返回 304 Not Modified 状态码，并在响应头部中包含新的缓存标识，客户端根据这个标识更新本地缓存；如果资源已经更新，则服务器返回新的资源内容。

Cache-Control 中的 max-age 和 no-cache

• max-age： Cache-Control 头部字段中的 max-age 指令指定了资源在客户端的缓存有效时间，单位为秒。例如，max-age=3600 表示资源在客户端缓存有效期为 3600 秒（1 小时），过期之后需要重新向服务器验证是否有更新。

• no-cache： Cache-Control 头部字段中的 no-cache 指令表示客户端在使用缓存资源时必须先向服务器发送一个请求，验证资源是否发生了变化。与 max-age 不同的是，no-cache 不会直接从本地缓存获取资源，而是先向服务器验证资源的有效性。