百度

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本轮面试侧重于考察候选人的JavaScript基础知识、CSS布局能力、对浏览器工作原理的理解以及实际编码能力。重点在于事件循环、异步编程、闭包、原型链等核心概念，同时也涵盖了跨域、缓存等常见Web问题。 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 实现一个三栏布局，左右侧固定200px，中间自适应，写出至少两种方案。追问：Grid布局中fr单位的作用？如何解决Flex布局的浏览器兼容问题？ 题目要点 CSS布局能力：面试官想确认你是否熟练掌握现代CSS布局技术，如Flexbox和Grid，以及是否了解传统的布局方法。 布局方案的优劣对比：能否分析不同方案的适用场景和优缺点，体现出技术选型的思考能力。 CSS单位的理解：对fr这类现代布局单位的深入理解，表明你不是只会“复制粘贴”代码。 兼容性处理经验：在实际项目中如何处理浏览器兼容性问题，这是衡量工程师经验的重要指标。 参考答案 1.1 原理说明 三栏布局是前端开发中的经典布局问题，旨在实现一个两侧宽度固定、中间区域宽度自适应的页面结构。核心是处理中间区域如何填满剩余空间。 Flexbox（弹性盒子布局）：是一种一维布局模型，它让容器内的项目（item）能够灵活地分配空间。通过设置父容器display: flex，并为子项设置flex-grow（放大比例）、flex-shrink（缩小比例）和flex-basis（基准大小），可以轻松实现空间的自适应分配。对于三栏布局，可以将中间栏的flex-grow设为1，使其占据所有剩余空间。 Grid（网格布局）：是一种二维布局模型，可以将页面划分为行和列，并在这些行列构成的单元格中放置内容。通过grid-template-columns属性，可以精确定义每一列的宽度，使用fr单位可以非常方便地实现自适应。 fr 单位：fr是 “fractional unit”（分数单位）的缩写，用于Grid布局中。它代表了可用空间的一等份。例如，grid-template-columns: 200px 1fr 200px;意味着第一个和第三个元素宽度为200px，中间的元素占据所有剩余的可用空间。如果是1fr 2fr，则表示两者按1:2的比例分配可用空间。 1.2 核心用法 + 示例代码 方案一：Flexbox 布局这是目前最常用和推荐的方案，代码简洁且语义化。 使用场景：适用于绝大部分现代浏览器项目，尤其是一维方向（行或列）的布局。 注意点：需要注意旧版本浏览器的兼容性问题。 <div class="container-flex"> <div class="left">左侧固定</div> <div class="main">中间自适应</div> <div class="right">右侧固定</div> </div> <style> .container-flex { display: flex; height: 100vh; } .left, .right { width: 200px; background-color: #f0f0f0; } .main { flex: 1; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */ background-color: #e0e0e0; } </style> 方案二：Grid 布局Grid布局在处理二维对齐时更具优势，实现三栏布局同样非常简单。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 二面深入考察了前端核心知识的应用和原理理解。重点包括CSS优先级、闭包与内存管理、JavaScript继承的多种实现方式、原型链的深层理解、虚拟DOM的性能优化原理以及Vue框架的高级特性。题目更侧重于“为什么”和“如何实现”，要求候选人不仅知其然，更要知其所以然。 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. 自我介绍，没有实习过。 题目要点 沟通表达能力：能否清晰、自信地介绍自己。 潜力与热情：在没有实习经历的情况下，如何通过个人项目、技术博客、开源贡献等来证明自己的技术热情和学习能力。 求职动机：为什么选择这个岗位和公司。 参考答案 此题为个人经验总结，请根据自身情况作答。核心是突出自己的优势、学习能力和对前端的热情，用项目经验或学习成果来弥补实习经历的不足。 2. 最终颜色是什么？为什么？ <div class="box" id="content" style="color:red"></div> .box { color: blue } #content { color: green } 题目要点 CSS优先级（Specificity）：这是CSS核心概念之一，考察对不同选择器权重的理解和计算能力。 CSS规则来源：是否了解行内样式、内部样式表、外部样式表的优先级关系。 参考答案 1.1 原理说明 CSS的优先级（Specificity），也常被称为特殊性或权重，是浏览器用来决定当多个规则应用到同一个元素上时，哪一条规则生效的计算方法。 优先级的计算规则可以总结为一个四元组 (a, b, c, d)： a: 行内样式（Inline styles）：如 style="color: red;"。如果存在，a为1，否则为0。 b: ID选择器：如 #content。b为ID选择器的数量。 c: 类选择器、属性选择器、伪类选择器：如 .box, [type="text"], :hover。c为这些选择器的总数量。 d: 标签选择器、伪元素选择器：如 div, ::before。d为这些选择器的总数量。 比较规则：从a开始，逐位比较。a大的胜出；如果a相同，则比较b，b大的胜出；以此类推。只有在优先级完全相同时，才会根据样式在代码中出现的顺序来决定，“后来者居上”。 另外，!important声明拥有最高优先级，它会覆盖任何其他声明，但应避免滥用。 1.2 核心用法 + 示例代码 我们来分析题目中的三个样式规则： 行内样式：style="color:red" 优先级计算：a=1, b=0, c=0, d=0 -> (1, 0, 0, 0) ID选择器：#content { color: green } 优先级计算：a=0, b=1, c=0, d=0 -> (0, 1, 0, 0) 类选择器：.box { color: blue } 优先级计算：a=0, b=0, c=1, d=0 -> (0, 0, 1, 0) 比较结果： ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 7 道题。答案默认折叠，便于先自行作答。 1. 讲一个你觉得最有成就感的项目？ 题目要点 这个问题的回答重点不在于项目多复杂，而在于是否能通过一个真实的项目，清晰地表达出在关键阶段的判断力、推动力和技术价值。能讲出一个对业务和团队产生正向影响的案例，并体现出“为什么重要”、“怎么做的”、“结果如何”以及“有哪些沉淀”，才是打动面试官的关键。 参考答案 这个问题考察的是候选人在复杂项目中的角色、思维方式以及实际落地能力。回答时不必拘泥于“成功上线”或“技术高大上”的标准，更重要的是能体现出技术价值、业务洞察和综合影响力。 可以从以下几个方向展开： 1. 项目背景与挑战 项目是否处于关键节点（如业务转型、架构重构、性能瓶颈期），是否需要协调多个团队或跨端协作。重点在于说明“项目为什么重要”以及“初始面临的困难”，而不仅仅是“做了一个新功能”。 2. 所承担的角色与关键决策 可以适当展示一些深度思考，比如为什么选用了某项技术、重构的策略、组件化拆分方式、数据模型设计等。还可以强调在混乱或模糊中推动落地、制定标准、推动流程优化等能力。 3. 结果与影响 不仅仅是“功能上线”，更重要的是对业务、团队或系统带来了什么实质性的改进，比如性能提升、迭代效率变高、可维护性提升、用户体验改善、业务增长支持等。 4. 成长与反思 有价值的项目往往伴随着“认知升级”，比如原来低估了技术债的影响，或者通过实际落地理解了“领域驱动设计”的意义。这个部分体现出个人复盘能力。 2. 平时用哪个地图软件，你觉得百度地图和高德地图有什么区别？ 题目要点 这个问题背后考察的是候选人是否能够从日常使用中提炼出产品与技术的理解。如果能结合体验差异、技术架构、场景适配和生态思考给出分析，而不是停留在“哪个好用”这类主观评价层面，将更容易体现出产品敏感度和技术视野。 参考答案 这个问题虽然看似轻松，其实背后是面试官在考察候选人是否具备产品意识、用户视角以及对技术背后的生态和体验差异的敏感度。 回答可以从以下几个方向展开： 1. 使用习惯和使用场景 地图类产品往往不止于“导航”，不同场景下用户会对产品有不同诉求，例如： 日常通勤更关注路线精准、避堵能力； 出行规划更看重 POI（兴趣点）搜索能力； 步行、骑行、公交路线推荐的体验也会有所差异。 可以结合真实使用感受，说明更倾向哪一个地图工具，并说明选择背后的产品逻辑。 2. 产品体验差异 从前端视角，可以提到一些常见的 UI/UX 差异，例如： 高德地图整体交互更轻量，响应更快，视觉上偏简洁； 百度地图在信息展示上更丰富，比如搜索结果信息量较大，适合城市探索或综合决策； 两者在加载速度、动效、地图渲染逻辑、图层处理等方面也有细节差异。 3. 数据能力与技术架构差异 可适当提及： 百度地图在自然语言搜索、智能推荐、AI 语义处理方面表现更突出； 高德地图更注重实时交通、路线规划和精准避堵，背后依赖阿里生态中调度算法与实时数据的融合； 技术开发角度，百度地图在 web 开发中更注重全家桶式工具链，而高德的 SDK 则更强调灵活性和接入效率。 4. 生态与平台联动 从更高层次看，还可以提及两者在生态整合上的不同： 高德地图与支付宝、饿了么、飞猪等联动，强调生活服务整合； 百度地图则依托百度搜索、百度 AI、大模型、自动驾驶等形成了更 AI 驱动的生态闭环。 3. 在多人协作开发中，若遇到接口定义不一致或代码冲突，你会如何推动问题解决？ 题目要点 这个问题的核心在于是否具备跨人、跨团队推动协作问题闭环的能力。能够主动定位问题源头、推动规范和工具落地、在冲突中引导沟通达成共识，是一个成熟前端在协作场景中的重要价值体现。回答不应仅限于“怎么解决”，更要体现出“如何避免”和“如何沉淀机制”。 ...

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本轮面试考察了前端基础能力、网络协议、Vue响应式原理、构建工具底层实现，以及手写能力与业务建模能力，重点在于深入理解底层原理和综合解决问题的能力。 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 讲一下你的前端模块化的理解 题目要点 模块化发展历程、ES Module 和 CommonJS 区别、模块加载机制、Tree-shaking原理。 参考答案 原理说明 模块化的目的：为了提高代码的可维护性、复用性和依赖管理能力，将代码组织为独立模块。 发展历程： 无模块化（全局变量） IIFE 模式（立即执行函数） CommonJS（Node.js 标准，同步加载） AMD / CMD（异步模块定义） ES Module（ES6 标准模块系统，浏览器原生支持） CommonJS vs ES Module： CommonJS 是同步加载，适用于服务端；ES Module 是静态分析+异步加载，适用于浏览器。 ES Module 支持 Tree-shaking，CommonJS 不支持。 核心用法 + 示例代码 // ES Module export const add = (a, b) => a + b; import { add } from './utils.js'; 常见误区 将 ES Module 和 CommonJS 混用，导致打包失败。 忽视 ES Module 是静态结构，不能在运行时动态导入变量名模块（需使用 import()）。 2. HTTP/2 解决 HTTP/1.1什么问题？ 题目要点 HTTP/2 优化点、HTTP/1.1 的瓶颈、性能原理 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 基础知识面不少，进一步考察实际工程和性能优化能力 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. BFC的作用及触发条件，使用场景讲一下 题目要点 CSS 样式中 BFC 的概念、特性和触发条件 BFC 应用场景：避免多列排版间隔折行问题、清除浮动、各区域形成隔离 参考答案 1.1 原理说明 BFC (Block Formatting Context)，即块级格式化上下文。它是 W3C CSS2.1 中的一类属性，是一个独立的布局环境，在该环境里，按照特定规则进行元素排列和布局。 主要特性： BFC 内部的元素不会和外部的元素受 margin 折行的影响 BFC 可以包裹内部浮动元素，解决父容器高度不拉伸问题 BFC 不会被浮动元素拉动 触发 BFC 的条件： 样式中定义此元素为 float (non-none) 正文模型 overflow 为 hidden, scroll, auto display 为 inline-block, table-cell, flex, grid, flow-root position 为 absolute 或 fixed 1.2 核心用法 + 示例代码 场景1：清除浮动 常用 BFC 包裹元素，使父元素的高度得以支撑 ...