2025面试题大全(7)1. 在项目中封装组件时，你会有些什么样的原则？在项目中封装组件时，我会遵循以下原则：单一职

1. 在项目中封装组件时，你会有些什么样的原则？

在项目中封装组件时，我会遵循以下原则：

单一职责原则：
- 每个组件应该只负责一个功能或一组紧密相关的功能。这有助于提高组件的可复用性和可维护性。
可复用性：
- 设计组件时，应考虑其在不同场景下的复用性。避免将组件与特定页面或功能过于紧密地耦合。
可配置性：
- 提供足够的props（属性）以允许外部配置组件的行为和外观，而不是硬编码。
封装性：
- 组件的内部实现细节应对外部隐藏，只通过props和events（事件）与外部交互。
一致性：
- 组件的API设计应保持一致，比如命名规范、props类型等，以便于开发者理解和使用。
可访问性：
- 确保组件符合可访问性标准，如使用适当的ARIA属性，以便于所有用户使用，包括那些使用辅助技术的用户。
性能优化：
- 组件应进行性能优化，如避免不必要的重新渲染、使用懒加载等。
文档和注释：
- 为组件提供清晰的文档和注释，说明其用途、props、events以及如何使用。
测试：
- 为组件编写单元测试，确保其功能正确且稳定。
响应式设计：
- 组件应能够适应不同的屏幕尺寸和设备。
错误处理：
- 组件应能够妥善处理错误情况，并提供有用的错误信息。
国际化：
- 如果项目需要支持多语言，组件应考虑国际化需求。
安全性：
- 避免引入安全漏洞，如XSS攻击，确保组件安全。
渐进增强和优雅降级：
- 组件应能在不同浏览器上正常工作，对于不支持某些特性的浏览器提供降级方案。
模块化：
- 组件应模块化，便于管理和维护。遵循这些原则可以帮助我们创建出高质量、可维护、可复用的前端组件。

2. 后端一次性返回树形结构数据，数据量非常大, 前端该如何处理？

处理后端一次性返回的大量树形结构数据时，前端可以采取以下策略来优化性能和用户体验：

虚拟滚动（Virtual Scrolling）：
- 只渲染可视区域内的节点，当用户滚动时动态加载和卸载节点。这样可以大大减少同时渲染的DOM元素数量，提高性能。
分批处理（Lazy Loading）：
- 初始时只加载树的顶层节点，当用户展开某个节点时，再异步加载该节点的子节点。这样可以减少初始加载的数据量。
数据分页：
- 如果可能，可以请求后端支持分页返回树形数据，前端根据需要请求特定页面的数据。
前端缓存：
- 将已加载的节点数据缓存到前端，避免重复请求相同的数据。
按需渲染：
- 只渲染用户可能交互的节点，对于深层或不太可能被访问的节点可以延迟渲染。
Web Workers：
- 使用Web Workers在后台线程处理数据的解析和转换，避免阻塞主线程。
优化数据结构：
- 将树形数据转换为更适合前端处理的结构，如使用扁平化数组配合节点映射（map）来快速访问节点。
减少重绘和重排：
- 尽量减少DOM操作，使用文档片段（DocumentFragment）或一次性插入多个节点来减少重绘和重排。
使用高效的选择器：
- 在操作DOM时，使用高效的选择器，避免使用深层次或复杂的CSS选择器。
防抖和节流：
- 对于滚动事件等高频触发的事件，使用防抖和节流技术来减少事件处理函数的调用次数。
服务器端渲染（SSR）：
- 如果适用，可以使用服务器端渲染来初始渲染树的一部分，减少前端的负担。
优化算法：
- 使用高效的算法来处理树形数据的遍历、搜索、排序等操作。
资源加载优化：
- 使用异步加载（async）或延迟加载（defer）来优化JavaScript文件的加载。
监控和性能分析：
- 使用性能监控工具来识别瓶颈，并进行相应的优化。
用户反馈：
- 在数据加载或处理时提供用户反馈，如加载指示器，以改善用户体验。结合这些策略，可以根据具体的项目需求和数据特点选择合适的处理方式。在实际应用中，可能需要结合多种策略来达到最佳的效果。

3. Node.js 是单线程的，那该如何充分利用多核 CPU 呢？

虽然Node.js本身是单线程的，但它提供了多种方法来充分利用多核CPU，从而提高应用程序的性能。以下是一些常见的方法：

子进程（Child Processes）：
- Node.js可以创建子进程，每个子进程可以运行在不同的CPU核心上。可以使用child_process模块来创建子进程，如使用spawn、exec或fork方法。
集群（Cluster）模块：
- Node.js的cluster模块允许创建多个子进程，这些子进程可以共享同一个服务器端口。通过cluster.fork()方法，可以轻松地创建多个工作进程，每个工作进程可以在不同的CPU核心上运行。
负载均衡：
- 在使用集群模块时，可以结合负载均衡器（如Nginx或HAProxy）来分配请求到不同的工作进程，从而更好地利用多核CPU。
PM2进程管理器：
- PM2是一个Node.js的进程管理器，它可以帮助你管理和监控应用程序。PM2支持集群模式，可以自动利用所有可用的CPU核心。
异步编程：
- Node.js的非阻塞I/O和事件驱动模型允许它在I/O操作时不会阻塞主线程，从而可以在等待I/O操作完成时处理其他任务。
Web Workers：
- 虽然Web Workers主要用于浏览器环境，但Node.js也有一些类似的实现，如worker_threads模块，可以用于在Node.js环境中运行多线程。
微服务架构：
- 将应用程序拆分为多个微服务，每个微服务可以在不同的进程或服务器上运行，从而可以利用多个CPU核心。
并行计算库：
- 使用专门的库，如parallel.js或async.js，来执行并行计算任务。
优化算法：
- 优化算法，减少计算密集型任务的复杂度，从而提高单线程的效率。
外部服务：
- 对于某些计算密集型任务，可以考虑使用外部服务，如AWS Lambda或Google Cloud Functions，这些服务可以自动扩展并利用多核CPU。通过结合这些方法，可以有效地利用多核CPU，提高Node.js应用程序的性能和吞吐量。在实际应用中，需要根据具体的需求和场景选择合适的方法。

4. 前端系统中，怎么统一处理登录态过期的场景？

在前端系统中统一处理登录态过期的场景，通常涉及以下几个方面：

拦截器/中间件：
- 在前端请求拦截器中（如Axios的拦截器），检查响应状态码。如果状态码表明登录态过期（如401 Unauthorized），则进行相应的处理。
全局异常处理：
- 设置全局异常处理机制，捕获登录态过期的异常，并进行统一处理。
重定向到登录页：
- 当检测到登录态过期时，重定向用户到登录页面，提示用户重新登录。
刷新令牌：
- 如果使用刷新令牌机制，可以在检测到访问令牌过期时，自动使用刷新令牌获取新的访问令牌，而不打扰用户。
前端存储：
- 确保前端存储的登录态（如Token）在过期后能够被清除或更新。
用户提示：
- 给用户明确的提示，说明登录态已过期，需要重新登录。
事件总线/状态管理：
- 使用事件总线或状态管理库（如Redux、mobx等）来管理醒其他其他组件或页面，登录登录登录态. 定时器检查检测：
- 如果后端返回了登录态的有效期，可以在前端设置定时器，在登录态即将过期前提醒用户或自动刷新。以下是一个基于Axios拦截器的示例代码：

import axios from 'axios';
import router from './router'; // 假设使用Vue Router
// 请求拦截器
axios.interceptors.request.use(config => {
  // 可以在这里添加请求头等
  return config;
}, error => {
  // 请求错误处理
  return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  if (error.response && error.response.status === 401) {
    // 登录态过期，执行统一处理
    // 清除本地存储的登录态
    localStorage.removeItem('token');
    // 重定向到登录页
    router.push('/login');
    // 可以在这里提示用户
    alert('登录态已过期，请重新登录');
  }
  return Promise.reject(error);
});

在这个示例中，我们使用了Axios的请求和响应拦截器来检查登录态。如果响应状态码为401，我们认为登录态过期，然后清除本地存储的Token，重定向用户到登录页面，并给出提示。这种方法可以确保在整个前端系统中，登录态过期的场景得到统一处理，提高用户体验和系统的健壮性。

5. 基于 axios 实现请求超时后，自动重试

要实现基于Axios的请求超时后自动重试，可以通过自定义一个Axios实例并添加响应拦截器来实现。在响应拦截器中，检查错误类型是否为超时错误，并决定是否进行重试。以下是一个实现请求超时后自动重试的示例代码：

import axios from 'axios';
// 创建一个Axios实例
const axiosInstance = axios.create({
  timeout: 1000, // 设置请求超时时间，例如1000毫秒
  // 其他配置...
});
// 自动重试的函数
function retryRequest(config, retries, retryDelay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(axiosInstance(config));
    }, retryDelay);
  });
}
// 响应拦截器
axiosInstance.interceptors.response.use(
  response => response,
  async error => {
    const config = error.config;
    // 判断是否为超时错误并且是否配置了重试
    if (error.code === 'ECONNABORTED' && !config.__isRetryRequest) {
      config.__isRetryRequest = true; // 标记为重试请求，避免无限重试
      const retries = config.retries || 3; // 默认重试3次
      const retryDelay = config.retryDelay || 1000; // 默认重试间隔1000毫秒
      // 递减重试次数
      config._retryCount = config._retryCount || 0;
      if (config._retryCount < retries) {
        config._retryCount += 1;
        // 执行重试
        return retryRequest(config, retries, retryDelay);
      }
    }
    // 超出重试次数或不是超时错误，抛出错误
    return Promise.reject(error);
  }
);
// 使用示例
axiosInstance.get('/some-endpoint', {
  retries: 3, // 重试3次
  retryDelay: 2000, // 重试间隔2秒
})
.then(response => {
  console.log('Data fetched successfully:', response.data);
})
.catch(error => {
  console.error('Error fetching data:', error);
});

在这个示例中，我们创建了一个Axios实例并设置了请求超时时间。我们定义了一个retryRequest函数，该函数接收请求配置、重试次数和重试延迟作为参数，并返回一个延迟后的请求 promise。在响应拦截器中，我们检查错误类型是否为ECONNABORTED（表示请求超时），并且确保请求不是已经在重试中（通过__isRetryRequest标记）。如果是超时错误，并且重试次数未达到上限，我们将递增重试计数并调用retryRequest函数进行重试。通过这种方式，我们可以实现请求超时后的自动重试，同时还可以自定义重试次数和重试间隔。在实际使用中，可以根据需要调整重试策略和参数。

6. vite 使用了哪些编译器，分别有什么作用？

Vite 是一个现代的、快速的前端构建工具，它主要使用了以下几种编译器：

Esbuild：
- 作用：Esbuild 是一个快速的 JavaScript 和 CSS 打包器，它被 Vite 用于构建过程的初始阶段。Esbuild 的主要优势是它的速度，比传统的打包器如 Webpack 快很多。
- 具体功能：在 Vite 中，Esbuild 用于快速打包和转译 JavaScript 代码，包括对 TypeScript、JSX 的支持。
Babel（可选）：
- 作用：Babel是一个广泛使用的JavaScript编译器，它可以用于将现代的 JavaScript 代码转换为向后兼容的版本，以支持 older browsers。
- 具体功能：在 Vite 中，Babel 可以作为可选的插件集成，用于转换 JavaScript 代码，以支持更广泛的浏览器。Babel 的使用通常是为了利用其丰富的插件生态系统，比如用于代码压缩、语法转换等。
PostCSS：
- 作用：PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。它允许使用未来的 CSS 特性，并且可以自动添加浏览器前缀、压缩代码等。
- 具体功能：在 Vite 中，PostCSS 用于处理 CSS，包括自动添加浏览器前缀、支持 CSS 预处理器（如 Sass、Less）以及 CSS Modules 等。
SWC（可选）：
- 作用：SWC 是一个类似于 Babel 的编译器，但速度更快。它用于转换 JavaScript/TypeScript 代码。
- 具体功能：在 Vite 中，SWC 可以作为替代 Babel 的选项，用于快速转译 JavaScript 和 TypeScript 代码。
Rollup（在 Vite 2.x 及之前版本中）：
- 作用：Rollup 是一个模块打包器，它用于将多个模块打包成最终的输出文件。Rollup 以其输出文件的简洁和高效而闻名。
- 具体功能：在 Vite 的早期版本中，Rollup 被用于生产环境的打包过程。然而，随着 Vite 的发展，Esbuild 已经逐渐接管了更多的打包任务。这些编译器在 Vite 中的使用，使得 Vite 能够提供快速、高效的开发体验，同时保持对现代 JavaScript 和 CSS 特性的良好支持。随着 Vite 的不断发展，未来可能会集成更多的编译器或工具来进一步提升性能和功能。

7. esbuild 和 rollup 都是 vite 的基础依赖，它们有什么不同呢？

Esbuild 和 Rollup 都是 Vite 的基础依赖，但它们在设计和功能上有所不同：

设计目标：
- Esbuild：主要目标是速度。它使用 Go 语言编写，利用编译型语言的性能优势，提供了极快的构建速度。
- Rollup：主要目标是输出文件的简洁和模块化。它使用 JavaScript 编写，注重于提供灵活的打包功能和高质量的输出代码。
性能：
- Esbuild：由于其使用 Go 语言和并行处理，构建速度远快于 Rollup 和其他 JavaScript 编写的打包工具。
- Rollup：虽然不如 Esbuild 快，但仍然提供了相对较快的构建速度，尤其是在处理小型到中型项目时。
功能：
- Esbuild：支持 JavaScript、CSS、SVG 的打包，以及 TypeScript、JSX 的转换。但它不支持像 Rollup那样的插件系统，功能相对较少。
- Rollup：提供了丰富的插件系统，支持各种预处理、转换、优化等操作。它更适合需要高度定制化构建流程的项目。
输出：
- Esbuild：生成的输出文件通常较大，因为它不进行像 Rollup那样的深度优化。
- Rollup：生成的输出文件通常更小、更优化，因为它可以进行摇树优化（tree-shaking）、代码分割等。
使用场景：
- Esbuild：适用于需要快速构建的场景，如开发环境的热重载、快速打包等。
- Rollup：适用于需要优化输出文件大小和性能的场景，如生产环境的打包。
社区和生态系统：
- Esbuild：相对较新，但因其性能优势而迅速获得关注。生态系统正在成长。
- Rollup：拥有庞大的社区和成熟的生态系统，提供了大量的插件和工具。在 Vite 中，Esbuild 主要用于开发环境的快速构建和热重载，而 Rollup 则用于生产环境的打包和优化。这种组合利用了 Esbuild 的速度和 Rollup 的输出优化能力，为开发者提供了既快速又高效的构建体验。需要注意的是，随着 Vite 和相关工具的发展，这些角色和功能可能会有所变化。例如，Vite 的未来版本可能会进一步扩展 Esbuild 的使用范围，或者集成其他工具来进一步提升性能和功能。

8. vite 和 webpack 在热更新的实现上有什么区别？

Vite 和 Webpack 都提供了热更新（Hot Module Replacement，HMR）功能，但它们在实现上有所不同：

Vite 的热更新实现：

基于 ES Module 的原生支持：
- Vite 利用现代浏览器对 ES Module 的原生支持，实现快速的热更新。当文件发生变化时，Vite 只需要通过 HTTP 请求发送更新的模块，浏览器可以直接替换掉旧的模块，而不需要重新加载整个页面。
WebSocket 通信：
- Vite 使用 WebSocket 与浏览器建立实时通信，当文件发生变化时，服务器通过 WebSocket 向客户端发送更新通知。
快速编译：
- Vite 使用 Esbuild 作为依赖预构建工具，Esbuild 的快速编译能力使得模块的重新编译速度非常快。
按需更新：
- Vite 的热更新是按需的，只有实际发生变化的模块才会被重新编译和发送到浏览器。
样式隔离：
- Vite 对 CSS 的处理采用了样式隔离技术，确保只有变化的样式会被应用到页面上，而不会影响其他样式。

Webpack 的热更新实现：

Webpack HMR Plugin：
- Webpack 通过其内置的 HMR Plugin 实现热更新。这个插件会在构建过程中注入额外的代码，以便实现模块的替换。
Webpack Dev Server：
- Webpack Dev Server 是一个本地开发服务器，它通过 WebSocket 与浏览器通信，实现热更新。
模块替换逻辑：
- Webpack 在每个模块中注入了热更新相关的代码，当模块发生变化时，这些代码会负责替换旧的模块。
中间件和插件系统：
- Webpack 的热更新实现依赖于其复杂的中间件和插件系统，可以高度自定义，但也增加了复杂性。
全量编译：
- Webpack 在热更新时通常需要重新编译变化的模块及其依赖，这个过程可能比 Vite 的按需更新慢。

主要区别：

速度：Vite 的热更新通常比 Webpack 快，因为 Vite 利用 ES Module 的原生支持和 Esbuild 的快速编译能力。
实现方式：Vite 更多地依赖于浏览器原生的 ES Module 支持，而 Webpack 则通过注入额外的代码和插件来实现。
编译范围：Vite 可以实现更细粒度的按需更新，而 Webpack 可能需要重新编译更多模块。
复杂性：Vite 的热更新实现相对简单，而 Webpack 的实现更为复杂，提供了更多的自定义选项。总的来说，Vite 的热更新实现更现代、更快速，而 Webpack 则提供了更丰富的功能和更深的定制能力。随着前端技术的发展，这两种工具都在不断进化，以提供更好的开发体验。

9. 在域名 A 的网站上，跨域请求域名 B 上的接口，怎么在跨域请求中携带域名 B 的 Cookie 呢？

在跨域请求中携带域名 B 的 Cookie，需要满足一定的条件并采取相应的措施。以下是一些关键步骤和注意事项：

1. 确保 Cookie 的域（Domain）和路径（Path）设置正确

域名 B 的 Cookie 需要设置正确的域和路径，以便在跨域请求中可以被发送。例如，如果域名 B 是 api.example.com，则 Cookie 的域可以设置为 .example.com 或 api.example.com。

2. 设置 withCredentials

在发起跨域请求时，需要在请求中设置 withCredentials 为 true。这个属性表示是否允许发送 Cookie。

3. 确保 HTTP 响应头中包含正确的 Access-Control-Allow-Origin

域名 B 的服务器需要在响应头中包含 Access-Control-Allow-Origin，并且其值可以是域名 A 的地址或者 *（但不推荐使用 *，因为它不允许携带凭证信息）。

4. 确保 HTTP 响应头中包含 Access-Control-Allow-Credentials

域名 B 的服务器需要在响应头中包含 Access-Control-Allow-Credentials，并且其值设置为 true。

5. 发起请求

使用 XMLHttpRequest 或 fetch API 发起请求，并确保设置了 withCredentials。

示例：使用 fetch API

fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include' // 等同于 withCredentials: true
})
.then(response => {
  if (response.ok) {
    return response.json();
  }
  throw new Error('Network response was not ok.');
})
.then(data => console.log(data))
.catch(error => console.error('There has been a problem with your fetch operation:', error));

6. 注意事项

同源策略：同源策略是浏览器的一个安全特性，它限制从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。跨域请求携带 Cookie 是对同源策略的一个例外。
安全性：跨域携带 Cookie 可能带来安全风险，因此请确保只在信任的域名之间进行此类操作。
预检请求：如果请求方法不是 GET/HEAD/POST，或者请求头中包含自定义字段，浏览器会先发送一个预检请求（OPTIONS请求）以确定服务器是否允许实际请求。通过以上步骤，你可以在域名 A 的网站上发起跨域请求到域名 B，并携带域名 B 的 Cookie。请确保服务器和客户端都正确配置，以支持跨域携带凭证信息。

10. webpack 中的 webpack-dev-server 有什么作用？

webpack-dev-server 是一个基于 webpack 的开发服务器，它为开发环境提供了一个强大的服务器，以及实时重新加载（live reloading）等功能。以下是 webpack-dev-server 的主要作用和特点：

主要作用：

提供开发服务器：
- webpack-dev-server 可以启动一个本地服务器，用于在开发过程中预览和测试网页。
实时重新加载：
- 当你修改源代码后，webpack-dev-server 会自动重新编译代码，并通过 WebSocket 协议将更新推送到浏览器，实现无需手动刷新浏览器即可看到最新效果。
热模块替换（HMR - Hot Module Replacement）：
- 在不重新加载整个页面的情况下，webpack-dev-server 可以实现模块的热替换，只更新修改过的模块，提高开发效率。
代理服务器：
- 可以配置代理来解决开发过程中的跨域请求问题。
静态文件服务：
- webpack-dev-server 可以提供静态文件服务，将打包后的文件托管到本地服务器上。
模块热替换：
- 允许在运行时替换、添加或删除模块，而无需重新加载整个页面。

特点：

快速编译：webpack-dev-server 使用内存来存储编译后的文件，而不是写入磁盘，从而加快编译速度。
配置简单：可以通过 webpack.config.js 文件中的 devServer 字段进行配置。
支持多种协议：支持 HTTP/2、HTTPS 等协议。
自定义响应：可以自定义响应头、mime 类型等。
历史回退：支持配置 HTML5 History API 的回退功能。
模块热替换：支持模块热替换，可以在不刷新页面的情况下实时预览效果。

常用配置项：

contentBase：指定静态文件的根目录。
port：指定服务器端口。
host：指定服务器主机名。
hot：启用模块热替换。
open：自动打开浏览器。
proxy：配置代理服务器，解决跨域问题。
historyApiFallback：配置 HTML5 History API 的回退功能。

示例配置：

// webpack.config.js
module.exports = {
  // 其他配置...
  devServer: {
    contentBase: './dist',
    port: 8080,
    hot: true,
    proxy: {
      '/api': 'http://localhost:3000'
    },
    historyApiFallback: true
  }
};

使用方法：

安装 webpack-dev-server：

npm install --save-dev webpack-dev-server

在 webpack.config.js 中配置 devServer。
在 package.json 的 scripts 字段中添加启动脚本：

"scripts": {
  "start": "webpack-dev-server --open"
}

运行启动脚本：

npm start

通过使用 webpack-dev-server，前端开发者可以更高效地进行开发、调试和测试工作。

11. webpack 中的 webpack-dev-server 为什么不适用于线上环境？

webpack-dev-server 主要设计用于开发环境，而不是生产环境。以下是一些原因，解释了为什么 webpack-dev-server 不适用于线上环境：

内存存储：
- webpack-dev-server 将编译后的文件存储在内存中，而不是写入磁盘。这种做法在开发环境中可以提高编译速度，但在生产环境中，我们需要将编译后的文件持久化到磁盘上，以便服务器可以提供这些文件。
实时重新加载和热模块替换：
- webpack-dev-server 提供了实时重新加载和热模块替换（HMR）功能，这些功能在开发过程中非常有用，但在线上环境中通常不需要，因为生产环境的代码应该是稳定且经过充分测试的。
开发服务器：
- webpack-dev-server 是一个开发服务器，它并不是为了处理高并发、安全性和稳定性等生产环境的需求而设计的。
缺乏安全性：
- webpack-dev-server 可能没有配置足够的安全措施，如HTTPS、CSP（内容安全策略）等，这些在生产环境中是必需的。
性能优化：
- 生产环境通常需要更多的性能优化，如代码压缩、tree shaking、懒加载等，这些优化可能不是 webpack-dev-server 的默认配置。
静态文件服务：
- webpack-dev-server 可以提供静态文件服务，但在生产环境中，通常会有更专业的静态文件服务器或CDN来处理静态资源的分发。
代理和路由：
- webpack-dev-server 的代理和路由配置可能不适合生产环境的需求，生产环境可能需要更复杂的路由和代理策略。
日志和监控：
- 生产环境需要详细的日志和监控来跟踪应用的状态和性能，而 webpack-dev-server 可能不提供这些功能。
自定义服务器配置：
- 在生产环境中，可能需要自定义服务器配置，如SSL证书、HTTP头、缓存策略等，这些配置在 webpack-dev-server 中可能不容易实现。
构建输出：
- webpack-dev-server 的构建输出可能不适合生产环境，例如，它可能不会生成 sourcemaps 或其他用于生产环境的特定文件。为了在生产环境中部署应用，通常会使用 webpack 的生产配置进行打包，然后使用专业的Web服务器（如Nginx、Apache等）或云服务来提供静态文件和服务。这样可以确保应用在生产环境中的性能、安全性和稳定性。

12. 常见的登录鉴权方式有哪些？

常见的登录鉴权方式有多种，每种方式都有其特点和适用场景。以下是一些常见的登录鉴权方式：

基于用户名和密码的认证：
- 用户输入用户名和密码，服务器验证凭据的有效性。为了安全，密码通常会在客户端进行哈希处理，并在服务器端存储哈希值而非明文密码。
基于令牌的认证（Token-Based Authentication）：
- 用户登录后，服务器生成一个令牌（如JWT，JSON Web Token），客户端在后续请求中携带这个令牌以证明身份。
基于Session的认证：
- 用户登录后，服务器创建一个Session，并在客户端设置一个Cookie来存储Session ID。后续请求中，客户端会自动发送Cookie，服务器通过Session ID识别用户。
OAuth：
- 一种授权框架，允许第三方应用通过授权服务器获取对用户资源的访问权限，而无需用户透露其凭据。常见的实现有OAuth 2.0。
OpenID Connect：
- 建立在OAuth 2.0之上的身份层，提供了认证机制，允许客户端确认终端用户的身份，并获取基本"profile"信息。
基于角色的访问控制（RBAC）：
- 通过分配角色给用户，并基于角色来控制对资源的访问权限。
基于属性的访问控制（ABAC）：
- 根据用户的属性、资源的属性和环境条件来决定是否授予访问权限。
双因素认证（2FA）：
- 结合两种不同的认证方式，如密码和一次性验证码（通过短信、邮件或认证应用生成）。
多因素认证（MFA）：
- 结合多种认证方式，提供更高的安全级别。
生物特征认证：
- 使用指纹、面部识别、声纹等生物特征进行认证。
单点登录（SSO）：
- 用户只需登录一次，就可以访问多个应用或服务，而无需重复认证。
LDAP（轻量级目录访问协议）：
- 用于访问和维护分布式目录信息，常用于企业环境中的用户认证。
Kerberos：
- 一种网络认证协议，用于客户端和服务器之间的认证，常用于Windows域环境中。
SAML（安全断言标记语言）：
- 一种基于XML的标准，用于在不同的安全域之间交换认证和授权数据。
WebAuthn（Web认证）：
- 一种新的Web标准，允许用户通过生物识别、移动设备等新型认证方式登录Web应用。选择哪种登录鉴权方式取决于应用的需求、安全级别、用户体验和开发资源。在实际应用中，通常会根据具体情况组合使用多种鉴权方式。

13. OAuth2.0 是什么，是怎么实现授权第三方应用登录的？

OAuth 2.0 是一种授权框架，允许第三方应用在未经用户密码的情况下访问其在其他服务提供商上的信息。它专门用于授权，而不是认证。OAuth 2.0 定义了几个角色：

资源拥有者（Resource Owner）：能够授权访问其受保护资源的实体，通常是用户。
客户端（Client）：请求访问资源拥有者受保护资源的第三方应用。
授权服务器（Authorization Server）：在资源拥有者授权后，向客户端发放访问令牌的服务器。
资源服务器（Resource Server）：存储受保护资源的服务器，接受访问令牌并响应客户端的请求。 OAuth 2.0 的授权流程通常如下：

客户端注册：客户端首先在授权服务器上注册，获取客户端ID和客户端密钥。
获取授权码：
- 客户端将用户重定向到授权服务器的授权页面。
- 用户登录并授权客户端访问其资源。
- 授权服务器将用户重定向回客户端，并附带一个授权码。
交换访问令牌：
- 客户端使用授权码向授权服务器请求访问令牌。
- 授权服务器验证授权码和客户端身份，然后发放访问令牌。
访问资源：
- 客户端使用访问令牌向资源服务器请求受保护资源。
- 资源服务器验证访问令牌，如果有效，则向客户端提供请求的资源。 OAuth 2.0 定义了多种授权流程，以适应不同的场景：

授权码流程（Authorization Code Flow）：适用于客户端和授权服务器之间的通信可以保证安全的情况。
隐式流程（Implicit Flow）：适用于客户端无法安全地存储客户端密钥的情况，如单页应用。
资源所有者密码凭证流程（Resource Owner Password Credentials Flow）：适用于客户端与资源拥有者之间有高度信任的情况。
客户端凭证流程（Client Credentials Flow）：适用于客户端访问其自己的资源，而不是代表资源拥有者访问资源。 OAuth 2.0 的优势：
安全：用户不需要向第三方应用透露其密码。
灵活：支持多种授权流程和场景。
广泛采用：被许多大型服务提供商和第三方应用广泛采用。 需要注意的是，OAuth 2.0 只负责授权，不负责认证。如果需要认证用户身份，可以结合使用OpenID Connect等认证层。

14. 请求 Header 中的 Content-Type ，有哪些常见的值?

请求 Header 中的 Content-Type 用于指示发送给服务器的数据的类型。以下是一些常见的 Content-Type 值：

application/json：
- 表示发送的数据为 JSON 格式，这是现代 Web 应用中最常用的数据格式之一。
application/x-www-form-urlencoded：
- 表示发送的数据为 URL 编码的表单数据，常用于 HTML 表单提交。
multipart/form-data：
- 表示发送的数据为多部分表单数据，常用于文件上传。
text/plain：
- 表示发送的数据为纯文本格式。
text/html：
- 表示发送的数据为 HTML 格式。
application/xml 或 text/xml：
- 表示发送的数据为 XML 格式。
application/octet-stream：
- 表示发送的数据为二进制流，通常用于文件下载。
image/jpeg、image/png、image/gif 等：
- 表示发送的数据为特定格式的图像文件。
application/graphql：
- 表示发送的数据为 GraphQL 查询格式。
application/vnd.api+json：
- 表示发送的数据为 JSON:API 格式，是一种用于 API 的 JSON 文档格式。
application/javascript：
- 表示发送的数据为 JavaScript 代码。
application/pdf：
- 表示发送的数据为 PDF 文档。
application/zip：
- 表示发送的数据为 ZIP 压缩文件。
application/vnd.ms-excel、application/vnd.openxmlformats-officedocument.spreadsheetml.sheet：
- 表示发送的数据为 Excel 文件，后者用于新的 Excel 文件格式（.xlsx）。
application/vnd.ms-word、application/vnd.openxmlformats-officedocument.wordprocessingml.document：
- 表示发送的数据为 Word 文件，后者用于新的 Word 文件格式（.docx）。 设置 Content-Type 的方式：

在 HTTP 请求中，Content-Type 通常作为请求头的一部分发送：

POST /api/resource HTTP/1.1
Host: example.com
Content-Type: application/json

在前端代码中，可以使用各种 HTTP 客户端库来设置 Content-Type，例如使用 JavaScript 的 fetch API：

fetch('/api/resource', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

选择正确的 Content-Type 是非常重要的，因为它会影响服务器如何解析和处理接收到的数据。如果 Content-Type 设置错误，可能会导致数据解析失败或安全问题。

15. 如果想在图片这块做性能优化，你有哪些思路？

在图片性能优化方面，以下是一些常见的思路和策略：

1. 选择合适的图片格式

JPEG：适合照片和色彩丰富的图片，压缩率高，但无损压缩会导致质量下降。
PNG：适合需要透明度的图片，无损压缩，文件大小可能比JPEG大。
WebP：现代格式，提供有损和无损压缩，通常比JPEG和PNG更小，支持透明度。
AVIF：新的图像格式，提供比WebP更好的压缩率，但兼容性尚在发展中。
SVG：适合矢量图形，可以无限缩放而不失真，文件大小通常较小。

2. 压缩图片

使用工具如ImageMagick、TinyPNG、ImageOptim等压缩图片，减少文件大小。
在不显著影响质量的前提下，尽可能使用更高的压缩率。

3. 响应式图片

使用<img>标签的srcset属性提供不同分辨率的图片，让浏览器根据设备屏幕大小和分辨率选择合适的图片。
使用<picture>元素为不同屏幕尺寸和分辨率提供不同的图片源。

4. 图片懒加载

只有当图片进入视口时才加载图片，减少初始页面加载时间。
可以使用 Intersection Observer API 或懒加载库实现。

5. 使用CDN

将图片存储在CDN上，利用CDN的分布式服务器加快图片的加载速度。

6. 缓存策略

设置合理的HTTP缓存头，如Cache-Control，让浏览器缓存图片，减少重复加载。

7. 图片尺寸

根据需要显示的图片尺寸裁剪图片，避免加载过大的图片后再进行缩放。

8. 图像优化工具

使用自动化工具如Webpack的image-webpack-loader、Gulp的gulp-imagemin等在构建过程中自动优化图片。

9. 占位符

使用低质量的图片或占位符作为图片加载时的临时显示，提升用户体验。

10. Web字体代替图标图片

对于图标，可以使用Web字体（如FontAwesome、Material Icons）代替图片，减少HTTP请求。

11. 使用图像精灵（Sprite）

将多个小图标合并成一张大图，通过CSS背景定位显示所需图标，减少HTTP请求。

12. 避免使用Base64编码的图片

Base64编码的图片会增加HTML或CSS文件的大小，除非图片非常小，否则应避免使用。

13. 使用现代图像解码器

利用浏览器支持的现代图像解码器（如AV1解码器）来提高图像的解码速度。

14. 监控和分析

使用性能监控工具分析图片加载时间，找出优化空间。通过结合这些策略，可以显著提高网站或应用的图片加载性能，提升用户体验。

16. 如何禁止他人使用控制台调试前端页面代码?

完全禁止他人使用控制台调试前端页面代码是非常困难的，因为一旦代码被发送到客户端，用户就有能力查看和修改它。然而，你可以采取一些措施来增加调试的难度，或者阻止一些简单的控制台访问。以下是一些常见的方法：

1. 控制台警告

console.log('%c%s', 'color: red; font-size: 20px;', '警告：禁止使用控制台！');
// 或者更复杂的警告
console.log(`%c
  ***************************************************
  *                                                 *
  *                禁止使用控制台！                 *
  *                                                 *
  ***************************************************
`, 'color: red; font-size: 16px;');

2. 检测控制台打开

// 通过设置一个陷阱来检测控制台是否被打开
var consoleOpen = false;
console.log = (function(oldLog){
    return function(){
        consoleOpen = true;
        oldLog.apply(console, arguments);
    };
})(console.log);
// 定期检查
setInterval(function(){
    if(consoleOpen){
        // 执行一些操作，比如隐藏敏感信息或警告用户
        alert('检测到控制台打开！');
    }
}, 1000);

3. 使用JavaScript库

有一些JavaScript库可以帮助你阻止控制台访问，例如console-blocker。

4. 禁用右键和快捷键

document.addEventListener('contextmenu', event => event.preventDefault());
document.addEventListener('keydown', function(event) {
    if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
        event.preventDefault();
    }
});

5. 使用CSS

/* 防止控制台元素被选中 */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

6. 加密和混淆代码

使用工具如Webpack、Babel、UglifyJS等对代码进行压缩、混淆和加密，增加阅读难度。

7. 使用服务端渲染（SSR）

将部分逻辑放在服务器端执行，减少前端代码的复杂度。

8. 设置HTTP头

通过设置HTTP头来禁止浏览器缓存脚本文件，这样每次加载都是新的代码，增加调试难度。

注意事项：

这些方法并不能完全阻止有经验的开发者调试你的代码。
过度使用这些方法可能会影响正常用户的使用体验。
在某些国家和地区，禁止用户查看和调试前端代码可能违反法律。总之，这些方法可以在一定程度上增加调试难度，但无法完全阻止。最重要的是，确保你的代码没有安全漏洞，并且敏感信息不应该仅靠前端来保护。

17. 说说 TypeScript 中，有哪些内置的类型方法和工具类型

TypeScript 提供了一系列内置类型方法和工具类型，这些可以帮助开发者更方便地进行类型操作和转换。以下是一些常见的内置类型方法和工具类型：

内置类型方法

typeof

用于获取一个变量或对象的类型。

let s = "hello";
let n: typeof s; // 类型为 string

keyof

用于获取一个对象类型的所有键的联合类型。

type Person = { name: string; age: number };
type PersonKeys = keyof Person; // "name" | "age"

typeof 与 keyof 结合

可以用来获取对象属性的类型。

let person = { name: "Alice", age: 25 };
type NameType = typeof person['name']; // 类型为 string

instanceof

用于检查一个对象是否是某个类的实例。

class Animal {}
let a = new Animal();
let isAnimal: a instanceof Animal; // 类型为 boolean

工具类型

Partial<T>

将类型 T 的所有属性变为可选。

type PartialPerson = Partial<Person>; // { name?: string; age?: number; }

Required<T>

将类型 T 的所有属性变为必选。

type RequiredPerson = Required<PartialPerson>; // { name: string; age: number; }

Readonly<T>

将类型 T 的所有属性变为只读。

type ReadonlyPerson = Readonly<Person>; // { readonly name: string; readonly age: number; }

Record<K, T>

创建一个类型，其属性键为 K，属性值为 T。

type RecordPerson = Record<'name' | 'age', string>; // { name: string; age: string; }

Pick<T, K>
- 从类型 T 中选择一组属性 K 来构造一个新的类型。
```
type PickPerson = Pick<Person, 'name'>; // { name: string; }
```
Omit<T, K>
- 从类型 T 中排除一组属性 K 来构造一个新的类型。
```
type OmitPerson = Omit<Person, 'age'>; // { name: string; }
```

Exclude<T, U>

从类型 T 中排除可以赋值给 U 的类型。

type ExcludeType = Exclude<'a' | 'b' | 'c', 'a'>; // 'b' | 'c'

Extract<T, U>

从类型 T 中提取可以赋值给 U 的类型。

type ExtractType = Extract<'a' | 'b' | 'c', 'a' | 'd'>; // 'a'

NonNullable<T>

从类型 T 中排除 null 和 undefined。

type NonNullableType = NonNullable<string | null | undefined>; // string

Parameters<T>

获取函数类型 T 的参数类型组成的元组类型。

type ParametersType = Parameters<(a: number, b: string) => void>; // [number, string]

ReturnType<T>

获取函数类型 T 的返回值类型。

type ReturnTypeType = ReturnType<() => string>; // string

ConstructorParameters<T>

获取构造函数类型 T 的参数类型组成的元组类型。

type ConstructorParametersType = ConstructorParameters<typeof Array>; // [number]

Uppercase<StringType>
- 将字符串字面量类型转换为大写。
```
type UppercaseType = Uppercase<'hello'>; // 'HELLO'
```
Lowercase<StringType>
- 将字符串字面量类型转换为小写。
```
type LowercaseType = Lowercase<'HELLO'>; // 'hello'
```
Capitalize<StringType>
- 将字符串字面量类型的

18. 如果有 git 仓库需要迁移，应该怎么操作？

迁移 Git 仓库通常涉及将仓库从一个位置复制到另一个位置，同时保留所有的历史记录和元数据。以下是几种常见的迁移 Git 仓库的方法：

方法一：使用 `git clone` 和 `git push`

克隆原仓库：
```
git clone --bare <原仓库地址> <临时目录>
```
--bare 参数表示克隆一个裸仓库，即不包含工作区的仓库，只有版本历史。
推送至新仓库：
```
cd <临时目录>
git push --mirror <新仓库地址>
```
--mirror 参数表示将所有分支和标签都推送到新仓库。
清理：
```
cd ..
rm -rf <临时目录>
```

方法二：使用 `git remote` 和 `git push`

添加新远程仓库：

git remote add <新远程仓库名> <新仓库地址>

推送至新仓库：

git push <新远程仓库名> --all
git push <新远程仓库名> --tags

--all 推送所有分支，--tags 推送所有标签。

可选：移除原远程仓库：
```
git remote remove <原远程仓库名>
```

方法三：使用 `git clone` 和 `git init`（如果需要重新初始化仓库）

克隆原仓库：

git clone <原仓库地址> <新目录>

进入新目录：
```
cd <新目录>
```
移除原远程仓库：
```
git remote remove origin
```

初始化新仓库：

git init
git remote add origin <新仓库地址>

推送至新仓库：

git push -u origin --all
git push -u origin --tags

注意事项：

权限问题：确保你有权限访问原仓库和新仓库。
大文件：如果仓库中包含大文件，可以考虑使用 git-lfs（Git Large File Storage）。
钩子和其他元数据：如果仓库有钩子或其他特殊配置，需要手动迁移。
CI/CD集成：如果仓库与CI/CD系统集成，需要更新集成配置。

特殊情况：

如果原仓库无法访问：可能需要使用其他方法，如通过文件系统复制 .git 目录。
如果需要更改仓库历史：可以使用 git filter-branch 或其他工具来重写历史。在选择迁移方法时，应根据具体情况和需求选择最合适的方式。如果仓库很大或非常重要，建议在迁移前进行备份。

19. 有了解过 Protobuf 吗？

是的，我有了解过 Protobuf。 Protobuf，全称Protocol Buffers，是Google开发的一种用于序列化结构化数据的工具，类似于XML、JSON等数据描述语言，但更小、更快、更简单。它用于定义数据的结构，然后生成相应的代码来处理这些数据。以下是我对Protobuf的一些基本了解：

定义数据结构：
- 使用Proto文件（.proto）来定义数据结构，类似于接口描述语言（IDL）。
- 定义中包括消息类型、字段、字段类型等。
生成代码：
- 使用Protobuf编译器（protoc）根据Proto文件生成特定语言的代码（如Java、C++、Python等）。
- 生成的代码包括数据访问类，用于序列化和反序列化数据。
序列化和反序列化：
- 序列化：将数据结构转换为字节流，便于存储或传输。
- 反序列化：将字节流还原为数据结构。
优势：
- 高效：相比XML和JSON，Protobuf的序列化后的数据更小，解析速度更快。
- 跨语言：支持多种编程语言，便于不同语言之间的数据交换。
- 向后兼容：可以在不破坏现有代码的情况下扩展数据结构。
使用场景：
- RPC通信：常用于RPC（远程过程调用）系统中，如gRPC就是基于Protobuf的。
- 数据存储：用于存储结构化数据，如数据库的序列化格式。
- 配置文件：作为应用的配置文件格式。
基本语法：
- syntax = "proto3";：指定使用的Protobuf版本。
- message：定义一个消息类型。
- required、optional、repeated：字段修饰符，分别表示必需字段、可选字段和重复字段（列表）。例如，一个简单的Proto文件可能如下所示：

syntax = "proto3";
message Person {
  string name = 1;
  int32 id = 2;
  string email = 3;
}

在这个例子中，Person 是一个消息类型，包含三个字段：name、id 和 email。总的来说，Protobuf是一种高效、跨语言、可扩展的数据序列化工具，广泛应用于各种场景中。如果你有具体的问题或需要更深入的了解，请随时提问。

20. 你知道哪些常见的网络协议？

常见的网络协议有很多，以下是一些主要的协议：

HTTP/HTTPS：
- HTTP（超文本传输协议）：用于从网络服务器传输超文本到本地浏览器的传输协议。
- HTTPS（安全的超文本传输协议）：在HTTP的基础上加入了SSL/TLS协议，用于安全加密传输。
TCP/UDP：
- TCP（传输控制协议）：一种面向连接的、可靠的、基于字节流的传输层通信协议。
- UDP（用户数据报协议）：一种无连接的、不可靠的传输层协议，用于快速数据传输。
IP：
- IP（互联网协议）：用于网络层，负责数据包的寻址和路由。
FTP：
- FTP（文件传输协议）：用于在网络上进行文件传输的协议。
SMTP/POP3/IMAP：
- SMTP（简单邮件传输协议）：用于发送电子邮件的协议。
- POP3（邮局协议版本3）：用于接收电子邮件的协议。
- IMAP（互联网邮件访问协议）：另一种用于接收电子邮件的协议，支持邮件在服务器上的管理。
DNS：
- DNS（域名系统）：用于将域名解析为IP地址的协议。
SSH：
- SSH（安全外壳协议）：用于加密网络连接，常用于远程登录和命令执行。
TLS/SSL：
- TLS（传输层安全协议）和SSL（安全套接字层）：用于在互联网上提供安全通信的协议。
S/MIME：
- S/MIME（安全/多用途互联网邮件扩展）：用于电子邮件的加密和数字签名。
PPTP/L2TP/IPsec：
- PPTP（点对点隧道协议）、L2TP（第二层隧道协议）和IPsec（互联网协议安全）：用于虚拟私人网络（VPN）的协议。
ICMP：
- ICMP（互联网控制消息协议）：用于在主机与路由器之间传递控制消息，如报告错误、交换受限控制和状态信息等。
ARP/RARP：
- ARP（地址解析协议）和RARP（反向地址解析协议）：用于将IP地址解析为物理地址（MAC地址）。
WebSocket：
- WebSocket：一种在单个TCP连接上进行全双工通信的协议，常用于实时数据传输。
MQTT：
- MQTT（消息队列遥测传输）：一种轻量级的发布/订阅消息传输协议，常用于物联网。
AMQP：
- AMQP（高级消息队列协议）：一种开放标准的消息传递协议，用于在分布式系统中传递消息。这些协议在不同的网络层次和场景中发挥着重要作用，确保了网络通信的顺利进行。作为前端开发者，最常接触的可能是HTTP/HTTPS、WebSocket等与浏览器和服务器通信相关的协议。

21. 如果需要使用 JS 执行 100 万个任务，如何保证浏览器不卡顿？

要使用JavaScript执行100万个任务而不导致浏览器卡顿，可以采用以下策略：

使用Web Workers：
- Web Workers允许你在后台线程中运行JavaScript代码，从而不会阻塞主线程。可以将耗时的任务分配给Web Workers处理。
异步编程：
- 利用async/await、Promises等异步编程技术，确保任务不会阻塞主线程。
分批执行：
- 将100万个任务分成小批次，使用setTimeout或requestAnimationFrame在浏览器空闲时执行每一批任务。
节流和防抖：
- 如果任务是响应式的（如事件处理），使用节流（throttle）和防抖（debounce）技术减少触发频率。
优化算法：
- 优化任务的算法，减少计算量，避免不必要的复杂操作。
使用WebAssembly：
- 对于计算密集型任务，可以考虑使用WebAssembly，它提供了更接近硬件的执行效率。
利用浏览器空闲时间：
- 使用requestIdleCallback API在浏览器空闲时执行任务，这样不会影响用户界面的响应性。
避免大规模DOM操作：
- 如果任务涉及DOM操作，尽量减少直接操作DOM的次数，使用虚拟DOM或文档片段（DocumentFragment）。
内存管理：
- 注意内存使用，避免内存泄漏，及时释放不再需要的资源。
使用服务端：
- 如果可能，将部分任务转移到服务器端处理，减轻客户端负担。以下是一个简单的示例，展示如何使用setTimeout分批执行任务：

function performTasks(tasks, batchSize) {
  let index = 0;
  function executeBatch() {
    const batch = tasks.slice(index, index + batchSize);
    batch.forEach(task => {
      // 执行单个任务
      task();
    });
    index += batchSize;
    if (index < tasks.length) {
      setTimeout(executeBatch, 0);
    }
  }
  setTimeout(executeBatch, 0);
}
// 假设有一个包含100万个任务的数组
const tasks = new Array(1000000).fill(() => {
  // 这里是单个任务的实现
  // 例如：计算、数据处理等
});
// 分批执行，每批1000个任务
performTasks(tasks, 1000);

在这个示例中，我们创建了一个performTasks函数，它接受任务数组和每批任务的大小作为参数。函数内部使用setTimeout来异步执行每一批任务，从而避免阻塞主线程。通过结合这些策略，可以有效地执行大量任务，同时保持浏览器的流畅性和响应性。

22. http 协议中的 CSP 是什么？

CSP 是 Content Security Policy 的缩写，中文称为内容安全策略。它是一种安全标准，用于防止跨站脚本攻击（XSS）、数据注入攻击等某些类型的攻击。CSP 通过在 HTTP 响应头中指定一系列规则，来控制浏览器允许加载哪些资源，以及如何处理这些资源。 CSP 的主要目标是通过减少攻击面来防止恶意脚本的执行。它可以让网站管理员指定哪些动态资源是允许加载的，从而减少XSS攻击的可能性。

CSP 常见指令：

default-src：为其他指令提供默认值。
script-src：指定允许执行的脚本来源。
style-src：指定允许加载的样式表来源。
img-src：指定允许加载的图像来源。
connect-src：指定允许发起连接的URL来源（如XMLHttpRequest、WebSockets等）。
font-src：指定允许加载的字体来源。
object-src：指定允许加载的插件来源。
media-src：指定允许加载的媒体文件来源。
frame-src：指定允许嵌入的框架来源。
sandbox：为页面上的所有iframe应用沙盒规则。
report-uri：指定违反CSP策略时，浏览器应该发送报告的URL。

示例：

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.example.com; img-src 'self' https://images.example.com;

这个示例中，CSP策略规定了：

默认情况下，只允许加载与当前页面同源的资源。
脚本只能从当前源和https://apis.example.com加载。
图像只能从当前源和https://images.example.com加载。通过实施CSP，网站管理员可以显著提高网站的安全性，减少恶意攻击的风险。不过，需要注意的是，CSP并不是万能的，它只是多层安全策略中的一层，应该与其他安全措施结合使用。

23. 说说你对 http 协议中 HSTS 的理解

HSTS 是 HTTP Strict Transport Security 的缩写，中文称为HTTP严格传输安全。它是一种安全机制，用于帮助防止中间人攻击（MITM）和协议降级攻击。HSTS通过在HTTP响应头中添加一个特定的字段来告诉浏览器，这个网站应该只通过HTTPS来访问，而不是HTTP。

HSTS的工作原理：

当用户首次通过HTTPS访问一个支持HSTS的网站时，服务器会在响应头中包含一个Strict-Transport-Security字段。
浏览器接收到这个字段后，会将该网站记录为一个只能通过HTTPS访问的站点。
在后续的访问中，即使用户尝试通过HTTP访问该网站，浏览器也会自动将请求升级为HTTPS。

HSTS的主要优点：

防止协议降级攻击：攻击者无法通过将HTTPS请求降级为HTTP来窃取信息。
防止中间人攻击：由于浏览器会自动使用HTTPS，攻击者无法通过拦截HTTP请求来插入恶意内容。
提高性能：通过减少HTTP到HTTPS的重定向，可以略微提高页面加载速度。

HSTS的示例：

Strict-Transport-Security: max-age=31536000; includeSubDomains

这个示例中，max-age=31536000表示HSTS策略的有效期为31536000秒（约1年），includeSubDomains表示该策略也适用于该域的所有子域名。

注意事项：

初始访问问题：用户首次访问网站时，如果是通过HTTP，那么HSTS策略不会被应用。为了解决这个问题，可以将网站加入到浏览器的HSTS预加载列表中。
过期问题：HSTS策略有有效期，过期后需要重新通过HTTPS访问来更新策略。
错误配置风险：如果错误地配置了HSTS，可能会导致网站无法通过HTTP访问，甚至无法访问。总的来说，HSTS是一种有效提高网站安全性的机制，特别是对于需要高度安全性的网站，如银行、电子商务等，实施HSTS是非常有必要的。

24. CORS 请求中，什么情况下会触发预检请求？

CORS（Cross-Origin Resource Sharing，跨源资源共享）是一种机制，允许网页从不同的源（域名、协议或端口）请求资源。在CORS请求中，预检请求（也称为预检 OPTIONS 请求）是一种用于检查实际请求是否安全的方法。以下情况会触发预检请求：

请求方法不是简单方法：简单方法包括GET、HEAD和POST。如果使用其他HTTP方法，如PUT、DELETE、CONNECT、OPTIONS、TRACE或PATCH，将会触发预检请求。
自定义请求头：如果请求中包含了除简单头部（如Accept、Accept-Language、Content-Language、Content-Type等）之外的自定义头部，将会触发预检请求。
Content-Type不是简单类型：如果请求的Content-Type不是以下三种简单类型之一，将会触发预检请求：
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
请求包含凭据：如果请求设置了凭据（如Cookies或HTTP认证信息），并且没有明确允许凭据，将会触发预检请求。
请求的目标源与当前页面不同：如果请求的源（协议、域名、端口）与当前页面的源不同，且没有设置适当的CORS策略，将会触发预检请求。预检请求的过程如下：
浏览器发送一个OPTIONS请求到服务器，询问是否允许执行实际请求。
服务器检查请求的方法、头部和源，然后决定是否允许跨源请求。
服务器在响应中包含适当的CORS头部，如Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers。
如果服务器允许请求，浏览器将执行实际请求；如果不允许，浏览器将阻止实际请求。预检请求的目的是为了确保跨源请求不会对服务器造成未预期的副作用，同时给服务器一个机会来决定是否接受实际请求。

25. 对于分页的列表，怎么解决快速翻页场景下的竞态问题？

在分页列表中，快速翻页可能会导致竞态问题，即多个并发请求同时发出，但响应的返回顺序不确定，可能导致数据状态不一致或显示错误。以下是一些解决快速翻页场景下竞态问题的策略：

1. 取消前一个未完成的请求

当用户发起一个新的分页请求时，如果前一个请求还未完成，可以取消前一个请求。
在前端，可以使用AbortController（Web API）来取消fetch请求，或者使用Axios等库的取消令牌（cancel token）。

2. 请求队列管理

维护一个请求队列，确保同一时间只有一个分页请求在执行。
新的请求到来时，如果已有请求在执行，可以将新请求放入队列或直接取消旧请求。

3. 响应顺序控制

为每个请求分配一个序列号或时间戳。
响应返回时，检查序列号或时间戳，只处理最新的请求的响应。

4. 锁定翻页操作

在发出分页请求后，暂时锁定翻页按钮或操作，直到当前请求完成。
请求完成后，解锁翻页操作，允许用户继续翻页。

5. 使用状态管理库

使用Redux、MobX等状态管理库来管理分页状态。
通过状态管理来控制请求的发出和响应的处理，确保状态的一致性。

6. 优化后端接口

后端接口支持快速翻页，例如通过提供游标或偏移量来实现更高效的分页。
后端可以限制请求频率，避免过多并发请求。

示例代码（使用AbortController取消请求）：

let abortController = new AbortController();
function fetchPage(pageNumber) {
  // 取消前一个未完成的请求
  abortController.abort();
  abortController = new AbortController();
  fetch(`/api/items?page=${pageNumber}`, { signal: abortController.signal })
    .then(response => response.json())
    .then(data => {
      // 处理数据
    })
    .catch(error => {
      if (error.name === 'AbortError') {
        console.log('请求被取消');
      } else {
        console.error('请求失败', error);
      }
    });
}
// 快速翻页时调用
fetchPage(2);
fetchPage(3); // 这将取消对页码2的请求

通过结合这些策略，可以有效地解决快速翻页场景下的竞态问题，提高用户体验。选择哪种策略取决于具体的应用场景和需求。

26. JS 代码放在 head 里和放在 body 里有什么区别？

JavaScript 代码放置在 HTML 文档的 <head> 标签和 <body> 标签中，主要区别在于代码的加载和执行时机，这可能会影响到页面的渲染性能和用户体验。以下是具体的区别：

1. 加载和执行时机

放在 <head> 里：

代码会在 HTML 文档的解析过程中尽早加载和执行。
如果没有使用 async 或 defer 属性，JavaScript 的执行会阻塞 DOM 的解析，导致页面显示延迟。 放在 <body> 里（通常在闭合标签 </body> 之前）：
代码会在 DOM 解析完成后才加载和执行。
这意味着页面的内容已经解析完毕，用户可以看到页面内容，而后再执行 JavaScript，不会阻塞页面的渲染。

2. 使用 `async` 和 `defer`

async 属性：

当 JavaScript 文件使用 async 属性时，无论代码放在 <head> 还是 <body>，它都会在文件下载完成后尽快执行，不会阻塞 DOM 解析，但可能会在 DOM 解析过程中执行，执行时机不确定。 defer 属性：
当 JavaScript 文件使用 defer 属性时，代码会在整个 HTML 文档解析完成后，但在 DOMContentLoaded 事件触发前执行。这样即使代码放在 <head> 中，也不会阻塞 DOM 的解析。

3. 用户体验

放在 <head> 里：

如果没有适当的措施（如使用 async 或 defer），可能会导致用户看到空白页面，直到 JavaScript 加载和执行完成。 放在 <body> 里：
用户可以更快地看到页面内容，因为 DOM 已经解析完成，JavaScript 代码的执行不会影响内容的显示。

4. 实践建议

推荐使用 defer： 对于大多数脚本，尤其是那些依赖于 DOM 的脚本，使用 defer 属性并将代码放在 <head> 中是一个好的选择。这样可以确保脚本在 DOM 完全解析后执行，同时不会阻塞解析过程。
使用 async： 对于那些不依赖于 DOM 且可以独立运行的脚本，可以使用 async 属性。这些脚本可以在下载完成后立即执行，提高加载速度。
放在 </body> 前： 如果不使用 async 或 defer，将脚本放在 </body> 标签之前是传统的做法，这样可以确保脚本在 DOM 内容加载完成后执行，不会阻塞内容的显示。

示例

放在 <head> 里 with defer：

<head>
  <script src="example.js" defer></script>
</head>

放在 <body> 里 before </body>：

<body>
  <!-- 页面内容 -->
  <script src="example.js"></script>
</body>

总之，选择将 JavaScript 代码放在 <head> 还是 <body> 中，应该基于代码的执行需求和对页面渲染性能的影响。现代网页开发中，defer 和 async 属性提供了更灵活的加载和执行控制。

27. 如何检测网页空闲状态（即一定时间内无操作）？

检测网页空闲状态，即一定时间内无操作，通常可以通过监听用户的活动事件（如鼠标移动、键盘敲击等）并设置一个定时器来实现。以下是一些常用的方法：

1. 使用 `setTimeout` 和事件监听

let idleTimer;
function resetIdleTimer() {
  clearTimeout(idleTimer);
  idleTimer = setTimeout(() => {
    console.log('用户已空闲');
    // 在这里处理空闲状态
  }, 30000); // 30秒无操作视为空闲
}
// 监听用户活动事件
['mousemove', 'keydown', 'wheel', 'DOMMouseScroll', 'mousewheel', 'mousedown', 'touchstart', 'touchmove', 'scroll', 'resize'].forEach(event => {
  window.addEventListener(event, resetIdleTimer);
});
// 初始化空闲定时器
resetIdleTimer();

2. 使用 `requestIdleCallback` (现代浏览器支持)

requestIdleCallback 是一个实验性API，允许你将任务安排在浏览器空闲时执行。

let idleHandle;
function handleIdle() {
  console.log('用户已空闲');
  // 在这里处理空闲状态
}
function resetIdleCallback() {
  if (idleHandle) {
    cancelIdleCallback(idleHandle);
  }
  idleHandle = requestIdleCallback(handleIdle, { timeout: 30000 }); // 30秒后检查是否空闲
}
// 监听用户活动事件
['mousemove', 'keydown', 'wheel', 'DOMMouseScroll', 'mousewheel', 'mousedown', 'touchstart', 'touchmove', 'scroll', 'resize'].forEach(event => {
  window.addEventListener(event, resetIdleCallback);
});
// 初始化空闲检测
resetIdleCallback();

3. 使用 `visibilitychange` 事件

当用户切换到其他标签页或最小化浏览器时，可以利用 visibilitychange 事件来检测。

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    console.log('页面不可见，可能用户已离开');
    // 在这里处理空闲状态
  } else {
    console.log('页面可见，用户回来了');
    // 重置空闲定时器
    resetIdleTimer();
  }
});

4. 结合多种方法

为了更准确地检测空闲状态，可以结合上述方法。

// 结合 setTimeout 和 visibilitychange
let idleTimer;
function resetIdleTimer() {
  clearTimeout(idleTimer);
  idleTimer = setTimeout(() => {
    console.log('用户已空闲');
    // 在这里处理空闲状态
  }, 30000); // 30秒无操作视为空闲
}
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    console.log('页面不可见，可能用户已离开');
    // 可以选择清除定时器或保留
  } else {
    console.log('页面可见，用户回来了');
    resetIdleTimer();
  }
});
// 监听用户活动事件
['mousemove', 'keydown', 'wheel', 'DOMMouseScroll', 'mousewheel', 'mousedown', 'touchstart', 'touchmove', 'scroll', 'resize'].forEach(event => {
  window.addEventListener(event, resetIdleTimer);
});
// 初始化空闲定时器
resetIdleTimer();

注意事项

兼容性：确保所使用的方法在目标浏览器上受支持。
性能：避免过于频繁的事件监听和定时器设置，以减少对性能的影响。
用户体验：考虑空闲状态检测对用户体验的影响，避免在用户短暂的无操作后立即触发空闲状态。通过上述方法，可以有效地检测网页的空闲状态，并在适当的时候执行相应的操作。

28. HTTP是一个无状态的协议，那么Web应用是怎么保持用户的登录态的呢？

HTTP确实是一个无状态的协议，这意味着它不会在两次请求之间保留任何状态信息。为了保持用户的登录态，Web应用通常采用以下几种机制：

1. Cookies

Cookies是最常用的保持用户登录态的方法。当用户登录时，服务器会生成一个唯一的会话标识（Session ID），并将其通过Set-Cookie响应头发送给客户端。客户端随后会在每个请求中通过Cookie头将这个Session ID发送回服务器，从而允许服务器识别用户并维持其登录状态。

// 服务器响应设置Cookie
Set-Cookie: session_id=abc123; Path=/; HttpOnly
// 客户端后续请求携带Cookie
Cookie: session_id=abc123

2. Session

与Cookies配合使用的是服务器端的Session。服务器会根据Session ID在内存或存储系统中维护一个Session对象，其中包含用户的信息和状态。每次请求时，服务器会根据Cookie中的Session ID查找对应的Session对象，从而恢复用户的状态。

3. Token-based Authentication（基于令牌的认证）

另一种常见的方法是使用令牌（Token），如JWT（JSON Web Tokens）。用户登录后，服务器生成一个Token，并将其发送给客户端。客户端在后续请求中将Token包含在Authorization头中发送给服务器。服务器验证Token的有效性，从而识别用户。

// 服务器响应发送Token
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
// 客户端后续请求携带Token
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

4. Local Storage / Session Storage

现代浏览器提供了Local Storage和Session Storage API，可以用于存储用户状态。这些存储是持久的（Local Storage）或仅在页面会话期间有效（Session Storage）。但是，这些方法不适用于敏感信息，因为它们不提供像Cookies那样的HttpOnly保护。

5. 第三方认证服务

如OAuth、OpenID Connect等第三方认证服务也可以用于管理用户的登录态。这些服务通常涉及多个步骤的认证流程，并使用 Tokens 来维护用户的登录状态。

安全考虑

HttpOnly Cookies：用于防止客户端脚本访问Cookie，减少XSS攻击的风险。
Secure属性：确保Cookie仅通过HTTPS传输，防止中间人攻击。
SameSite属性：防止CSRF攻击，限制Cookie在跨站请求中的发送。
Token过期和刷新：令牌应设有有效期，并可以通过刷新令牌来获取新的访问令牌。通过这些机制，Web应用能够在无状态的HTTP协议上实现用户登录态的保持，提供连贯的用户体验。

29. CSS 属性值计算 - calc 怎么使用，具体有哪些使用场景？

calc() 是 CSS 中的一种函数，用于计算 CSS 属性值。它可以用于任何需要长度、频率、角度、时间、百分比或数字值的地方。calc() 允许你进行加法、减法、乘法和除法运算，并且可以混合使用不同的单位。

基本语法

calc(expression);

其中 expression 是一个数学表达式，可以包含以下内容：

加法：+
减法：-
乘法：*
除法：/

使用示例

1. 计算宽度

.width-calc {
  width: calc(100% - 20px);
}

这个例子中，元素的宽度被设置为视口宽度的100%减去20像素。

2. 计算边距

.margin-calc {
  margin: calc(10px + 2%);
}

这里，元素的边距是10像素加上视口宽度的2%。

3. 计算内边距

.padding-calc {
  padding: calc(5em - 10px) 20px;
}

在这个例子中，元素的上边和下边内边距是5em减去10像素，左边和右边内边距是20像素。

4. 计算字体大小

.font-size-calc {
  font-size: calc(1rem + 0.5vw);
}

这里，字体大小是1rem加上视口宽度的0.5%。

使用场景

1. 响应式设计

calc() 可以用于创建响应式布局，根据视口大小调整元素的大小或位置。

2. 容器内的元素对齐

当你需要在一个固定宽度的容器内对齐元素时，可以使用 calc() 来计算正确的位置。

3. 实现复杂的布局

对于复杂的布局，如网格系统或卡片布局，calc() 可以帮助计算间距和尺寸。

4. 动态计算值

当需要根据其他元素的尺寸或视口尺寸动态计算值时，calc() 非常有用。

5. 解决单位不一致的问题

当需要混合使用不同单位（如像素和百分比）时，calc() 可以解决单位不一致的问题。

注意事项

calc() 内部的运算符前后需要有空格，例如 calc(100% - 20px) 而不是 calc(100%-20px)。
calc() 可以用于任何接受长度、频率、角度、时间、百分比或数字的属性。
在进行除法运算时，除数不能为0。通过使用 calc()，你可以更灵活地控制 CSS 属性值，实现更复杂和动态的布局效果。

30. 说说 Eslint 进行代码检查的原理

ESLint 是一个插件化的 JavaScript 代码检查工具，它用于识别和报告 JavaScript 代码中的模式，以帮助开发者保持代码的一致性和避免错误。ESLint 的代码检查原理主要包括以下几个关键步骤：

解析代码：
- ESLint 使用 JavaScript 解析器（如 Espree）将源代码转换成抽象语法树（AST）。AST 是代码结构的树状表示，每个节点代表代码中的一个结构元素，如语句、表达式等。
遍历 AST：
- Once the AST is generated, ESLint traverses it using a traversal mechanism. During traversal, ESLint visits each node in the AST and applies various rules to check for patterns or problems.
应用规则：
- ESLint comes with a set of built-in rules, and it also supports custom rules. Each rule is a function that is executed when a particular node type is encountered during the AST traversal. Rules can check for specific patterns, coding conventions, potential errors, and more.
报告问题：
- When a rule encounters a problem, it reports an issue with details such as the line number, column number, severity (error or warning), and a message describing the problem. These reports are collected and can be outputted to the console or integrated into development tools.
配置：
- ESLint allows for extensive configuration through configuration files (e.g., .eslintrc), which can specify the rules to be applied, their severity, and other settings like parser options, environments, and globals.
插件和扩展：
- ESLint's plugin system allows for the creation of custom rules, environments, and parsers. This extensibility enables ESLint to be used with various JavaScript environments and dialects, including ES6, React, Vue, and more.
集成：
- ESLint can be integrated into various development tools, such as text editors, IDEs, and build systems, to provide real-time feedback as developers write code.

关键技术点：

抽象语法树 (AST)：ESLint 利用 AST 来理解代码的结构，这使得它能够进行深入的分析和检查。
规则引擎：ESLint 的规则引擎允许开发者定义自己的规则，这些规则在 AST 遍历过程中被应用。
配置灵活性：通过配置文件，ESLint 可以适应不同的项目需求和编码风格。
插件化架构：ESLint 的插件化设计使得它可以通过社区贡献的插件来扩展功能。总的来说，ESLint 通过解析代码生成 AST，然后遍历 AST 并应用规则来检查代码，最后报告发现的问题。这种基于 AST 的方法使得 ESLint 能够进行高效和准确的代码分析。

2025面试题大全(7)

1. 在项目中封装组件时，你会有些什么样的原则？

2. 后端一次性返回树形结构数据，数据量非常大, 前端该如何处理？

3. Node.js 是单线程的，那该如何充分利用多核 CPU 呢？

4. 前端系统中，怎么统一处理登录态过期的场景？

5. 基于 axios 实现请求超时后，自动重试

6. vite 使用了哪些编译器，分别有什么作用？

7. esbuild 和 rollup 都是 vite 的基础依赖，它们有什么不同呢？

8. vite 和 webpack 在热更新的实现上有什么区别？

Vite 的热更新实现：

Webpack 的热更新实现：

主要区别：

9. 在域名 A 的网站上，跨域请求域名 B 上的接口，怎么在跨域请求中携带域名 B 的 Cookie 呢？

1. 确保 Cookie 的域（Domain）和路径（Path）设置正确

2. 设置 withCredentials

3. 确保 HTTP 响应头中包含正确的 Access-Control-Allow-Origin

4. 确保 HTTP 响应头中包含 Access-Control-Allow-Credentials

5. 发起请求

示例：使用 fetch API

6. 注意事项

10. webpack 中的 webpack-dev-server 有什么作用？

主要作用：

特点：

常用配置项：

示例配置：

使用方法：

11. webpack 中的 webpack-dev-server 为什么不适用于线上环境？

12. 常见的登录鉴权方式有哪些？

13. OAuth2.0 是什么，是怎么实现授权第三方应用登录的？

14. 请求 Header 中的 Content-Type ，有哪些常见的值?

15. 如果想在图片这块做性能优化，你有哪些思路？

1. 选择合适的图片格式

2. 压缩图片

3. 响应式图片

4. 图片懒加载

5. 使用CDN

6. 缓存策略

7. 图片尺寸

8. 图像优化工具

9. 占位符

10. Web字体代替图标图片

11. 使用图像精灵（Sprite）

12. 避免使用Base64编码的图片

13. 使用现代图像解码器

14. 监控和分析

16. 如何禁止他人使用控制台调试前端页面代码?

1. 控制台警告

2. 检测控制台打开

3. 使用JavaScript库

4. 禁用右键和快捷键

5. 使用CSS

6. 加密和混淆代码

7. 使用服务端渲染（SSR）

8. 设置HTTP头

注意事项：

17. 说说 TypeScript 中，有哪些内置的类型方法和工具类型

内置类型方法

工具类型

18. 如果有 git 仓库需要迁移，应该怎么操作？

方法一：使用 git clone 和 git push

方法二：使用 git remote 和 git push

方法三：使用 git clone 和 git init（如果需要重新初始化仓库）

注意事项：

特殊情况：

19. 有了解过 Protobuf 吗？

20. 你知道哪些常见的网络协议？

21. 如果需要使用 JS 执行 100 万个任务，如何保证浏览器不卡顿？

22. http 协议中的 CSP 是什么？

CSP 常见指令：

示例：

23. 说说你对 http 协议中 HSTS 的理解

HSTS的工作原理：

HSTS的主要优点：

HSTS的示例：

注意事项：

24. CORS 请求中，什么情况下会触发预检请求？

25. 对于分页的列表，怎么解决快速翻页场景下的竞态问题？

1. 取消前一个未完成的请求

2. 请求队列管理

3. 响应顺序控制

方法一：使用 `git clone` 和 `git push`

方法二：使用 `git remote` 和 `git push`

方法三：使用 `git clone` 和 `git init`（如果需要重新初始化仓库）

2. 使用 `async` 和 `defer`

1. 使用 `setTimeout` 和事件监听

2. 使用 `requestIdleCallback` (现代浏览器支持)

3. 使用 `visibilitychange` 事件