https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-74/Recent content in 字节-国际电商-前端面试 on Last StandHugozh-cnTue, 02 Sep 2025 07:09:39 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-74/round-118/Tue, 02 Sep 2025 07:09:39 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-74/round-118/<blockquote> <p>← 已是第一轮 · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-74/">返回本次面经</a> · 已是最后一轮 →</p> </blockquote> <p><strong>本轮要点：</strong> 考察面试者的表达能力、总结归纳能力和个人亮点。</p> <p>本轮共 17 道题。答案默认折叠，便于先自行作答。</p> <h2 id="question-subjective-12b75c445924">1. 自我介绍</h2> <h3 id="题目要点">题目要点</h3> <ul> <li><strong>主观型问题，无唯一标准答案。</strong> 面试官主要考察答题者的表达能力、总结归纳能力、沟通技巧以及对自身经历和技术栈的清晰认知。</li> <li>答题时建议围绕&quot;我是谁&quot;、&ldquo;我做了什么&rdquo;、&ldquo;我做得怎么样&quot;和&quot;我为什么选择贵公司&quot;这几个核心点展开，突出个人亮点与岗位匹配度。</li> </ul> <details> <summary>参考答案</summary> <p>各位面试官好，我叫[您的姓名]，毕业于[您的学校]，专业是[您的专业]。在校期间，我专注于前端开发方向的学习与实践。在技术栈方面，我熟练掌握 HTML、CSS、JavaScript 基础，并深入学习了 Vue.js 框架，对 Vue 生态系统，如 Vuex、Vue Router 也有实际应用经验。在实习期间，我主要负责[您的项目职责，例如：公司官网前端页面的开发与维护，参与了XX功能模块的重构]。具体工作中，我曾独立负责[具体某个功能或模块]，通过[具体技术或方法]，实现了[具体效果或优化]，比如在[某项目中]实现了[某个功能]，有效提升了用户体验[或业务效率]。我个人对前端技术充满热情，具备良好的学习能力和解决问题的能力，期待能将我的技能和经验应用到贵公司，与团队一同成长。</p> </details> <h2 id="question-subjective-cd610cb03548">2. 在学校期间有没有参与过什么技术社团或项目，对你的前端学习有什么帮助？</h2> <h3 id="题目要点-1">题目要点</h3> <ul> <li><strong>主观型问题，无唯一标准答案。</strong> 面试官主要考察答题者在校期间对技术的热情、主动学习能力、团队协作能力以及将理论知识应用于实践的能力。他们希望了解你如何将课外活动与前端学习结合，并从中获得了哪些成长。</li> <li>答题时建议突出你在社团/项目中承担的角色、遇到的挑战、如何解决问题、学到的技术知识以及对个人成长的影响。</li> </ul> <details> <summary>参考答案</summary> <p>在校期间，我积极参与了学校的[例如：创新创业协会或某个技术兴趣小组]。在这些活动中，我曾参与一个[例如：校园兼职平台]的小型项目开发。当时，我们团队面临的挑战是[例如：如何利用有限的资源快速搭建一个具备基本交互功能的前端原型]。我主动承担了前端页面的开发工作，通过自学 Vue.js 的组件化思想和路由管理，将页面拆分为可复用的组件，并实现了前端路由功能。虽然项目规模不大，但它让我第一次有机会将课堂上学习的 HTML、CSS、JavaScript 知识体系化地应用到实际开发中。通过这次经历，我不仅锻炼了独立解决问题的能力，还体会到了团队协作的重要性，比如在开发中与后端同学进行接口联调、与设计师沟通 UI 实现细节等，这对我后续的实习和前端学习都产生了积极的推动作用。</p> </details> <h2 id="question-subjective-3cf5356e8d84">3. 说说你实习项目中遇到的技术难点，以及你是如何解决的？</h2> <h3 id="题目要点-2">题目要点</h3> <ul> <li><strong>主观型问题，无唯一标准答案。</strong> 面试官主要考察答题者对项目实践的深入理解、问题解决能力、技术深度以及学习和复盘能力。他们希望了解你在面对挑战时，如何分析问题、寻找解决方案并最终达成目标。</li> <li>答题时建议围绕&quot;遇到什么难点&rdquo;、&ldquo;如何分析与定位问题&rdquo;、&ldquo;采用了哪些技术方案&rdquo;、&ldquo;解决了什么问题&quot;以及&quot;从中获得了哪些经验和教训&quot;等核心点展开，强调思考过程和技术细节。</li> </ul> <details> <summary>参考答案</summary> <p>在我的实习项目中，我曾遇到一个比较棘手的性能问题。我们负责的一个电商列表页面，随着商品数量的增多，首次加载时间变得非常慢，用户体验受到严重影响。通过浏览器开发者工具分析，我发现主要瓶颈在于大量图片资源的加载以及首屏渲染时数据量过大导致的卡顿。</p> <p>为了解决这个问题，我首先考虑了<strong>图片懒加载</strong>。我引入了一个 <code>Intersection Observer API</code> 的实现，使得图片只有在进入用户视口时才开始加载，这显著减少了初始的 HTTP 请求数量和带宽消耗。其次，针对数据量大的问题，我调研并实现了<strong>虚拟列表</strong>。核心思路是只渲染当前可见区域的列表项，并动态计算滚动时的偏移量和渲染范围。这避免了一次性渲染数千个 DOM 节点造成的性能压力。具体实现中，我维护了一个可滚动区域，根据滚动位置动态更新展示的数据索引，并结合 <code>requestAnimationFrame</code> 确保滚动动画的流畅性。</p> <p>经过这些优化措施，页面的首次加载时间从原来的 8 秒降低到了 2 秒以内，列表滚动时的卡顿现象也基本消除。这个过程让我对前端性能优化有了更深层次的理解，特别是如何结合浏览器 API 和数据结构优化来解决实际问题，也锻炼了我分析和解决复杂性能瓶颈的能力。</p> </details> <h2 id="question-subjective-d61a01743b6a">4. 解释一下 TS 泛型的概念和作用</h2> <h3 id="题目要点-3">题目要点</h3> <ul> <li><strong>泛型概念</strong>：面试官想确认面试者对泛型的基本定义、作用和设计目的的理解。</li> <li><strong>泛型作用</strong>：考察泛型在增强代码灵活性、类型安全和重用性方面的具体应用。</li> <li><strong>实际应用</strong>：理解泛型在实际开发中如何应用于函数、接口、类等场景，以及其在大型项目中的价值。</li> </ul> <details> <summary>参考答案</summary> <p>1.1 原理说明</p>