<?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>百度-百度云-校招 on Last Stand</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/</link><description>Recent content in 百度-百度云-校招 on Last Stand</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Thu, 24 Jul 2025 15:06:51 +0000</lastBuildDate><atom:link href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/index.xml" rel="self" type="application/rss+xml"/><item><title>百度-百度云-校招 · 第 1 轮 · 一面</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-65/</link><pubDate>Thu, 24 Jul 2025 15:06:51 +0000</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-65/</guid><description>&lt;blockquote&gt;
&lt;p&gt;← 已是第一轮 · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/"&gt;返回本次面经&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-66/"&gt;第 1 轮&lt;/a&gt; →&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;本轮要点：&lt;/strong&gt; 本轮面试注重基础知识的掌握与表达，涵盖了前端语言、框架原理、计算机基础、网络协议、数据库设计、加密安全等内容，兼顾技术深度与广度。&lt;/p&gt;
&lt;p&gt;本轮共 16 道题。答案默认折叠，便于先自行作答。&lt;/p&gt;
&lt;h2 id="question-subjective-d5f454c4c77e"&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;ul&gt;
&lt;li&gt;面向过程以过程为中心，强调顺序执行逻辑，适合小型程序；&lt;/li&gt;
&lt;li&gt;面向对象以对象和行为抽象为中心，强调封装、继承、多态，适合复杂系统的可维护性与复用性设计。&lt;/li&gt;
&lt;/ul&gt;
&lt;/details&gt;
&lt;h2 id="question-subjective-1e59a267c882"&gt;2. 面向对象的三大特性&lt;/h2&gt;
&lt;h3 id="题目要点-1"&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-252664a5-1524-46f0-b6ae-ae7e2874f6e2"&gt;3. 开发的过程中你用到过哪些设计模式？&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;题库原题：&lt;a href="https://fe.ecool.fun/topic/252664a5-1524-46f0-b6ae-ae7e2874f6e2"&gt;开发的过程中你用到过哪些设计模式？&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id="题目要点-2"&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;p&gt;以下是一些常用的设计模式：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;单例模式（Singleton）&lt;/strong&gt;：确保一个类只有一个实例，并提供全局访问点来获取该实例。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;工厂模式（Factory）&lt;/strong&gt;：通过工厂方法创建对象，而不是直接使用&lt;code&gt;new&lt;/code&gt;操作符。这样可以隐藏具体实现，并根据需要创建所需类型的对象。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;观察者模式（Observer）&lt;/strong&gt;：定义了一种一对多的依赖关系，当一个对象状态发生改变时，它的所有依赖者（观察者）都会收到通知并自动更新。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;装饰器模式（Decorator）&lt;/strong&gt;：动态地将责任附加到对象上。通过将对象包装在装饰器对象中，可以在运行时为对象添加新的行为。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;策略模式（Strategy）&lt;/strong&gt;：定义了一系列算法，将每个算法封装起来并使它们可以相互替换。策略模式可以让算法独立于客户端而变化。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;适配器模式（Adapter）&lt;/strong&gt;：将一个类的接口转换成客户端所期望的另一个接口。适配器模式使得原本由于接口不匹配而无法一起工作的类可以协同工作。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;每个设计模式都有其特定的应用场景和优缺点，可以根据具体情况来选择使用。设计模式可以提高代码结构的灵活性、可维护性和可扩展性，并促进重用和解耦。然而，需要根据实际需求慎重选择和应用设计模式，避免过度设计或不必要的复杂性。&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id="question-subjective-6e24fdf44b3a"&gt;4. JavaScript 中引用数据类型和基本数据类型&lt;/h2&gt;
&lt;h3 id="题目要点-3"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id="question-da1881cc-64b9-40f8-8a25-a6256c1349ed"&gt;5. 谈谈对Vue中双向绑定的理解&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;题库原题：&lt;a href="https://fe.ecool.fun/topic/da1881cc-64b9-40f8-8a25-a6256c1349ed"&gt;谈谈对Vue中双向绑定的理解&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id="题目要点-4"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;Vue中的双向绑定是其核心特性之一，它极大地简化了数据在视图（View）和模型（Model）之间的同步过程。双向绑定意味着当数据发生变化时，视图会自动更新以反映这些变化，反之亦然，用户在视图上的操作（如输入）也会自动更新到数据中。&lt;/p&gt;
&lt;h4 id="实现原理"&gt;实现原理&lt;/h4&gt;
&lt;p&gt;Vue的双向绑定主要依赖于其响应式系统（Reactivity System）和模板引擎（Template Engine）。&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;响应式系统&lt;/strong&gt;：Vue使用Object.defineProperty（在Vue 3中使用了Proxy）来劫持（或说“代理”）对象的getter和setter。当组件的data中的属性被访问或修改时，Vue会拦截这些操作，并执行相应的依赖更新逻辑。这样，Vue就能追踪到数据的变化，并在需要时更新视图。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;模板引擎&lt;/strong&gt;：Vue的模板引擎使用基于HTML的模板语法，允许开发者声明式地将DOM绑定到底层Vue实例的数据上。当数据变化时，Vue的模板引擎会重新渲染模板，生成新的虚拟DOM树，并通过高效的DOM diff算法更新真实的DOM，以反映数据的最新状态。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;h2 id="一什么是双向绑定"&gt;一、什么是双向绑定&lt;/h2&gt;
&lt;p&gt;我们先从单向绑定切入单向绑定非常简单，就是把&lt;code&gt;Model&lt;/code&gt;绑定到&lt;code&gt;View&lt;/code&gt;，当我们用&lt;code&gt;JavaScript&lt;/code&gt;代码更新&lt;code&gt;Model&lt;/code&gt;时，&lt;code&gt;View&lt;/code&gt;就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了&lt;code&gt;View&lt;/code&gt;，&lt;code&gt;Model&lt;/code&gt;的数据也自动被更新了，这种情况就是双向绑定举个栗子&lt;/p&gt;</description></item><item><title>百度-百度云-校招 · 第 1 轮 · 三面</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-67/</link><pubDate>Thu, 24 Jul 2025 15:06:51 +0000</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-67/</guid><description>&lt;blockquote&gt;
&lt;p&gt;← &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-66/"&gt;第 1 轮&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/"&gt;返回本次面经&lt;/a&gt; · 已是最后一轮 →&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;本轮要点：&lt;/strong&gt; 三面偏重项目经历、思维深度与工程解决方案，兼顾产品理解与算法能力。&lt;/p&gt;
&lt;p&gt;本轮共 6 道题。答案默认折叠，便于先自行作答。&lt;/p&gt;
&lt;h2 id="question-subjective-65ee4eaa38e8"&gt;1. 讲一下之前的实习经历，主要负责什么工作，你们团队是做什么的？&lt;/h2&gt;
&lt;h3 id="题目要点"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;在回答实习经历时，可以遵循：
&lt;strong&gt;“团队是做什么的 → 自己负责了什么 → 过程中遇到的挑战 → 最终的结果和成长”&lt;/strong&gt;。
这样既能让面试官清楚地看到候选人的贡献，也能体现出对团队目标的理解和自身成长路径的清晰度。&lt;/p&gt;
&lt;p&gt;要不要我帮你准备几个&lt;strong&gt;可直接套用的实习经历表述范例&lt;/strong&gt;，比如业务团队和前端基础设施团队两个版本？&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;这个问题本质上考察的是&lt;strong&gt;候选人能否清晰表达实习经历的价值&lt;/strong&gt;，以及是否能将个人的工作与团队目标联系起来。回答时既要避免流水账式的叙述，也要避免过度拔高，而是重点体现&lt;strong&gt;做过什么、为什么做、产生了什么影响&lt;/strong&gt;。&lt;/p&gt;
&lt;h3 id="回答思路"&gt;回答思路&lt;/h3&gt;
&lt;h4 id="1-团队定位与职责"&gt;1. 团队定位与职责&lt;/h4&gt;
&lt;p&gt;先交代团队是做什么的，比如：&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;/ul&gt;
&lt;p&gt;这样能让面试官快速理解环境。&lt;/p&gt;
&lt;h4 id="2-个人负责的工作"&gt;2. 个人负责的工作&lt;/h4&gt;
&lt;p&gt;描述时可以抓住几个关键词：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;核心任务&lt;/strong&gt;：负责开发某个功能模块、参与前端组件封装、接入监控埋点、优化性能等；&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;协作方式&lt;/strong&gt;：是否需要和后端、测试、设计配合，是否参与需求评审或接口联调；&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;挑战与亮点&lt;/strong&gt;：是否遇到过性能瓶颈、复杂交互、数据量大等问题，是否提出了改进方案。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;避免简单说“写页面、改 bug”，而是强调“通过实现某个功能/优化某处性能，解决了某类问题”。&lt;/p&gt;
&lt;h4 id="3-收获与成长"&gt;3. 收获与成长&lt;/h4&gt;
&lt;p&gt;最后点出在实习期间的成长：&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;/ul&gt;
&lt;/details&gt;
&lt;h2 id="question-subjective-a51e70b485ed"&gt;2. 在工作中遇到过什么问题，是怎么解决的？&lt;/h2&gt;
&lt;h3 id="题目要点-1"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;这个问题的最佳回答路径是：
&lt;strong&gt;“提出一个具体问题 → 说明如何分析定位 → 阐述解决过程和思考 → 总结结果和反思”&lt;/strong&gt;。
重点不是问题有多难，而是展现出遇事冷静分析、推动落地并能沉淀经验的能力。&lt;/p&gt;
&lt;p&gt;要不要我帮你列几个&lt;strong&gt;可以直接在面试里使用的典型案例场景&lt;/strong&gt;，比如“性能优化”、“构建优化”、“协作问题”三类？&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;这个问题考察的是候选人的&lt;strong&gt;问题意识、分析能力、解决路径和复盘能力&lt;/strong&gt;。面试官关注的不是问题本身多么“高大上”，而是能否体现出&lt;strong&gt;逻辑清晰、方案合理、结果正向&lt;/strong&gt;。&lt;/p&gt;</description></item><item><title>百度-百度云-校招 · 第 1 轮 · 二面</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-66/</link><pubDate>Thu, 24 Jul 2025 15:06:51 +0000</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-66/</guid><description>&lt;blockquote&gt;
&lt;p&gt;← &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-65/"&gt;第 1 轮&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/"&gt;返回本次面经&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-67/"&gt;第 1 轮&lt;/a&gt; →&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;本轮要点：&lt;/strong&gt; 二面重点考察前端框架理解与性能优化能力，同时关注工程化处理思维和大规模数据处理能力。&lt;/p&gt;
&lt;p&gt;本轮共 10 道题。答案默认折叠，便于先自行作答。&lt;/p&gt;
&lt;h2 id="question-subjective-e266174d498c"&gt;1. 元素隐藏的三种方法（display:none、visibility:hidden、opacity:0）及其区别&lt;/h2&gt;
&lt;h3 id="题目要点"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;display: none&lt;/code&gt;：元素不在文档流中，不占位，无法响应事件。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;ol&gt;
&lt;li&gt;&lt;code&gt;display: none&lt;/code&gt;：元素不在文档流中，不占位，无法响应事件。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;visibility: hidden&lt;/code&gt;：占位但不可见，无法响应事件。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;opacity: 0&lt;/code&gt;：占位且可响应事件（需用 &lt;code&gt;pointer-events: none&lt;/code&gt; 避免）。&lt;/li&gt;
&lt;/ol&gt;
&lt;/details&gt;
&lt;h2 id="question-subjective-8f3da0a071c6"&gt;2. display:none是否影响DOM渲染性能？如何用CSS实现淡出动画？&lt;/h2&gt;
&lt;h3 id="题目要点-1"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;display:none&lt;/code&gt; 会从渲染树中移除，提升性能，但不能用于动画过渡。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;display:none&lt;/code&gt; 会从渲染树中移除，提升性能，但不能用于动画过渡。&lt;/li&gt;
&lt;li&gt;使用 &lt;code&gt;opacity + transition&lt;/code&gt; 实现淡出，再用 JS 延迟设置 &lt;code&gt;display:none&lt;/code&gt;。&lt;/li&gt;
&lt;/ul&gt;
&lt;/details&gt;
&lt;h2 id="question-subjective-ac93c5c2773f"&gt;3. &lt;code&gt;Array.from({ length: 5 }, (v, i) =&amp;gt; i * 2)&lt;/code&gt; 的输出是什么？&lt;/h2&gt;
&lt;h3 id="题目要点-2"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;输出 &lt;code&gt;[0, 2, 4, 6, 8]&lt;/code&gt;。构造一个长度为 5 的数组，并通过索引乘以 2 填充。&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;输出 &lt;code&gt;[0, 2, 4, 6, 8]&lt;/code&gt;。构造一个长度为 5 的数组，并通过索引乘以 2 填充。&lt;/p&gt;</description></item></channel></rss>