技术面试

← 已是第一轮 · 返回本次面经 · 第 2 轮 → 本轮概述： 该轮面试主要考察了前端基础知识，包括BFC、浮动元素、作用域、异步编程、Webpack、Vue等多方面的内容。题目涉及理论知识和代码实现。 本轮共 18 道题。答案默认折叠，便于先自行作答。 1. BFC讲一下 题库原题：什么是BFC？ 题目要点 BFC（Block Formatting Context） 是 CSS 中一个重要的布局概念，它描述了一个块级元素的内部布局和外部布局之间的关系。BFC 主要用于处理元素的布局、浮动、边距合并等问题。 BFC 的作用 阻止外边距折叠： 外边距折叠：当两个块级元素垂直相邻时，它们的外边距会合并，形成一个更大的外边距。 BFC：在 BFC 内部的元素的外边距不会影响到外部 BFC 的元素，避免了外边距折叠的问题。 包含浮动元素： 浮动元素：通常会从其包含块中溢出。 BFC：具有 BFC 的元素可以包含其内部的浮动元素，确保其高度包括浮动元素的高度。 控制元素的布局： BFC：在 BFC 内部，元素的布局（如浮动、定位）会受到影响和控制，避免与外部元素发生冲突。 防止元素重叠： BFC：能够隔离不同的 BFC 区域，避免元素之间的重叠或干扰。 如何触发 BFC BFC 会在以下情况中被触发： 块级格式化上下文的创建： 元素的 display 属性值为 block 或 inline-block。 元素的 position 属性值为 absolute 或 fixed。 元素的 float 属性值为 left 或 right。 元素的 overflow 属性值为 hidden、scroll 或 auto。 其他常见触发情况： ...

← 已是第一轮 · 返回本次面经 · 第 2 轮 → 本轮概述： 这一轮主要考察了前端基础知识，包括JavaScript的基本类型和引用类型的存储、闭包的内存泄漏、垃圾回收机制、事件循环、React框架的理解等。 本轮要点： Promise、CDN原理、Class、数据类型、浏览器渲染过程 本轮共 24 道题。答案默认折叠，便于先自行作答。 1. js中基本类型 和 引用类型的存储有什么不一样 题库原题：引用类型有哪些，有什么特点 题目要点 在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。 参考答案 在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。 常见的引用类型包括： 对象（Object）：对象是JavaScript中最基本的引用类型，它可以用来存储键值对，也可以通过原型链实现继承。 数组（Array）：数组是一种有序的集合，可以存储任意类型的数据，它的长度是动态的，可以随时添加或删除元素。 函数（Function）：函数是一种可执行的对象，可以封装一段可重复使用的代码。函数可以接收参数并返回值。 引用类型的特点包括： 引用类型的值是可变的：引用类型的值是存储在堆内存中的，当我们修改一个引用类型的值时，实际上是修改了它在内存中的地址，而不是修改了该值本身。 引用类型值的比较是引用的比较：当使用"==“或”===“运算符比较两个引用类型的值时，它们会进行引用的比较，即判断它们是否指向同一个内存地址。只有当两个引用指向同一个对象时，它们才被认为是相等的。 引用类型可以有自己的属性和方法：引用类型的值可以拥有自己的属性和方法。例如，数组对象有长度属性和一些常用的数组方法（例如push、pop、sort等），而函数对象有call、apply等方法。 引用类型可以通过原型链实现继承：通过原型链，引用类型可以继承父类型的属性和方法。 基本类型（如数字、字符串、布尔值）在JavaScript中是按值传递的，而引用类型是按引用传递的。 这意味着当将一个引用类型的值赋给另一个变量时，实际上是将内存地址复制给了新的变量，两个变量引用的是同一对象。而基本类型的值赋给另一个变量时，会创建一个新的值并赋给新的变量。 2. 闭包的内存泄漏应该如何监控和解决？ 题库原题：如何检查Javascript中的内存泄漏？ 题目要点 Chrome 浏览器查看内存占用，按照以下步骤操作。 参考答案 浏览器 Chrome 浏览器查看内存占用，按照以下步骤操作。 1、打开开发者工具，选择 Timeline 面板 2、在顶部的Capture字段里面勾选 Memory 3、点击左上角的录制按钮。 4、在页面上进行各种操作，模拟用户的使用情况。 5、一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况。 如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。 反之，就是内存泄漏了。 命令行 命令行可以使用 Node 提供的process.memoryUsage方法。 console.log(process.memoryUsage()); // { rss: 27709440, // heapTotal: 5685248, // heapUsed: 3449392, // external: 8772 } process.memoryUsage返回一个对象，包含了 Node 进程的内存占用信息。该对象包含四个字段，单位是字节，含义如下。 ...

← 已是第一轮 · 返回本次面经 · 第 2 轮 → 本轮概述： 这一轮主要考察了前端技术栈的深度和广度，包括CSS框架、响应式设计、渲染优化、Vue框架的高级特性、HTTP协议、浏览器渲染机制等方面的知识。 本轮共 22 道题。答案默认折叠，便于先自行作答。 1. 项目中为何选择 Tailwind CSS ？ 题目要点 灵活性, 可维护性, 现代前端工具链 参考答案 Tailwind CSS 是一个高度可定制的低级 CSS 框架，它提供了大量的原子类，可以快速构建一致且响应式的布局。选择 Tailwind CSS 的原因可能包括其灵活性、可维护性以及与现代前端工具链的良好集成。 2. Tailwind 是怎么解决样式冲突的？ 题库原题：Tailwind 是怎么解决样式冲突的？ 题目要点 Tailwind 通过原子化 utility 类、统一选择器权重、避免层级嵌套、构建期生成样式以及可预测的覆盖规则，从架构层面降低样式冲突的发生概率。它不是依赖命名规范解决冲突，而是通过设计约束和单一职责类模型，使样式天然解耦，从而让冲突可控且可预测。 参考答案 这个问题如果只回答“因为类名不会冲突”是远远不够的。 Tailwind 解决样式冲突，本质上是通过 设计约束 + 原子化模型 + 构建期生成策略，从源头消除冲突的产生条件，而不是事后避免覆盖。 下面从机制层面拆解。 一、传统 CSS 为什么容易冲突 传统样式冲突来自三个方面： 1. 选择器冲突 .btn { color: red; } .button { color: blue; } 不同模块命名不规范会互相覆盖。 2. 层级嵌套带来的权重问题 .page .btn { ... } 权重升级，导致后续难以覆盖。 3. 样式全局污染 CSS 默认是全局作用域，没有隔离边界。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 这一轮主要考察了候选人的自我介绍、职业规划、项目经验、前端技术细节以及算法问题。面试氛围较为全面，涵盖了从基础到高级的多个方面。 面试时间： 45分钟 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 自我介绍 题目要点 个人背景, 工作经验, 技术栈, 项目经验, 未来展望 参考答案 自我介绍应包括个人背景、工作经验、技术栈、项目经验和对未来的展望。重点在于展示自己的专业能力和对前端技术的热情。 2. 你的职业规划与前端技术方向的关系？ 题目要点 技术趋势, 个人兴趣, 学习和实践, 技能提升, 未来发展 参考答案 回答时可以结合当前的技术趋势和个人兴趣，说明如何通过不断学习和实践来提升自己在前端领域的技能。同时，可以提到对未来技术发展的看法和如何适应这些变化。 3. 讲一个你参与过的项目 题库原题：你参与过哪些前端基建方面的建设？ 题目要点 前端基建涵盖了从项目架构、构建工具配置到开发环境、自动化流程和安全等多个方面。良好的前端基建可以提升开发效率、代码质量和系统性能，为项目的长期维护和扩展打下坚实的基础。 参考答案 可以从以下方面进行回答： 1. 项目架构 目录结构：定义项目文件和目录的组织结构，确保项目的可维护性和可扩展性。 代码规范：统一代码风格和规范，使用 ESLint、Prettier 等工具进行代码检查和格式化。 模块化：采用模块化设计，将代码拆分为独立的模块，提高可重用性和可维护性。 脚手架：自动生成项目的基础结构，包括目录结构、配置文件、示例代码等。 2. 构建工具和配置 构建工具：使用工具如 Webpack、Vite、Rollup 等进行项目的构建和打包。 配置管理：配置构建工具以支持各种功能，如代码分割、热重载、环境变量等。 优化：配置代码压缩、缓存策略、Tree Shaking 等，提升构建产物的性能和效率。 3. 开发环境 开发服务器：设置本地开发服务器，支持热重载和调试功能。 环境配置：管理开发、测试、生产环境的配置和变量。 4. 包管理 依赖管理：使用 npm、Yarn 或 pnpm 等工具管理项目依赖，确保依赖版本一致性。 发布管理：管理和发布自定义的 npm 包或组件库。 5. 自动化流程 CI/CD：配置持续集成（CI）和持续部署（CD）流程，自动化构建、测试和部署。 测试：集成单元测试、集成测试和端到端测试工具，如 Jest、Cypress 等，确保代码质量。 6. 代码质量 静态分析：使用 ESLint、TSLint 等工具进行代码静态检查。 测试覆盖率：监控测试覆盖率，确保关键代码路径被充分测试。 7. 文档 代码文档：编写和维护项目文档，包括 API 文档、开发指南和使用说明。 自动化文档生成：使用工具如 Storybook、JSDoc 等生成组件库和 API 文档。 8. 组件库 设计系统：构建和维护一套一致的设计系统和组件库，提高开发效率和界面一致性。 共享组件：创建和管理共享组件，促进代码复用。 9. 性能优化 前端性能：优化页面加载速度、响应时间和渲染性能。 网络请求：管理和优化网络请求策略，减少请求次数和数据传输量。 10. 安全 安全最佳实践：遵循前端安全最佳实践，如防范 XSS 和 CSRF 攻击。 敏感数据保护：确保敏感数据不被暴露或滥用。 4. 项目中遇到的印象最深的难题是什么？如何解决的？ 题目要点 难题背景, 影响, 解决方案, 最终结果 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 该轮主要考察前端基础知识、JavaScript高级特性、HTTP协议、Vue与React框架对比、Git操作以及算法实现能力。问题涵盖理论理解与实际应用，氛围较为专业。 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 如何判断一个变量是数组？ 题库原题：判断数组的方式有哪些？ 题目要点 推荐方法：使用 Array.isArray()，这是最简单、最可靠的方式来检查一个值是否为数组。 其他方法：instanceof 和 Object.prototype.toString.call() 也很有效，但有一些特定的局限性。constructor 和 isPrototypeOf() 方法不如 Array.isArray() 可靠，且在某些情况下可能会出现问题。 参考答案 判断一个值是否为数组的方式有多种： 1. Array.isArray() 方法 描述：这是 ES5 引入的标准方法，推荐用于检查一个值是否为数组。 语法：Array.isArray(value) 示例： console.log(Array.isArray([1, 2, 3])); // true console.log(Array.isArray('hello')); // false 2. instanceof 操作符 描述：使用 instanceof 操作符来判断对象是否是 Array 的实例。 语法：value instanceof Array 示例： console.log([1, 2, 3] instanceof Array); // true console.log('hello' instanceof Array); // false 3. Object.prototype.toString.call() 方法 描述：使用 Object.prototype.toString.call() 可以准确判断一个对象的类型，包括数组。它返回 [object Array] 对于数组，其他类型则返回不同的结果。 语法：Object.prototype.toString.call(value) 示例： console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array] console.log(Object.prototype.toString.call('hello')); // [object String] 4. constructor 属性 描述：检查 constructor 属性是否为 Array。这种方法不如 Array.isArray() 可靠，因为 constructor 可以被改变。 语法：value.constructor === Array 示例： console.log([1, 2, 3].constructor === Array); // true console.log('hello'.constructor === Array); // false 5. Array.prototype.isPrototypeOf() 方法 描述：检查数组的 prototype 是否在目标对象的 prototype 链上。这种方法也可以用来判断一个对象是否为数组。 语法：Array.prototype.isPrototypeOf(value) 示例： console.log(Array.prototype.isPrototypeOf([1, 2, 3])); // true console.log(Array.prototype.isPrototypeOf('hello')); // false 6. 使用 constructor 属性和原型链 描述：结合 constructor 属性和原型链检查。这个方法有一定的局限性，不推荐使用。 示例： function isArray(value) { return value && typeof value === 'object' && value.constructor === Array; } console.log(isArray([1, 2, 3])); // true console.log(isArray('hello')); // false 2. 讲一下闭包及其优缺点。 题目要点 函数嵌套, 词法作用域, 内存管理 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 该轮主要考察前端开发相关知识，包括动画实现、性能优化、React优化、Web Accessibility、计时器处理、WebSocket、缓存策略、国际化、兼容性问题等。题目以主观题为主，注重对核心原理和实际应用场景的理解。 本轮共 18 道题。答案默认折叠，便于先自行作答。 1. 实现一个动画，当用户鼠标悬停在按钮上时，按钮逐渐变大 题目要点 CSS transition, 动画性能优化, 硬件加速, 事件监听 参考答案 在实现此类动画时，可以使用CSS的transition属性或JavaScript的requestAnimationFrame方法。重点在于控制动画的流畅性和性能。可以通过设置合适的过渡时间（transition-duration）和使用硬件加速（如transform: scale()）来提升性能。此外，注意避免不必要的重排和重绘，确保动画的平滑性。 2. 如何避免动画过程中的卡顿？ 题库原题：在解决动画卡顿问题时，会引导硬件加速，那么硬件加速的原理是什么？ 题目要点 硬件加速是指利用 GPU（图形处理单元）来执行图形和动画相关的计算任务，以减轻 CPU（中央处理单元）的负担。GPU 专为处理图形和图像的高吞吐量操作而设计，因此在执行动画和复杂图形渲染时，硬件加速可以提供更流畅的体验。 原理解析 GPU vs CPU： GPU 拥有更多的核心，适合并行处理大量计算任务，而 CPU 核心较少，更适合串行处理复杂逻辑。 图形渲染： GPU 优化了图形渲染流程，包括顶点处理、像素着色等，这些是动画和图形显示的基础。 减少重绘和回流： 通过硬件加速，可以减少浏览器的重绘（repaint）和回流（reflow）次数，这些操作通常由 DOM 变更触发，非常消耗性能。 合成层（Compositing Layer）： 浏览器使用合成层来合并多个层的图形，GPU 可以快速地在这些层上进行变换和动画。 CSS 属性触发： 某些 CSS 属性，如 transform 的 3D 变换（translate3d、scale3d 等）和 opacity 动画，可以触发硬件加速。 浏览器优化： 浏览器会根据性能和资源情况，自动决定是否使用硬件加速。 考察重点 理解：硬件加速的基本概念和 GPU 在图形渲染中的作用。 应用：知道哪些 CSS 属性可以触发硬件加速，以及如何利用它们来优化动画性能。 参考答案 面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 该轮面试主要考察了浏览器的工作原理、缓存策略、跨域、Vue生命周期、组件通信等方面的知识。题目涉及理论知识和实际应用场景。 本轮共 14 道题。答案默认折叠，便于先自行作答。 1. 详细讲一下从url输入网址到页面渲染的过程 题库原题：简单描述从输入网址到页面显示的过程 题目要点 当输入URL到页面加载完成，发生了以下几个关键过程： DNS解析：浏览器将URL解析为对应的IP地址。这个过程涉及多级DNS服务器，从本地缓存开始，如果没有找到，则递归查询根域名服务器、顶级域名服务器，直到找到目标服务器的IP地址。 TCP连接：浏览器通过三次握手与服务器建立TCP连接。一旦连接建立，浏览器可以发送HTTP请求。 HTTP请求：浏览器构建HTTP请求报文，通过TCP连接发送到服务器。请求报文包含请求行、请求头和请求正文。 服务器处理请求：服务器接收HTTP请求，解析请求内容，执行相应的处理（如数据库查询、文件读取等），并构建HTTP响应报文。 HTTP响应：服务器将响应报文通过TCP连接发送回浏览器。响应报文包含状态码、响应头和响应正文。 浏览器解析渲染：浏览器接收到HTTP响应后，解析HTML文档构建DOM树，解析CSS构建CSSOM树，合并两者形成渲染树，然后开始渲染页面。 连接结束：当浏览器完成页面渲染或收到服务器关闭连接的信号时，浏览器会发送TCP连接关闭的信号，服务器收到后，双方断开连接。 参考答案 很多大公司面试喜欢问这样一道面试题，输入URL到看见页面发生了什么？ 简单来说，共有以下几个过程： DNS解析 发起TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 下面我们来看看具体的细节。 DNS解析 DNS解析实际上就是寻找你所需要的资源的过程。假设你输入www.baidu.com，而这个网址并不是百度的真实地址，互联网中每一台机器都有唯一标识的IP地址，这个才是关键，但是它不好记，乱七八糟一串数字谁记得住啊，所以就需要一个网址和IP地址的转换，也就是DNS解析。 DNS解析其实是一个递归的过程。 输入www.google.com网址后，首先在本地的域名服务器中查找，没找到去根域名服务器查找，没有再去com顶级域名服务器查找，，如此的类推下去，直到找到IP地址，然后把它记录在本地，供下次使用。大致过程就是.-> .com ->google.com. -> www.google.com.。 (最后这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，为了方便用户，通常都会省略，浏览器在请求DNS的时候会自动加上) DNS优化 既然已经懂得了解析的具体过程，我们可以看到上述一共经过了N个过程，每个过程有一定的消耗和时间的等待，因此我们得想办法解决一下这个问题！ DNS缓存 DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，ISP服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。 DNS负载均衡 比如访问baidu.com的时候，每次响应的并非是同一个服务器（IP地址不同），一般大公司都有成百上千台服务器来支撑访问。DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是DNS负载均衡。 发起TCP连接 TCP提供一种可靠的传输，这个过程涉及到三次握手，四次挥手。 三次握手 第一次握手： 客户端发送syn包(Seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认； 第二次握手： 服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（Seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态； 第三次握手： 客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。 握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前，TCP 连接都将被一直保持下去。 四次挥手 数据传输完毕后，双方都可释放连接。最开始的时候，客户端和服务器都是处于ESTABLISHED状态，假设客户端主动关闭，服务器被动关闭。 第一次挥手： 客户端发送一个FIN，用来关闭客户端到服务器的数据传送，也就是客户端告诉服务器：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，客户端依然会重发这些数据)，但是，此时客户端还可以接受数据。 FIN=1，其序列号为seq=u（等于前面已经传送过来的数据的最后一个字节的序号加1），此时，客户端进入FIN-WAIT-1（终止等待1）状态。 TCP规定，FIN报文段即使不携带数据，也要消耗一个序号。 第二次挥手： 服务器收到FIN包后，发送一个ACK给对方并且带上自己的序列号seq，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。此时，服务端就进入了CLOSE-WAIT（关闭等待）状态。TCP服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个CLOSE-WAIT状态持续的时间。 ...

← 第 1 轮 · 返回本次面经 · 第 3 轮 → 本轮概述： 这一轮主要考察了小程序的性能优化、核心监控指标、首屏时间的计算、业务价值验证、高频事件处理等方面的知识。 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 小程序性能优化做了哪些事情？ 题库原题：小程序可以做哪些性能优化？ 题目要点 小程序性能优化围绕逻辑层与视图层分离架构展开，重点是减少 setData 频率与数据体积，控制列表节点数量，优化首包体积与启动链路，并通过分包加载、WXS 与懒加载等手段降低渲染压力。核心原则是减少跨线程通信与避免无意义重渲染，从架构层面解决性能瓶颈。 参考答案 小程序的性能优化，不能只从“前端渲染”角度看。它的运行模型和 Web 不同，存在 逻辑层（JSCore）与视图层（WebView）分离 的架构特征，核心瓶颈往往出在： 跨线程通信成本 setData 传输体积 渲染节点数量 包体与启动链路 优化必须围绕这些机制展开。 一、理解运行架构是前提 以 微信小程序 为例： 逻辑层：JS 执行环境 视图层：WebView 渲染 两层通过 JSON 序列化通信 每一次 setData： 数据序列化 线程间传输 视图层 diff 真实节点更新 所以小程序性能优化的第一原则是： 减少跨线程通信的数据量与次数。 二、控制 setData 的粒度与频率 1. 避免大对象全量更新 错误方式： this.setData({ form: newFormObject }) 如果 form 很大，每次都会整体传输。 正确方式： this.setData({ "form.username": value }) 使用路径更新，最小化数据传输。 2. 合并多次 setData 多次调用： ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 这一轮主要考察了项目经验和技术选型，包括Vue3+TS的选择理由、UI框架的优势、TypeScript的应用、组件化方案、Canvas离屏渲染、Service Worker等内容。 本轮共 14 道题。答案默认折叠，便于先自行作答。 1. 讲一下你觉的最有成就感的项目 题目要点 实际问题, 创新性, 用户价值, 项目背景, 技术选型, 实现过程, 最终效果, 亮点, 贡献 参考答案 最有成就感的项目通常是那些能够解决实际问题、具有创新性并且对用户有显著价值的项目。在回答这个问题时，可以从项目的背景、目标、技术选型、实现过程以及最终效果等方面进行详细描述。重点突出项目的亮点和自己在其中的贡献。 2. 项目为什么选择Vue3+TS而非React 题目要点 Vue3 + TypeScript 的选择通常基于团队技术栈一致性、Composition API 带来的逻辑复用能力、与 TypeScript 的良好类型推导，以及在中后台场景中更成熟的生态和更低的工程复杂度，从而提升整体开发效率与可维护性。 参考答案 在技术选型阶段通常会综合考虑团队技术栈、项目复杂度以及开发效率等因素。对于以中后台系统或业务管理平台为主的项目，Vue3 在整体开发体验和约束能力上往往更容易形成统一规范。 首先是框架设计层面的差异。Vue3 通过 Composition API 将逻辑拆分为可组合的函数单元，在复杂业务场景下可以很好地解决 Options API 中逻辑分散的问题，同时又保留了模板语法，使得结构、逻辑、样式之间的职责划分更加清晰。对于需要长期维护的业务项目，这种组织方式通常更容易理解和维护。 其次是 TypeScript 的结合程度。Vue3 在框架层面对 TypeScript 做了较深的适配，例如 defineComponent、setup、ref、reactive 等 API 都有较完整的类型推导能力，配合 <script setup> 可以获得较好的类型提示和开发体验。在大型项目中，类型系统能够帮助提前暴露接口契约问题，提高代码的可维护性。 另外在生态与工程效率方面，Vue3 在国内中后台领域的组件生态较成熟，例如组件库、低代码平台以及相关工具链都比较完善，能够快速搭建业务系统。对于团队成员技术背景主要偏 Vue 的情况下，可以降低学习成本和沟通成本，提高整体开发效率。 从工程复杂度角度看，React 在灵活性上更强，但很多能力需要通过生态组合实现，例如状态管理、表单方案等，需要额外制定规范。Vue3 本身提供了较完整的开发范式，在团队规模较大的情况下更容易形成统一的代码风格。 3. NutUI在营销活动中相比其他UI框架有什么优势 题目要点 移动端, 轻量, 高性能, 易于使用, 组件库, 用户体验, 开发效率, 按需加载, 应用体积 ...

← 第 2 轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 这一轮主要考察了小程序的低代码设计架构、Web Worker的使用、中台系统的微前端拆分策略等方面的知识。 本轮共 4 道题。答案默认折叠，便于先自行作答。 1. 讲一下你关于小程序的低代码设计架构 题目要点 小程序低代码架构本质是配置驱动的运行时体系，核心包括 DSL 协议设计、组件注册机制、运行时解析与数据驱动更新；必须围绕 setData 性能约束进行差量更新与渲染优化；工程重点不在编辑器，而在运行时引擎的性能治理与扩展能力设计。 参考答案 小程序的低代码架构，本质是在受限运行环境下实现“可配置驱动 UI 与逻辑”。核心不是拖拽能力，而是如何让页面结构、交互逻辑、数据流都由配置驱动，同时保证性能与可维护性。 一、整体架构分层 小程序低代码一般分为四层： 编辑层 → DSL 层 → 运行时引擎 → 渲染层 编辑层负责产出结构化配置；DSL 层定义组件树与属性协议；运行时负责解析与调度；渲染层落在小程序原生组件体系之上（如 WXML + setData 机制，在 微信小程序 中即运行于其渲染框架内）。 关键问题在于：小程序不是虚拟 DOM 模型，而是逻辑层与视图层分离，通过 JSON 数据桥接，因此架构必须围绕数据驱动。 二、DSL 设计 DSL 通常采用 JSON Schema 形式，核心包含： 组件类型 属性 props 样式 事件绑定 数据源 条件显示规则 低代码的关键在于“协议稳定性”，一旦 DSL 设计混乱，后续扩展成本会极高。因此会设计： 组件注册机制 属性校验规则 默认值策略 版本兼容策略 三、运行时引擎 运行时是核心。 ...