<?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>小红书-社招-1年 on Last Stand</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/</link><description>Recent content in 小红书-社招-1年 on Last Stand</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Sun, 01 Feb 2026 14:40:35 +0000</lastBuildDate><atom:link href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/index.xml" rel="self" type="application/rss+xml"/><item><title>小红书-社招-1年 · 第 1 轮 · 技术面试</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/round-154/</link><pubDate>Sun, 01 Feb 2026 14:40:35 +0000</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/round-154/</guid><description>&lt;blockquote&gt;
&lt;p&gt;← 已是第一轮 · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/"&gt;返回本次面经&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/round-155/"&gt;第 2 轮&lt;/a&gt; →&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;本轮概述：&lt;/strong&gt; 这一轮主要考察了前端技术栈的深度和广度，包括CSS框架、响应式设计、渲染优化、Vue框架的高级特性、HTTP协议、浏览器渲染机制等方面的知识。&lt;/p&gt;
&lt;p&gt;本轮共 22 道题。答案默认折叠，便于先自行作答。&lt;/p&gt;
&lt;h2 id="question-subjective-aa8173c10147"&gt;1. 项目中为何选择 Tailwind CSS ？&lt;/h2&gt;
&lt;h3 id="题目要点"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;灵活性, 可维护性, 现代前端工具链&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;Tailwind CSS 是一个高度可定制的低级 CSS 框架，它提供了大量的原子类，可以快速构建一致且响应式的布局。选择 Tailwind CSS 的原因可能包括其灵活性、可维护性以及与现代前端工具链的良好集成。&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id="question-fa06c194-9fab-4cf0-8cc7-dda90c2c4f97"&gt;2. Tailwind 是怎么解决样式冲突的？&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;题库原题：&lt;a href="https://fe.ecool.fun/topic/fa06c194-9fab-4cf0-8cc7-dda90c2c4f97"&gt;Tailwind 是怎么解决样式冲突的？&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id="题目要点-1"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;Tailwind 通过原子化 utility 类、统一选择器权重、避免层级嵌套、构建期生成样式以及可预测的覆盖规则，从架构层面降低样式冲突的发生概率。它不是依赖命名规范解决冲突，而是通过设计约束和单一职责类模型，使样式天然解耦，从而让冲突可控且可预测。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;这个问题如果只回答“因为类名不会冲突”是远远不够的。&lt;/p&gt;
&lt;p&gt;Tailwind 解决样式冲突，本质上是通过 &lt;strong&gt;设计约束 + 原子化模型 + 构建期生成策略&lt;/strong&gt;，从源头消除冲突的产生条件，而不是事后避免覆盖。&lt;/p&gt;
&lt;p&gt;下面从机制层面拆解。&lt;/p&gt;
&lt;hr&gt;
&lt;h1 id="一传统-css-为什么容易冲突"&gt;一、传统 CSS 为什么容易冲突&lt;/h1&gt;
&lt;p&gt;传统样式冲突来自三个方面：&lt;/p&gt;
&lt;h3 id="1-选择器冲突"&gt;1. 选择器冲突&lt;/h3&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-css" data-lang="css"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;.&lt;span style="color:#a6e22e"&gt;btn&lt;/span&gt; { &lt;span style="color:#66d9ef"&gt;color&lt;/span&gt;: &lt;span style="color:#66d9ef"&gt;red&lt;/span&gt;; }
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;.&lt;span style="color:#a6e22e"&gt;button&lt;/span&gt; { &lt;span style="color:#66d9ef"&gt;color&lt;/span&gt;: &lt;span style="color:#66d9ef"&gt;blue&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-层级嵌套带来的权重问题"&gt;2. 层级嵌套带来的权重问题&lt;/h3&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-css" data-lang="css"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;.&lt;span style="color:#a6e22e"&gt;page&lt;/span&gt; .&lt;span style="color:#a6e22e"&gt;btn&lt;/span&gt; { &lt;span style="color:#960050;background-color:#1e0010"&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="3-样式全局污染"&gt;3. 样式全局污染&lt;/h3&gt;
&lt;p&gt;CSS 默认是全局作用域，没有隔离边界。&lt;/p&gt;</description></item><item><title>小红书-社招-1年 · 第 2 轮 · 技术面试</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/round-155/</link><pubDate>Sun, 01 Feb 2026 14:40:35 +0000</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/round-155/</guid><description>&lt;blockquote&gt;
&lt;p&gt;← &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/round-154/"&gt;第 1 轮&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/"&gt;返回本次面经&lt;/a&gt; · 已是最后一轮 →&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;本轮概述：&lt;/strong&gt; 这一轮主要考察了项目经验和技术选型，包括Vue3+TS的选择理由、UI框架的优势、TypeScript的应用、组件化方案、Canvas离屏渲染、Service Worker等内容。&lt;/p&gt;
&lt;p&gt;本轮共 14 道题。答案默认折叠，便于先自行作答。&lt;/p&gt;
&lt;h2 id="question-subjective-5e97f1f58c95"&gt;1. 讲一下你觉的最有成就感的项目&lt;/h2&gt;
&lt;h3 id="题目要点"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;实际问题, 创新性, 用户价值, 项目背景, 技术选型, 实现过程, 最终效果, 亮点, 贡献&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;最有成就感的项目通常是那些能够解决实际问题、具有创新性并且对用户有显著价值的项目。在回答这个问题时，可以从项目的背景、目标、技术选型、实现过程以及最终效果等方面进行详细描述。重点突出项目的亮点和自己在其中的贡献。&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id="question-subjective-46188abebbf3"&gt;2. 项目为什么选择Vue3+TS而非React&lt;/h2&gt;
&lt;h3 id="题目要点-1"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;Vue3 + TypeScript 的选择通常基于团队技术栈一致性、Composition API 带来的逻辑复用能力、与 TypeScript 的良好类型推导，以及在中后台场景中更成熟的生态和更低的工程复杂度，从而提升整体开发效率与可维护性。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;在技术选型阶段通常会综合考虑团队技术栈、项目复杂度以及开发效率等因素。对于以中后台系统或业务管理平台为主的项目，Vue3 在整体开发体验和约束能力上往往更容易形成统一规范。&lt;/p&gt;
&lt;p&gt;首先是框架设计层面的差异。Vue3 通过 Composition API 将逻辑拆分为可组合的函数单元，在复杂业务场景下可以很好地解决 Options API 中逻辑分散的问题，同时又保留了模板语法，使得结构、逻辑、样式之间的职责划分更加清晰。对于需要长期维护的业务项目，这种组织方式通常更容易理解和维护。&lt;/p&gt;
&lt;p&gt;其次是 TypeScript 的结合程度。Vue3 在框架层面对 TypeScript 做了较深的适配，例如 &lt;code&gt;defineComponent&lt;/code&gt;、&lt;code&gt;setup&lt;/code&gt;、&lt;code&gt;ref&lt;/code&gt;、&lt;code&gt;reactive&lt;/code&gt; 等 API 都有较完整的类型推导能力，配合 &lt;code&gt;&amp;amp;lt;script setup&amp;amp;gt;&lt;/code&gt; 可以获得较好的类型提示和开发体验。在大型项目中，类型系统能够帮助提前暴露接口契约问题，提高代码的可维护性。&lt;/p&gt;
&lt;p&gt;另外在生态与工程效率方面，Vue3 在国内中后台领域的组件生态较成熟，例如组件库、低代码平台以及相关工具链都比较完善，能够快速搭建业务系统。对于团队成员技术背景主要偏 Vue 的情况下，可以降低学习成本和沟通成本，提高整体开发效率。&lt;/p&gt;
&lt;p&gt;从工程复杂度角度看，React 在灵活性上更强，但很多能力需要通过生态组合实现，例如状态管理、表单方案等，需要额外制定规范。Vue3 本身提供了较完整的开发范式，在团队规模较大的情况下更容易形成统一的代码风格。&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id="question-subjective-6d85386cc446"&gt;3. NutUI在营销活动中相比其他UI框架有什么优势&lt;/h2&gt;
&lt;h3 id="题目要点-2"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;移动端, 轻量, 高性能, 易于使用, 组件库, 用户体验, 开发效率, 按需加载, 应用体积&lt;/p&gt;</description></item></channel></rss>