小红书-社招-3年

← 已是第一轮 · 返回本次面经 · 第 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 进程的内存占用信息。该对象包含四个字段，单位是字节，含义如下。 ...

← 第 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 多次调用： ...

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