https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/Recent content in 腾讯-1年社招-前端面试 on Last StandHugozh-cnThu, 04 Sep 2025 14:50:28 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/round-124/Thu, 04 Sep 2025 14:50:28 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/round-124/<blockquote> <p>← <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/round-123/">第 1 轮</a> · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/">返回本次面经</a> · 已是最后一轮 →</p> </blockquote> <p>本轮共 10 道题。答案默认折叠，便于先自行作答。</p> <h2 id="question-subjective-052576c3597e">1. 讲一下你的第一个项目</h2> <h3 id="题目要点">题目要点</h3> <p>突出难点与解决方案，亮点强调可扩展性与价值。</p> <details> <summary>参考答案</summary> <p>第一个项目是一个内部管理系统，主要功能是数据可视化和表单管理。难点在于表单项类型复杂、交互逻辑多。解决方案是抽象出一套动态表单引擎，通过 JSON 配置生成组件，既降低了开发成本，也提升了可扩展性。项目的亮点在于统一了交互和样式规范，同时通过可配置化提高了可维护性。</p> </details> <h2 id="question-subjective-5166f4b076aa">2. 为什么选择 Vue3 + Vite 而非 React/Webpack</h2> <h3 id="题目要点-1">题目要点</h3> <p>Vue3 → 响应式系统和语法优势；Vite → 构建性能显著提升。</p> <details> <summary>参考答案</summary> <p>Vue3 在响应式系统上引入了 Proxy，更适合处理复杂响应式数据，语法上对团队更友好。Vite 基于 ESBuild 和原生 ESM，构建速度远快于 Webpack，特别是在开发阶段的冷启动和热更新体验明显更优。而 Webpack 尽管生态成熟，但在开发构建效率上落后。</p> </details> <h2 id="question-subjective-1ecf3069eb75">3. Vite 的构建速度比 Webpack 快多少</h2> <h3 id="题目要点-2">题目要点</h3> <p>冷启动快一个数量级，HMR 延迟极低，原因是按需编译 vs 整包构建。</p> <details> <summary>参考答案</summary> <p>在实际项目中，冷启动通常能快 10 倍以上。例如一个中大型项目，Webpack 启动需要 20-30 秒，Vite 一般在 1-3 秒即可完成；热更新延迟也从秒级缩短到 100ms 以内。这是因为 Vite 基于原生 ESM 做按需编译，而 Webpack 是整包构建。</p> </details> <h2 id="question-subjective-40f1ae7b12e8">4. FCP 从 3.2s 降到 1.1s，具体做了哪些优化？</h2> <h3 id="题目要点-3">题目要点</h3> <p>构建优化 + 资源优化 + 网络优化 + SSR 骨架屏。</p>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/round-123/Thu, 04 Sep 2025 14:50:27 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/round-123/<blockquote> <p>← 已是第一轮 · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/">返回本次面经</a> · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/round-124/">第 1 轮</a> →</p> </blockquote> <p>本轮共 15 道题。答案默认折叠，便于先自行作答。</p> <h2 id="question-subjective-c3858e222cfb">1. 讲一下项目的难点和亮点</h2> <h3 id="题目要点">题目要点</h3> <p>突出解决问题的能力，说明遇到过的复杂问题和优化方案，亮点要体现价值和可扩展性。</p> <details> <summary>参考答案</summary> <p>在大型前端项目中，常见难点在于性能优化和复杂业务的抽象。比如数据量大时页面渲染和交互卡顿，需要通过虚拟列表、懒加载、分片渲染等方式解决；跨端适配和复杂状态管理也是典型难点。亮点可以体现在工程化和架构设计上，例如通过模块化拆分、微前端架构提高可维护性，或通过自动化工具链提升研发效率。</p> </details> <h2 id="question-subjective-b8b956cfe46c">2. 项目的规范是如何制定的，如何执行的</h2> <h3 id="题目要点-1">题目要点</h3> <p>强调自动化工具与制度双管齐下，执行靠工具、评审和 CI 流程。</p> <details> <summary>参考答案</summary> <p>前端规范一般从编码规范、组件封装规范、目录结构、Git 提交规范等方面制定。执行时可以依赖工具保障，比如 ESLint + Prettier 自动化格式化，Husky + lint-staged 在提交时校验，CI/CD 流程中增加检测。对组件层面，约定统一的 API 风格和文档，保证多人协作一致性。</p> </details> <h2 id="question-7d27dc57-5d95-4e3f-88a7-eb685b7c21e4">3. 说说vue中的diff算法</h2> <blockquote> <p>题库原题：<a href="https://fe.ecool.fun/topic/7d27dc57-5d95-4e3f-88a7-eb685b7c21e4">说说vue中的diff算法</a></p> </blockquote> <h3 id="题目要点-2">题目要点</h3> <p><code>diff</code>算法是一种高效的比较算法，主要用于比较虚拟<code>DOM</code>节点，以确定如何更新真实<code>DOM</code>。它具有两个特点：只会在同层级进行比较，不会跨层级比较；在比较的过程中，循环从两边向中间收拢。</p> <p>在Vue中，<code>diff</code>算法用于比较新旧<code>VNode</code>节点，以决定如何更新真实<code>DOM</code>。</p> <p>这个过程分为以下几个步骤：</p> <ol> <li><strong>比较新旧<code>VNode</code>节点</strong>：如果新旧节点相同，则不做任何操作；如果新旧节点都不存在子节点，则直接结束比较；如果新旧节点都有子节点，则进入<code>updateChildren</code>函数比较子节点。</li> <li><strong>更新子节点</strong>：在<code>updateChildren</code>函数中，设置新旧<code>VNode</code>的头尾指针，然后从两边向中间比较。如果新旧头尾指针相同，则直接<code>patchVnode</code>；如果新旧头尾指针不同，则根据情况调用<code>patchVnode</code>、<code>createElm</code>创建新节点，或者从哈希表寻找<code>key</code>一致的旧<code>VNode</code>节点再进行分情况操作。</li> <li><strong><code>patchVnode</code>方法</strong>：如果新旧节点都有文本节点且不相等，则设置真实<code>dom</code>的文本节点为新节点的文本节点；如果旧节点有子节点而新节点没有，则删除旧节点的子节点；如果旧节点没有子节点而新节点有，则将新节点的子节点真实化后添加到旧节点；如果两者都有子节点，则进入<code>updateChildren</code>函数比较子节点。</li> </ol> <p>通过<code>diff</code>算法，Vue能够高效地比较新旧<code>VNode</code>节点，以决定如何更新真实<code>DOM</code>，从而提高页面渲染的性能。</p> <details> <summary>参考答案</summary> <h2 id="一是什么">一、是什么</h2> <p><code>diff</code> 算法是一种通过同层的树节点进行比较的高效算法</p> <p>其有两个特点：</p> <ul> <li>比较只会在同层级进行, 不会跨层级比较</li> <li>在diff比较的过程中，循环从两边向中间比较</li> </ul> <p><code>diff</code> 算法的在很多场景下都有应用，在 <code>vue</code> 中，作用于虚拟 <code>dom</code> 渲染成真实 <code>dom</code> 的新旧 <code>VNode</code> 节点比较</p> <h2 id="二比较方式">二、比较方式</h2> <p><code>diff</code>整体策略为：深度优先，同层比较</p> <ol> <li>比较只会在同层级进行, 不会跨层级比较</li> </ol> <p><img loading="lazy" src="https://static.ecool.fun//article/6366ea3c-b5f9-4add-a1d9-8fb1e7b6c726.png"></p> <ol start="2"> <li>比较的过程中，循环从两边向中间收拢</li> </ol> <p><img loading="lazy" src="https://static.ecool.fun//article/66a1b47c-6fd5-4a1a-80a9-a7bbfdf30022.png"></p>