用户中心项目面试题

后端

请介绍你在项目中使用的 Spring Boot 框架的优势和适用场景？

背诵类题目，最大的优势是方便、成熟

Spring Boot 的优势：

快速开发和简化配置： Spring Boot采用了约定大于配置的原则，减少了繁琐的配置，提供了自动配置和起步依赖，让开发人员能够更快速地搭建应用程序。
内嵌式Web容器： Spring Boot内置了常见的Web容器，如Tomcat、Jetty和Undertow，这意味着你可以将你的应用程序打包成一个独立的JAR文件，无需外部的Web服务器。
自动配置： Spring Boot根据项目的依赖自动配置应用程序的组件，大大减少了手动配置的工作，提高了开发效率。
生态系统支持： Spring Boot整合了Spring框架的各个模块，如Spring MVC、Spring Data、Spring Security等，可以轻松构建全栈应用。
监控和管理： Spring Boot提供了丰富的监控和管理功能，包括健康检查、性能指标、远程Shell等，有助于更好地管理和维护应用程序。
适用于微服务架构： Spring Boot是构建微服务架构的理想选择，它可以轻松地创建独立的服务，而且与Spring Cloud等微服务相关的工具集成得很好。
大型社区支持： Spring Boot有一个庞大的开发者社区，提供了丰富的文档、教程和第三方库，便于开发人员解决问题和分享经验。

Spring Boot 的适用场景：

Web应用程序开发：Spring Boot适用于构建各种类型的Web应用程序，包括单页应用、多页应用、RESTful API等。
微服务架构：Spring Boot可以用于构建微服务应用，每个微服务可以独立开发、部署和管理。
批处理应用程序：Spring Boot提供了对Spring Batch的支持，用于处理大规模的数据批处理任务。
云原生应用：Spring Boot与容器编排平台（如Kubernetes）和云服务（如AWS、Azure、Google Cloud）集成得很好，可以轻松部署和扩展应用程序。
企业级应用程序：Spring Boot提供了大量的企业级特性，如事务管理、安全性、缓存、消息队列等，适用于构建复杂的企业级应用。

什么是 MyBatis-Plus？它有什么作用？它和 MyBatis 有哪些区别？

背诵类题目，但是可以结合自己的理解回答

MyBatis 是一个半 ORM（对象关系映射）框架，它内部封装了 JDBC，使用它后，开发者只需要关注 SQL 语句本身，不需要花费精力去处理加载驱动、创建连接、创建 statement 等繁杂的过程，提高开发效率。

MyBatis-Plus 是 MyBatis 的增强版框架（就像魂斗罗兄弟一样），它对 MyBatis 进行了 二次封装 ，只做增强不做改变。通过提供一系列的 API 方法和代码生成器，使重复的 CRUD（创建、读取、更新、删除）操作更加简单，无需手动编写 SQL 语句，从而 大幅提高开发效率 。

此外，还有一些其他优点。比如：

提供了条件构造器，可以通过编程方式构建复杂的查询条件，无需编写繁琐的 SQL 语句
提供了分页查询支持，无需手动编写分页逻辑
提供了一个代码生成器工具，可以根据数据库表自动生成 Java 实体类、Mapper 接口和 XML 映射文件，减少了手工编写的工作量。

使用 MyBatis Plus 前，需要自己编写 SQL Mapper 映射文件和语句：

<!-- userMapper.xml -->

<mapper namespace="com.demo.dao.UserMapper">

  <select id="getUserById" parameterType="java.lang.Integer" resultType="com.demo.entity.User">

    select * from t_user where id=#{id}

  </select>

</mapper>

使用 MyBatis Plus 后，定义接口继承 BaseMapper 接口并调用其中提供的现成方法即可：

public interface UserMapper extends BaseMapper<User> {

}

你是如何通过继承定制通用操作模板，从而提高开发效率的？

主观回答

在开发项目的过程中，我发现很多的功能和代码是独立于具体的业务逻辑的，比如：

给每个请求的返回值增加 code、message 和 data 字段
在全局异常处理器中统一处理项目的异常，防止代码错误细节暴露在外，同时优化用户体验
跨域的处理、长整数丢失问题的解决等

为了避免每次开发时手动引入重复的依赖、或者编写重复的代码，我把这些重复的功能独立抽取为了一套自己的通用项目模板。

其中，我使用 MyBatis Plus 框架开发数据访问层，在自己开发 Service 业务操作代码时，继承了 MyBatis Plus 提供的通用 IService 接口，从而复用对数据库的基本增删改查操作代码，不用手动编写重复的操作，大幅提高了开发效率。

你在项目中是如何自定义错误码的？

主观回答

通过自定义一个枚举类来集中定义错误码。

该枚举类提供 code、message、description 三个属性，并且提供一个默认的构造函数用于创建枚举。

其中，我对错误码的整型定义是有讲究的，参考真实的 HTTP 状态码将错误进行分类，并且将错误码的前 3 位前缀定义为和对应含义的状态码相同，比如 HTTP 状态码 400 表示客户端请求参数错误，那么我在定义一个客户端请求参数的错误码时，code 为 40000，示例代码为：

PARAMS_ERROR(40000, "请求参数错误", "具体描述"),

这样不仅 “见码知义”，同时 5 位数的错误码能够预留一定的扩展空间，保证拥有相同 HTTP 前缀的错误码可以定义 100 个。

在抛出异常时，可以传入特定的错误码枚举值作为参数，并且将错误码枚举的 message 的 description 属性作为异常类的 message，简化抛出异常的代码。

为什么后端需要全局异常处理器？你是如何实现全局异常处理器的？

前半句是背诵类题目，后半句需要主观回答

全局异常处理器能够捕获应用程序中抛出的异常，并对这些异常进行统一的处理，从而避免因未处理的异常导致系统崩溃或无法正常工作，能够提高系统的稳定性。

举几个具体的应用：

错误信息统一处理：全局异常处理器可以将不同种类的异常转化为统一的错误信息格式，提供一致的错误响应给客户端，增强了用户体验。
错误日志记录：可以在全局异常处理器中记录异常信息，包括异常类型、发生时间、请求参数等，有助于排查问题和分析系统健康状况。
异常信息隐藏：通过全局异常处理器，可以隐藏敏感信息，以防止敏感信息泄露到客户端。

如何实现？

定义一个全局异常处理类，并且使用 @RestControllerAdvice（或者 @ControllerAdvice）注解该类，表示这是一个全局异常处理器类。

然后针对每种异常类定义一个处理异常的方法，并且使用 @ExceptionHandler(异常类.class) 注解标注这些方法，可以在这些方法中进行日志记录等具体的异常处理操作，并返回一个响应对象，便于前端识别并给用户友好的错误提示。

示例代码如下：

@RestControllerAdvice

public class GlobalExceptionHandler {

    @ExceptionHandler(Exception.class)

    public ResponseEntity<ErrorResponse> handleException(Exception ex) {

        ErrorResponse errorResponse = new ErrorResponse("Internal Server Error", ex.getMessage());

        return new ResponseEntity<>(errorResponse, HttpStatus.INTERNAL_SERVER_ERROR);

    }

    @ExceptionHandler(ResourceNotFoundException.class)

    public ResponseEntity<ErrorResponse> handleResourceNotFoundException(ResourceNotFoundException ex) {

        ErrorResponse errorResponse = new ErrorResponse("Resource Not Found", ex.getMessage());

        return new ResponseEntity<>(errorResponse, HttpStatus.NOT_FOUND);

    }

    // 可以添加其他自定义异常处理方法

}

你在项目中使用了双检锁单例模式来管理 JSON 格式化处理对象，请简要解释一下这个模式的原理和好处？并描述你的具体实现方式？

背诵类题目

用户中心里面并没有直接用到双检锁单例模式，只是给大家预留了一个扩展点。

双检锁即双重检查锁（Double-Check Locking），能够在多线程场景下保持创建单例对象的高效性。1806613115223461889_0.043240968981619554

核心原理是首先检查是否已经创建了对象，如果没有，才会进行加锁和创建对象的操作，以避免多个线程同时创建对象，提高性能。

示例代码如下，多写几遍就会了：

// 代码示例

public class SingleInstance {

    // 必须有volatile修饰（防止指令重排序）

    private volatile static SingleInstance instance;

    // 构造函数必须私有（防止外部通过构造方法创建对象）

    private SingleInstance() {

    }

    public static SingleInstance getInstance() {

        // 第一个判空（如果是空，就不必再进入同步代码块了，提升效率）

        if (instance == null) {

                // 这里加锁，是为了防止多线程的情况下出现实例化多个对象的情况

            synchronized (SingleInstance.class) {

                // 第二个判空（如果是空，就实例化对象）

                if (instance == null) {

                    // 新建实例

                    instance = new SingleInstance();

                }

            }

        }

        return instance;

    }

}

项目中使用 Nginx 部署前端项目和使用 Docker 部署后端项目，这两种部署方式有什么区别？

主观题目

Nginx 是一个高性能的 Web 和反向代理服务器，主要用于前端静态文件的部署和反向代理转发请求。

用 Nginx 部署前端，只需要把打包好的前端静态代码文件上传到服务器的指定目录，然后在 nginx.conf 配置中定义 location 配置，让对应的域名指向该目录即可。

Nginx 还可以作为接入层网关，负责统一接受对于前端和后端的请求，然后根据请求路径（比如 /api）转发到实际的前端静态文件或后端服务。

Docker 是一种容器技术，可以将多种不同的应用程序、组件、依赖、环境打包为镜像，整体分发和运行。对于后端项目来说，通常要包含应用程序、依赖项、数据库、中间件等组件，有时使用 Docker 可以提高部署效率，无需手动安装环境。

本项目中，我编写了 Dockerfile 来定义容器镜像，包括 java 环境、执行 maven 打包并执行 jar 包的流程，然后通过 docker build 命令构建镜像，最后通过 docker run 启动镜像。

使用 Docker 后，程序更容易水平扩展，支持更高的负载。

介绍一下你部署项目的操作流程？

主观题目

以宝塔 Linux 原生部署为例：

购买云服务器
安装和初始化宝塔 Linux 面板
在宝塔面板中安装项目部署依赖软件，比如 jdk、mysql、nginx、tomcat、Java 项目管理器等
把本地的数据同步到宝塔安装的线上数据库
后端：使用 Java 项目管理器，添加 Java 项目，把本地 mvn package 命令打好的 jar 包上传到 Linux 服务器，配置启动参数和激活配置（prod），点击 “启动” 即可。
前端：上传本地打包好的 dist 网站静态文件目录到服务器，然后配置 Nginx 指向文件目录路径，即可访问前端静态文件。
在 Nginx 配置反向代理，请求服务器 IP（或域名时）+ 后端路径（/api）时，请求转发到服务器内的实际后端服务端口（比如 localhost:8080）。
在服务器运营商提供的界面和宝塔面板界面中开启防火墙的 80 端口

什么是代理和反向代理？二者有什么区别？

背诵类题目

二者服务的对象和目的不同。

代理（正向代理）是指有一个中间服务器代替客户端发送请求到目标服务器，目标服务器不知道客户端的存在，可以用于保护客户端的安全隐私、加速访问等。

反向代理是指有一个中间服务器代替目标服务器去接受客户端的请求，客户端并不知道目标服务器的存在，可以用于负载均衡、保障服务器的安全性。

后端有哪些解决跨域的方法？你是如何在本项目中解决跨域的？

主观题目

几种后端解决跨域的方法：

1）设置 CORS 响应头：后端可以在 HTTP 响应头中添加相关的 CORS 标头，允许特定的源（域名、协议、端口）访问资源。Spring Boot 项目中，可以通过配置 CorsFilter Bean 或者 Web 拦截器（实现 WebMvcConfigurer 接口）实现，不依赖第三方服务。

2）使用代理服务器：可以使用 Nginx 反向代理，通过 add_header 给后端响应添加 Access-Control-Allow-Origin 头，不改代码实现跨域。

3）@CrossOrigin 注解：Spring Boot 项目可以直接在对应的 Controller 或接口方法上添加 @CrossOrigin 注解实现跨域，但这种方式对代码的侵入性较大。

我选择第 2 种方式，不需要考虑特定的后端接口实现代码，是一种更通用的解决跨域的方法。

什么是单元测试？你是如何编写单元测试的？

前半问背诵，后半问主观回答

单元测试是指对软件中的最小可测试单元（通常是函数、方法、类等）进行检查和验证的测试方法，可以用最细粒度的方式保证项目的质量。

在项目中，我使用 Spring Boot 整合 JUnit 单元测试框架进行单元测试。首先基于 service 创建对应的单元测试类，给测试类上添加 @SpringBootTest 注解用来测试 Spring Boot 中的 Bean；然后在类中编写具体的测试方法并打上 @Test 注解标识测试方法；在方法中调用要测试 service 的方法并通过 Assertions 注解验证测试结果是否符合预期。

什么是单元测试覆盖度？你是如何计算单元测试覆盖度的？

前半问背诵，后半问主观回答

单元测试覆盖度（Unit Test Coverage）是一种衡量在单元测试中覆盖源代码的程度的指标。它表示在单元测试中执行了多少代码行、分支、语句或路径，以及在这些测试中检测到了多少错误。单元测试覆盖度有助于评估测试套件的质量和完整性，但并不总是反映出测试的质量。

在 Java 项目中，可以使用 JaCoCo 工具来自动生成单元测试覆盖度报告，并且在报告中查看语句覆盖、分支覆盖、路径覆盖的比例。

前端

请介绍你在项目中使用的 React 框架的优势和适用场景？

背诵类题目

React 是主流的前端开发框架。

优势：

组件化开发： React 的核心概念是组件化开发，将UI拆分为独立的可重用组件，使代码更易于理解、维护和测试。
虚拟 DOM： React引入了虚拟DOM的概念，通过在内存中维护虚拟DOM树，最小化了实际DOM操作，提高了性能和响应速度。
单向数据流： React采用了单向数据流模型，使数据流动可控，易于跟踪和调试。
生态系统：React拥有丰富的生态系统，包括大量的第三方库和组件，可以加速开发并提供各种解决方案。
跨平台支持： React可以用于构建Web应用、移动应用（React Native）、桌面应用（Electron）等，使得开发团队可以在不同平台上共享代码和技能。
社区支持： React拥有庞大的开发者社区和活跃的维护团队，可以获得大量的教程、文档和支持。

简单来说，就是用的人多、性能很好、生态成熟。

适用场景：

单页面应用（SPA）： React非常适合构建单页面应用，其中所有交互都在同一个页面中完成，无需每次加载新页面。
大规模应用： React 的性能和可维护性使其成为开发大规模应用的理想选择，特别是需要多人协作的项目。
跨平台开发：如果需要同时支持Web、iOS和Android，可以使用React和React Native来共享代码和技能。
服务端渲染（SSR）： React可以用于服务器端渲染，提高应用的性能和搜索引擎优化（SEO）。

简单来说，适合开发企业级、高性能应用。

项目中为什么选择了 Ant Design Pro 脚手架？可以谈谈你对 Ant Design Pro 的使用体会和优缺点。

主观题目

为了提高开发效率。

Ant Design Pro 是一个开箱即用的企业级前端应用开发脚手架，基于 React 和 Ant Design 构建，能够通过命令行选项的方式，快速创建一个包含示例页面、全局通用布局、权限管理、路由管理、国际化、前端工程化的默认项目。我只需要在此基础上编写和业务相关的页面即可，大幅节省时间。

Ant Design Pro 虽然功能强大且方便，但是对新手不够友好，一方面是项目功能太多，理解项目中的代码文件、系统阅读官方文档都要花费不少时间；另一方面是框架封装的代码较多，如果现有的功能不满足要求，自己定制开发新能力的成本较大。而且 Ant Design Pro 框架更新迭代太快，阅读文档和安装依赖时一定要选择指定的版本，否则可能就会出现依赖冲突、代码不兼容的情况。

umi-request 请求库和其他前端常见的请求库（比如 Axios）有什么区别？

背诵类题目

umi-request 是一个基于 fetch 进行封装的请求库，专为 umi 框架（React 开发框架）设计，能够和 umi 框架更好的集成，比如在 umi 项目中直接通过配置文件更改请求的全局配置。

此外，还支持很多上层的特性，比如 api 超时处理、api 请求缓存、通用的错误处理、中间件支持、post 请求参数提交的简化等。

官方文档给出的对比表格：

f465cdb7-732d-4085-9915-145eb0959461-782cb8b7

你提到对 umi-request 请求库进行改造和封装，能否详细说明你添加的全局请求拦截和全局异常处理逻辑是如何实现的？

主观回答

通过定义 requestInterceptors 实现全局请求拦截器，在其中可以设置全局的请求头，并且通过 console.log 打印请求信息。

通过定义 errorHandler 实现全局异常处理，在其中通过 console.error 打印错误信息，然后可以通过组件库的 Message 组件给用户错误提示，或者将错误抛出给外层代码处理。

你是如何实现前端多环境的？如何区分本地和生产环境的请求域名？

主观回答

项目使用了 umi 框架，本地开发调试时执行 start 命令，会自动传入 NODE_ENV 参数为 development；生产环境 build 时 NODE_ENV 参数则为 production。

可以在前端的请求配置文件中，通过判断 process.env.NODE_ENV 是否为 production 来指定不同的请求域名。

此外，不同的项目（框架）都有不同的配置文件，umi 的配置文件是 config.ts，可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境，比如：

开发环境：config.dev.ts
生产环境：config.prod.ts
公共配置：config.ts 不带后缀

参考文档：https://umijs.org/zh-CN/docs/deployment

请解释什么是 React 组件的生命周期，以及生命周期函数的执行顺序是怎样的？

背诵类题目

React 组件的生命周期指的是组件在不同阶段（或生命周期阶段）内执行的一系列特定函数。这些生命周期函数允许你在组件的不同生命周期阶段执行特定的操作，例如初始化组件、处理数据、更新UI等。在 React 16.3 版本之后，生命周期函数分为三类：

1）挂载阶段（Mounting）：这是组件被创建并插入到DOM中的阶段。在挂载阶段，有三个生命周期函数：

constructor(): 构造函数，用于初始化组件的状态和绑定事件处理程序。在组件生命周期中只会被调用一次。
render(): 渲染函数，用于生成虚拟DOM。它在组件挂载之前和每次更新时都会被调用。
componentDidMount(): 组件挂载后立即调用。通常用于执行DOM操作、网络请求、订阅事件等初始化操作。

2）更新阶段（Updating）：这是组件重新渲染并更新到DOM中的阶段。在更新阶段，有两个生命周期函数：

shouldComponentUpdate(nextProps, nextState): 用于决定组件是否应该更新。默认情况下，它返回true，但你可以根据新的props和state与当前的props和state进行比较，来决定是否需要更新组件。
componentDidUpdate(prevProps, prevState): 组件更新后调用，通常用于执行与DOM相关的操作、网络请求、订阅事件等。

3）卸载阶段（Unmounting）：这是组件从DOM中移除的阶段。在卸载阶段，只有一个生命周期函数：

componentWillUnmount(): 组件即将被卸载时调用。通常用于清理工作，如取消订阅、清除定时器等。

此外，React 16.3 版本后引入了一些新的生命周期函数，例如getDerivedStateFromProps和getSnapshotBeforeUpdate，用于更好地管理组件的状态和副作用。

生命周期函数的执行顺序如下：

1）挂载阶段：

constructor()
render()
componentDidMount()

2）更新阶段：

shouldComponentUpdate(nextProps, nextState)
render()
componentDidUpdate(prevProps, prevState)

3）卸载阶段：

componentWillUnmount()

需要注意的是，React 17 及以后的版本中，部分生命周期函数被标记为不推荐使用，并有可能在未来的版本中被移除。因此，在新项目中建议使用更现代的生命周期方法，如componentDidCatch、getDerivedStateFromProps等，以更好地处理组件的状态和副作用。

在 React 中，什么是 Virtual DOM？它的作用是什么？与真实 DOM 相比，Virtual DOM 有什么优势？

背诵类题目

Virtual DOM（虚拟 DOM）是React中的一个关键概念，它是一个轻量级的内存中表示真实 DOM 树的数据结构，其作用是优化页面渲染性能和提高开发效率。

Virtual DOM 的作用和优势如下：

1）性能优化：

快速更新：当组件的状态发生变化时，React首先创建一个虚拟DOM树，然后将新旧虚拟DOM树进行比较（称为协调或调和），找出需要更新的部分，并将这些更新一次性批量操作到真实DOM中，而不是每次都直接操作真实DOM。这样可以减少真实DOM操作的次数，提高性能。
批处理更新： React会将多个状态更新合并为一个更新，以减少重排（reflow）和重绘（repaint）的开销，从而提高渲染效率。

2）跨平台支持：Virtual DOM的设计使得React不仅可以用于Web开发，还可以用于构建移动应用（React Native）和桌面应用（Electron），因为虚拟DOM树与平台无关。

3）提高开发效率：使用虚拟DOM可以使开发人员更容易管理和维护UI组件，因为它将UI的状态和视图分离，并提供了声明式的UI编程模型，使得UI的开发更直观和可预测。

4）减少直接DOM操作：直接操作真实DOM通常会导致性能问题，而Virtual DOM可以帮助开发人员避免直接DOM操作，从而提高代码的可维护性。

5）跨浏览器兼容性：虚拟DOM使得React可以处理不同浏览器之间的差异，开发人员无需担心不同浏览器的兼容性问题。

在前端开发中，如何处理跨域请求？请描述常见的跨域解决方案以及它们的优缺点。

背诵类题目，也可以包含主观回答

可以使用 JSONP 或者配置代理服务器来实现。比如在 Ant Design Pro 框架中，提供了一个 proxy 配置，可以直接开启对后端服务器的代理，从而解决跨域。

JSONP 的优点是简单易用，缺点是仅支持 GET 请求，且容易受到跨站脚本攻击。真实业务场景中，更推荐在服务端解决跨域，前端本地开发时通过代理绕过跨域即可。

请解释一下 React Hooks，并举例说明如何使用 useState 和 useEffect 这两个常用的 Hooks。

背诵类题目

React Hooks 是 React 16.8 版本引入的一项功能，它们允许函数组件（无状态组件）使用状态管理和其他 React 特性，以前这些功能只能在类组件中使用。React Hooks 的目标是使组件的状态逻辑更容易复用、理解和测试。两个最常用的 React Hooks 是 useState 和 useEffect。

1）useState Hook：

useState Hook 用于在函数组件中添加状态管理。它返回一个状态变量和一个更新该变量的函数，可以用来在函数组件中管理和更新状态。

示例：

import React, { useState } from 'react';

function Counter() {

  // 使用useState来声明一个状态变量count，初始值为0

  const [count, setCount] = useState(0);

  return (

    <div>

      <p>Count: {count}</p>

      <button => setCount(count + 1)}>Increment</button>

      <button => setCount(count - 1)}>Decrement</button>

    </div>

  );

}

在上面的示例中，useState Hook 用于创建一个名为 count 的状态变量和一个名为 setCount 的函数。通过 setCount 函数，我们可以更新 count 的值。每次点击按钮时，count的值会更新，并重新渲染组件。

2）useEffect Hook：

useEffect Hook 用于在函数组件中执行副作用操作，例如数据获取、订阅事件、手动管理 DOM 等。它接受两个参数，第一个参数是一个函数，用于执行副作用操作，第二个参数是一个数组，用于指定依赖项。

示例：

import React, { useState, useEffect } from 'react';

function DataFetching() {

  const [data, setData] = useState([]);

  useEffect(() => {

    // 在组件挂载后，使用fetch API获取数据

    fetch('https://jsonplaceholder.typicode.com/posts')

      .then((response) => response.json())

      .then((data) => setData(data))

      .catch((error) => console.error('Error:', error));

  }, []); // 空数组表示只在组件挂载后执行一次

  return (

    <div>

      <h2>Posts</h2>

      <ul>

        {data.map((post) => (

          <li key={post.id}>{post.title}</li>

        ))}

      </ul>

    </div>

  );

}

在上面的示例中，useEffect Hook 用于在组件挂载后执行数据获取操作。我们指定了一个空数组作为第二个参数，这表示副作用操作只在组件挂载后执行一次。如果指定了依赖项数组，useEffect 将在依赖项发生变化时重新执行。

在前端开发中，如何优化网页的加载性能和渲染性能？请提供一些常见的优化策略和技巧？

背诵类题目，但尽量多包含主观回答

优化网页的加载性能和渲染性能是前端开发中的关键任务之一，它可以提高用户体验并降低网站的跳出率。以下是一些常见的优化策略和技巧：

优化图片：

使用适当的图片格式：选择合适的图片格式（如WebP、JPEG、PNG）以减小文件大小。
压缩图片：使用压缩工具或在线服务来减小图片文件的大小。
使用响应式图片：为不同屏幕大小提供不同尺寸的图片，以避免加载过大的图片。

使用CDN（内容分发网络）：

将静态资源（如CSS、JavaScript、图片等）托管到CDN上，加速资源的加载。
CDN可以将内容缓存到全球各地的服务器上，减少距离造成的延迟。

懒加载和预加载：

使用懒加载技术延迟加载图片和其他资源，只有当用户滚动到可见区域时才加载。
使用``标签预加载关键资源，以提前下载可能需要的资源。

压缩和合并文件：

压缩JavaScript和CSS文件，减小文件大小。
合并多个CSS或JavaScript文件为一个，减少HTTP请求次数。

Ant Design Pro 使用 Webpack 打包工具，会自动对代码文件进行打包合并。

使用浏览器缓存：

使用 HTTP缓存头（如Cache-Control和ETag）来允许浏览器缓存资源。
使用 Service Worker 来创建离线应用程序，使用户在离线状态下也能访问网站。

减少重排和重绘：

避免频繁修改DOM，可以使用文档片段（DocumentFragment）进行批量操作。
使用CSS动画而不是JavaScript来实现动画效果，以减少重排和重绘。

代码分割（Code Splitting）：

将应用程序拆分为多个模块或块，按需加载模块，减小初始加载时间。
使用工具如 Webpack 的import()语法来实现代码分割。

Ant Design Pro 支持在项目的全局配置文件中配置按需加载。

使用异步加载：

将非关键的JavaScript代码标记为异步加载，以防止它们阻塞页面加载。
使用``标签来异步加载脚本。

前端框架和库的优化：使用轻量级的前端框架或库，以减少不必要的代码。

Ant Design Pro 其实是一个比较重的开发框架，更适合中后台管理系统。

监控和性能分析：

使用工具如 Google PageSpeed Insights、Lighthouse 等来检查和分析性能问题。
使用性能监控工具来实时追踪网站的性能指标，以便及时优化。

注意，性能优化是一个持续的过程，需要不断地监测、测试和调整，以确保网站保持高性能。

通用

请介绍一下本项目的完整业务流程？

管理员注册 => 管理员登录 => 管理员在主界面中浏览检索用户 => 管理员可以创建、更新和删除用户

在开发过程中，你遇到过比较复杂的技术问题或挑战吗？如果有，请谈谈你是如何解决这些问题的？

可以从以上任意一道主观的面试题出发去讲，比如你在项目部署时遇到了跨域问题，然后通过 XX 方式解决了跨域。

项目分区导航：⬅️ 18-用户中心简历写法 | 19-用户中心项目面试题 | ➡️ 20-用户中心问题答疑 - 用户中心项目教程 - 编程导航教程

用户中心项目面试题

后端

请介绍你在项目中使用的 Spring Boot 框架的优势和适用场景？

什么是 MyBatis-Plus？它有什么作用？它和 MyBatis 有哪些区别？

你是如何通过继承定制通用操作模板，从而提高开发效率的？

你在项目中是如何自定义错误码的？

为什么后端需要全局异常处理器？你是如何实现全局异常处理器的？

你在项目中使用了双检锁单例模式来管理 JSON 格式化处理对象，请简要解释一下这个模式的原理和好处？并描述你的具体实现方式？

项目中使用 Nginx 部署前端项目和使用 Docker 部署后端项目，这两种部署方式有什么区别？

介绍一下你部署项目的操作流程？

什么是代理和反向代理？二者有什么区别？

后端有哪些解决跨域的方法？你是如何在本项目中解决跨域的？

什么是单元测试？你是如何编写单元测试的？

什么是单元测试覆盖度？你是如何计算单元测试覆盖度的？

前端

请介绍你在项目中使用的 React 框架的优势和适用场景？

项目中为什么选择了 Ant Design Pro 脚手架？可以谈谈你对 Ant Design Pro 的使用体会和优缺点。

umi-request 请求库和其他前端常见的请求库（比如 Axios）有什么区别？

你提到对 umi-request 请求库进行改造和封装，能否详细说明你添加的全局请求拦截和全局异常处理逻辑是如何实现的？

你是如何实现前端多环境的？如何区分本地和生产环境的请求域名？

请解释什么是 React 组件的生命周期，以及生命周期函数的执行顺序是怎样的？

在 React 中，什么是 Virtual DOM？它的作用是什么？与真实 DOM 相比，Virtual DOM 有什么优势？

在前端开发中，如何处理跨域请求？请描述常见的跨域解决方案以及它们的优缺点。

请解释一下 React Hooks，并举例说明如何使用 useState 和 useEffect 这两个常用的 Hooks。

在前端开发中，如何优化网页的加载性能和渲染性能？请提供一些常见的优化策略和技巧？

通用

请介绍一下本项目的完整业务流程？

在开发过程中，你遇到过比较复杂的技术问题或挑战吗？如果有，请谈谈你是如何解决这些问题的？

💬 评论