<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>小红书-社招-3年 on Last Stand</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/</link><description>Recent content in 小红书-社招-3年 on Last Stand</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Sun, 01 Feb 2026 14:42:08 +0000</lastBuildDate><atom:link href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/index.xml" rel="self" type="application/rss+xml"/><item><title>小红书-社招-3年 · 第 1 轮 · 技术面试</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-156/</link><pubDate>Sun, 01 Feb 2026 14:42:08 +0000</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-156/</guid><description>&lt;blockquote&gt;
&lt;p&gt;← 已是第一轮 · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/"&gt;返回本次面经&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-157/"&gt;第 2 轮&lt;/a&gt; →&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;本轮概述：&lt;/strong&gt; 这一轮主要考察了前端基础知识，包括JavaScript的基本类型和引用类型的存储、闭包的内存泄漏、垃圾回收机制、事件循环、React框架的理解等。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;本轮要点：&lt;/strong&gt; Promise、CDN原理、Class、数据类型、浏览器渲染过程&lt;/p&gt;
&lt;p&gt;本轮共 24 道题。答案默认折叠，便于先自行作答。&lt;/p&gt;
&lt;h2 id="question-ae4aa03a-06fe-41be-9c42-f53947f13f49"&gt;1. js中基本类型 和 引用类型的存储有什么不一样&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;题库原题：&lt;a href="https://fe.ecool.fun/topic/ae4aa03a-06fe-41be-9c42-f53947f13f49"&gt;引用类型有哪些，有什么特点&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id="题目要点"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。&lt;/p&gt;
&lt;p&gt;常见的引用类型包括：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;对象（Object）&lt;/code&gt;：对象是JavaScript中最基本的引用类型，它可以用来存储键值对，也可以通过原型链实现继承。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;数组（Array）&lt;/code&gt;：数组是一种有序的集合，可以存储任意类型的数据，它的长度是动态的，可以随时添加或删除元素。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;函数（Function）&lt;/code&gt;：函数是一种可执行的对象，可以封装一段可重复使用的代码。函数可以接收参数并返回值。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;引用类型的特点包括：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;引用类型的值是可变的：引用类型的值是存储在堆内存中的，当我们修改一个引用类型的值时，实际上是修改了它在内存中的地址，而不是修改了该值本身。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;引用类型值的比较是引用的比较：当使用&amp;quot;==&amp;ldquo;或&amp;rdquo;===&amp;ldquo;运算符比较两个引用类型的值时，它们会进行引用的比较，即判断它们是否指向同一个内存地址。只有当两个引用指向同一个对象时，它们才被认为是相等的。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;引用类型可以有自己的属性和方法：引用类型的值可以拥有自己的属性和方法。例如，数组对象有长度属性和一些常用的数组方法（例如push、pop、sort等），而函数对象有call、apply等方法。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;引用类型可以通过原型链实现继承：通过原型链，引用类型可以继承父类型的属性和方法。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;基本类型（如数字、字符串、布尔值）在JavaScript中是按值传递的，而引用类型是按引用传递的。&lt;/p&gt;
&lt;p&gt;这意味着当将一个引用类型的值赋给另一个变量时，实际上是将内存地址复制给了新的变量，两个变量引用的是同一对象。而基本类型的值赋给另一个变量时，会创建一个新的值并赋给新的变量。&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id="question-6dd983d9-39fc-48ca-9e22-7599ab339f5b"&gt;2. 闭包的内存泄漏应该如何监控和解决？&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;题库原题：&lt;a href="https://fe.ecool.fun/topic/6dd983d9-39fc-48ca-9e22-7599ab339f5b"&gt;如何检查Javascript中的内存泄漏？&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id="题目要点-1"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;Chrome 浏览器查看内存占用，按照以下步骤操作。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;h2 id="浏览器"&gt;浏览器&lt;/h2&gt;
&lt;p&gt;Chrome 浏览器查看内存占用，按照以下步骤操作。&lt;/p&gt;
&lt;p&gt;&lt;img alt="image.png" loading="lazy" src="https://static.ecool.fun//article/b822300b-cf04-4c9f-9d88-06bd331726c0.png"&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;1、打开开发者工具，选择 Timeline 面板
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;2、在顶部的Capture字段里面勾选 Memory
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;3、点击左上角的录制按钮。
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;4、在页面上进行各种操作，模拟用户的使用情况。
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;5、一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况。
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。&lt;/p&gt;
&lt;p&gt;&lt;img alt="image.png" loading="lazy" src="https://static.ecool.fun//article/5b616638-2dbc-49a7-9bde-97271ec206b1.png"&gt;&lt;/p&gt;
&lt;p&gt;反之，就是内存泄漏了。&lt;/p&gt;
&lt;p&gt;&lt;img alt="image.png" loading="lazy" src="https://static.ecool.fun//article/a05a6942-5cbe-42c8-a213-9122a9a851db.png"&gt;&lt;/p&gt;
&lt;h2 id="命令行"&gt;命令行&lt;/h2&gt;
&lt;p&gt;命令行可以使用 Node 提供的process.memoryUsage方法。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-js" data-lang="js"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#a6e22e"&gt;console&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;log&lt;/span&gt;(&lt;span style="color:#a6e22e"&gt;process&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;memoryUsage&lt;/span&gt;());
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#75715e"&gt;// { rss: 27709440,
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#75715e"&gt;// heapTotal: 5685248,
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#75715e"&gt;// heapUsed: 3449392,
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#75715e"&gt;// external: 8772 }
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;process.memoryUsage返回一个对象，包含了 Node 进程的内存占用信息。该对象包含四个字段，单位是字节，含义如下。&lt;/p&gt;</description></item><item><title>小红书-社招-3年 · 第 2 轮 · 技术面试</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-157/</link><pubDate>Sun, 01 Feb 2026 14:42:08 +0000</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-157/</guid><description>&lt;blockquote&gt;
&lt;p&gt;← &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-156/"&gt;第 1 轮&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/"&gt;返回本次面经&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-158/"&gt;第 3 轮&lt;/a&gt; →&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;本轮概述：&lt;/strong&gt; 这一轮主要考察了小程序的性能优化、核心监控指标、首屏时间的计算、业务价值验证、高频事件处理等方面的知识。&lt;/p&gt;
&lt;p&gt;本轮共 11 道题。答案默认折叠，便于先自行作答。&lt;/p&gt;
&lt;h2 id="question-92e09b66-a9fc-435d-ad28-99011b2ddeaa"&gt;1. 小程序性能优化做了哪些事情？&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;题库原题：&lt;a href="https://fe.ecool.fun/topic/92e09b66-a9fc-435d-ad28-99011b2ddeaa"&gt;小程序可以做哪些性能优化？&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id="题目要点"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;小程序性能优化围绕逻辑层与视图层分离架构展开，重点是减少 setData 频率与数据体积，控制列表节点数量，优化首包体积与启动链路，并通过分包加载、WXS 与懒加载等手段降低渲染压力。核心原则是减少跨线程通信与避免无意义重渲染，从架构层面解决性能瓶颈。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;小程序的性能优化，不能只从“前端渲染”角度看。它的运行模型和 Web 不同，存在 &lt;strong&gt;逻辑层（JSCore）与视图层（WebView）分离&lt;/strong&gt; 的架构特征，核心瓶颈往往出在：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;跨线程通信成本&lt;/li&gt;
&lt;li&gt;setData 传输体积&lt;/li&gt;
&lt;li&gt;渲染节点数量&lt;/li&gt;
&lt;li&gt;包体与启动链路&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;优化必须围绕这些机制展开。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="一理解运行架构是前提"&gt;一、理解运行架构是前提&lt;/h2&gt;
&lt;p&gt;以 微信小程序 为例：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;逻辑层：JS 执行环境&lt;/li&gt;
&lt;li&gt;视图层：WebView 渲染&lt;/li&gt;
&lt;li&gt;两层通过 JSON 序列化通信&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;每一次 &lt;code&gt;setData&lt;/code&gt;：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;数据序列化&lt;/li&gt;
&lt;li&gt;线程间传输&lt;/li&gt;
&lt;li&gt;视图层 diff&lt;/li&gt;
&lt;li&gt;真实节点更新&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;所以小程序性能优化的第一原则是：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;减少跨线程通信的数据量与次数。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;hr&gt;
&lt;h2 id="二控制-setdata-的粒度与频率"&gt;二、控制 setData 的粒度与频率&lt;/h2&gt;
&lt;h3 id="1-避免大对象全量更新"&gt;1. 避免大对象全量更新&lt;/h3&gt;
&lt;p&gt;错误方式：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-js" data-lang="js"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;this&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;setData&lt;/span&gt;({
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;form&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;newFormObject&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;})
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;如果 form 很大，每次都会整体传输。&lt;/p&gt;
&lt;p&gt;正确方式：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-js" data-lang="js"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;this&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;setData&lt;/span&gt;({
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#e6db74"&gt;&amp;#34;form.username&amp;#34;&lt;/span&gt;&lt;span style="color:#f92672"&gt;:&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;value&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;})
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;使用路径更新，最小化数据传输。&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id="2-合并多次-setdata"&gt;2. 合并多次 setData&lt;/h3&gt;
&lt;p&gt;多次调用：&lt;/p&gt;</description></item><item><title>小红书-社招-3年 · 第 3 轮 · 技术面试</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-158/</link><pubDate>Sun, 01 Feb 2026 14:42:08 +0000</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-158/</guid><description>&lt;blockquote&gt;
&lt;p&gt;← &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-157/"&gt;第 2 轮&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/"&gt;返回本次面经&lt;/a&gt; · 已是最后一轮 →&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;本轮概述：&lt;/strong&gt; 这一轮主要考察了小程序的低代码设计架构、Web Worker的使用、中台系统的微前端拆分策略等方面的知识。&lt;/p&gt;
&lt;p&gt;本轮共 4 道题。答案默认折叠，便于先自行作答。&lt;/p&gt;
&lt;h2 id="question-subjective-002c3370fca7"&gt;1. 讲一下你关于小程序的低代码设计架构&lt;/h2&gt;
&lt;h3 id="题目要点"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;小程序低代码架构本质是配置驱动的运行时体系，核心包括 DSL 协议设计、组件注册机制、运行时解析与数据驱动更新；必须围绕 setData 性能约束进行差量更新与渲染优化；工程重点不在编辑器，而在运行时引擎的性能治理与扩展能力设计。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;小程序的低代码架构，本质是在&lt;strong&gt;受限运行环境下实现“可配置驱动 UI 与逻辑”&lt;/strong&gt;。核心不是拖拽能力，而是如何让页面结构、交互逻辑、数据流都由配置驱动，同时保证性能与可维护性。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="一整体架构分层"&gt;一、整体架构分层&lt;/h2&gt;
&lt;p&gt;小程序低代码一般分为四层：&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;编辑层 → DSL 层 → 运行时引擎 → 渲染层&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;编辑层负责产出结构化配置；DSL 层定义组件树与属性协议；运行时负责解析与调度；渲染层落在小程序原生组件体系之上（如 WXML + setData 机制，在 微信小程序 中即运行于其渲染框架内）。&lt;/p&gt;
&lt;p&gt;关键问题在于：小程序不是虚拟 DOM 模型，而是逻辑层与视图层分离，通过 JSON 数据桥接，因此架构必须围绕数据驱动。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="二dsl-设计"&gt;二、DSL 设计&lt;/h2&gt;
&lt;p&gt;DSL 通常采用 JSON Schema 形式，核心包含：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;组件类型&lt;/li&gt;
&lt;li&gt;属性 props&lt;/li&gt;
&lt;li&gt;样式&lt;/li&gt;
&lt;li&gt;事件绑定&lt;/li&gt;
&lt;li&gt;数据源&lt;/li&gt;
&lt;li&gt;条件显示规则&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;低代码的关键在于“协议稳定性”，一旦 DSL 设计混乱，后续扩展成本会极高。因此会设计：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;组件注册机制&lt;/li&gt;
&lt;li&gt;属性校验规则&lt;/li&gt;
&lt;li&gt;默认值策略&lt;/li&gt;
&lt;li&gt;版本兼容策略&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="三运行时引擎"&gt;三、运行时引擎&lt;/h2&gt;
&lt;p&gt;运行时是核心。&lt;/p&gt;</description></item></channel></rss>