百度 on Last Stand

百度-百家号-实习 · 第 1 轮 · 技术面试

Sat, 31 Jan 2026 09:19:52 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 该轮主要考察前端基础知识、JavaScript高级特性、HTTP协议、Vue与React框架对比、Git操作以及算法实现能力。问题涵盖理论理解与实际应用，氛围较为专业。

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 如何判断一个变量是数组？

题库原题：判断数组的方式有哪些？

题目要点

推荐方法：使用 Array.isArray()，这是最简单、最可靠的方式来检查一个值是否为数组。
其他方法：instanceof 和 Object.prototype.toString.call() 也很有效，但有一些特定的局限性。constructor 和 isPrototypeOf() 方法不如 Array.isArray() 可靠，且在某些情况下可能会出现问题。

参考答案

判断一个值是否为数组的方式有多种：

1. `Array.isArray()` 方法

描述：这是 ES5 引入的标准方法，推荐用于检查一个值是否为数组。
语法：Array.isArray(value)

示例：

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('hello')); // false

2. `instanceof` 操作符

描述：使用 instanceof 操作符来判断对象是否是 Array 的实例。
语法：value instanceof Array

示例：

console.log([1, 2, 3] instanceof Array); // true
console.log('hello' instanceof Array); // false

3. `Object.prototype.toString.call()` 方法

描述：使用 Object.prototype.toString.call() 可以准确判断一个对象的类型，包括数组。它返回 [object Array] 对于数组，其他类型则返回不同的结果。
语法：Object.prototype.toString.call(value)

示例：

console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array]
console.log(Object.prototype.toString.call('hello')); // [object String]

4. `constructor` 属性

描述：检查 constructor 属性是否为 Array。这种方法不如 Array.isArray() 可靠，因为 constructor 可以被改变。
语法：value.constructor === Array

示例：

console.log([1, 2, 3].constructor === Array); // true
console.log('hello'.constructor === Array); // false

5. `Array.prototype.isPrototypeOf()` 方法

描述：检查数组的 prototype 是否在目标对象的 prototype 链上。这种方法也可以用来判断一个对象是否为数组。
语法：Array.prototype.isPrototypeOf(value)

示例：

console.log(Array.prototype.isPrototypeOf([1, 2, 3])); // true
console.log(Array.prototype.isPrototypeOf('hello')); // false

6. 使用 `constructor` 属性和原型链

描述：结合 constructor 属性和原型链检查。这个方法有一定的局限性，不推荐使用。

示例：

function isArray(value) {
 return value && typeof value === 'object' && value.constructor === Array;
}

console.log(isArray([1, 2, 3])); // true
console.log(isArray('hello')); // false

2. 讲一下闭包及其优缺点。

题目要点

函数嵌套, 词法作用域, 内存管理

百度-搜索-春招 · 第 1 轮 · 技术面试

Sat, 31 Jan 2026 09:19:33 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 该轮主要考察前端开发相关知识，包括动画实现、性能优化、React优化、Web Accessibility、计时器处理、WebSocket、缓存策略、国际化、兼容性问题等。题目以主观题为主，注重对核心原理和实际应用场景的理解。

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. 实现一个动画，当用户鼠标悬停在按钮上时，按钮逐渐变大

题目要点

CSS transition, 动画性能优化, 硬件加速, 事件监听

参考答案

在实现此类动画时，可以使用CSS的transition属性或JavaScript的requestAnimationFrame方法。重点在于控制动画的流畅性和性能。可以通过设置合适的过渡时间（transition-duration）和使用硬件加速（如transform: scale()）来提升性能。此外，注意避免不必要的重排和重绘，确保动画的平滑性。

2. 如何避免动画过程中的卡顿？

题库原题：在解决动画卡顿问题时，会引导硬件加速，那么硬件加速的原理是什么？

题目要点

硬件加速是指利用 GPU（图形处理单元）来执行图形和动画相关的计算任务，以减轻 CPU（中央处理单元）的负担。GPU 专为处理图形和图像的高吞吐量操作而设计，因此在执行动画和复杂图形渲染时，硬件加速可以提供更流畅的体验。

原理解析

GPU vs CPU：
- GPU 拥有更多的核心，适合并行处理大量计算任务，而 CPU 核心较少，更适合串行处理复杂逻辑。
图形渲染：
- GPU 优化了图形渲染流程，包括顶点处理、像素着色等，这些是动画和图形显示的基础。
减少重绘和回流：
- 通过硬件加速，可以减少浏览器的重绘（repaint）和回流（reflow）次数，这些操作通常由 DOM 变更触发，非常消耗性能。
合成层（Compositing Layer）：
- 浏览器使用合成层来合并多个层的图形，GPU 可以快速地在这些层上进行变换和动画。
CSS 属性触发：
- 某些 CSS 属性，如 transform 的 3D 变换（translate3d、scale3d 等）和 opacity 动画，可以触发硬件加速。
浏览器优化：
- 浏览器会根据性能和资源情况，自动决定是否使用硬件加速。

考察重点

理解：硬件加速的基本概念和 GPU 在图形渲染中的作用。
应用：知道哪些 CSS 属性可以触发硬件加速，以及如何利用它们来优化动画性能。

参考答案

面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。

百度-商业化-秋招 · 第 1 轮 · 一面

Fri, 17 Oct 2025 08:26:28 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 这场面试主要围绕前端项目的实际工程能力展开，重点考察了候选人对动态路由、权限控制和状态管理的理解与实践。同时涉及网络请求优化、缓存机制及组件复用等中高级工程问题，体现出对项目可维护性和性能的关注。面试还关注了候选人对 TypeScript 应用、学习方法和职业规划的思考，考察其成长潜力与技术视野。

本轮要点： 跨域相关

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 如何在前端项目中实现动态路由？

题库原题：如何在前端项目中实现动态路由？

题目要点

动态路由的核心是将路由配置从静态定义转为运行时生成或挂载。常见做法包括“前端维护完整路由表后过滤”以及“后端下发路由配置”。

具体实现依赖框架提供的 API（如 addRoute、useRoutes），同时需要兼顾权限控制、懒加载与导航组件的解耦，才能在保证安全性的同时保持可扩展性和良好的用户体验。

参考答案

在前端项目中实现动态路由，本质上是根据用户权限、接口返回的数据或者运行时条件，动态地生成或加载路由配置，从而决定页面的可访问性和导航结构。

以 React Router 和 Vue Router 为例，核心思路有一些共通点：在应用启动时，会有一个静态的基础路由表，用来保证最基本的页面可以正常访问（例如登录页、404 页、Layout 容器等）。而真正需要按用户角色、接口数据控制的路由，则通过接口请求或预置配置动态挂载进路由系统。

常见的实现方式有两类：

一种是前端自行维护完整的路由表，用户登录后，后端返回权限信息（角色、菜单、可访问模块 ID 等），前端在已有的路由表中做过滤，只保留当前用户有权限的部分，再动态挂载到路由系统。这种方式对前端掌控力更强，体验流畅，但需要在前端同步维护一份路由和权限的映射关系。

另一种是由后端直接下发路由配置（通常带有 path、component 标识、子路由结构等），前端拿到配置后再通过组件映射表动态生成路由。这种方式能减轻前端维护压力，但会带来接口设计和前后端耦合的问题。

在技术层面，React Router v6 提供了 useRoutes 可以直接基于对象动态生成路由，Vue Router 也支持 router.addRoute 在运行时动态添加路由。对于懒加载组件，还需要结合 import() 或 defineAsyncComponent（Vue）来实现，避免一次性加载所有页面。

此外，动态路由不仅仅是技术实现，还涉及安全性和用户体验。例如：

在前端动态路由实现时，不能只依赖前端的路由控制，还需要后端接口做权限校验，避免用户绕过前端访问受限页面。
路由结构最好和菜单、面包屑等导航组件解耦，通过统一的数据结构管理，保证后续扩展的灵活性。
在大规模项目中，动态路由还常与微前端、模块化加载结合，按需挂载子应用或子模块。

2. Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？

题库原题：Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？

题目要点

Vue3 的 addRoute 属于“增量挂载”，可以在运行时动态向现有路由表中追加新配置；React Router 的 useRoutes 则是基于配置对象动态生成，强调整体渲染而不是单点挂载。动态路由刷新后失效的根本原因是路由配置只存在于内存中，需要在应用初始化时通过本地存储或接口请求恢复路由数据，才能保证页面刷新后仍能正确访问。

百度-小程序-暑期实习 · 第 1 轮 · 一面

Thu, 21 Aug 2025 15:43:17 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 深拷贝浅拷贝有什么区别？怎么实现深拷贝？

题库原题：深拷贝浅拷贝有什么区别？怎么实现深拷贝？

题目要点

JS数据类型分别基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。

浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。

浅拷贝方法

直接对象复制
Object.assign

深拷贝

JSON.stringify转为字符串再JSON.parse
深度递归遍历

参考答案

一、数据类型存储

前面文章我们讲到，JavaScript中存在两大数据类型：

基本类型
引用类型

基本类型数据保存在在栈内存中

引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中

二、浅拷贝

浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝

如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址

即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址

下面简单实现一个浅拷贝

function shallowClone(obj) {
 const newObj = {};
 for(let prop in obj) {
 if(obj.hasOwnProperty(prop)){
 newObj[prop] = obj[prop];
 }
 }
 return newObj;
}

在JavaScript中，存在浅拷贝的现象有：

Object.assign
Array.prototype.slice(), Array.prototype.concat()
使用拓展运算符实现的复制

Object.assign

var obj = {
 age: 18,
 nature: ['smart', 'good'],
 names: {
 name1: 'fx',
 name2: 'xka'
 },
 love: function () {
 console.log('fx is a great girl')
 }
}
var newObj = Object.assign({}, obj);

slice()

const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.slice(0)
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

concat()

const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.concat()
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

拓展运算符

const fxArr = ["One", "Two", "Three"]
const fxArrs = [...fxArr]
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

三、深拷贝

深拷贝开辟一个新的栈，两个对象的属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

百度-用户增长-秋招 · 第 1 轮 · 一面

Thu, 21 Aug 2025 15:39:11 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 有没有使用 Node.js 进行开发的经历？

题目要点

“不仅仅用过 Node.js，而且能说清楚在前端团队里它解决了哪些实际问题，产生了什么价值。” 这样比单纯回答“用过/没用过”更有亮点。

参考答案

考察的核心是：对 Node.js 的理解深度和在前端/全栈中的实际应用场景。

回答时可以从以下几个角度展开：

1. 使用场景

前端工程化工具链：使用 Node.js 驱动构建工具（Webpack、Vite、Rollup 等），编写脚本实现自动化构建、代码检查、Mock Server 搭建。
服务端接口开发：基于 Express、Koa、NestJS 搭建轻量级 API 服务，用于前后端分离项目的接口模拟或小型后台系统。
中间层 / BFF（Backend for Frontend）：在复杂业务中，用 Node.js 实现前后端解耦，比如统一处理接口聚合、鉴权、缓存。
SSR / SSG 场景：使用 Next.js 或 Nuxt.js，借助 Node.js 渲染首屏，提升 SEO 和加载体验。
运维与脚本：编写部署脚本、自动生成文件、批量处理数据。

2. 具体任务

可以结合自身经历强调：

是否搭建过 Mock 服务，辅助前后端并行开发；
是否写过中间层解决跨域、接口聚合问题；
是否在工程化中写过 Node.js 工具脚本（如自动生成路由表、埋点收集脚本）；
是否参与过服务端渲染或静态站点生成相关开发。

3. 收获和亮点

对 事件驱动、非阻塞 I/O 有更深理解，能写出高并发场景下的稳定服务；
学会了在前端视角下如何更好地和后端衔接；
在实际项目中通过 Node.js 提升了团队的开发效率（例如通过脚本工具减少重复劳动）。

2. CSS 3D 变形有哪些常见的属性和方法？

题目要点

CSS 3D 变形（3D Transform）是 CSS3 提供的一组属性，用来在三维空间中对元素进行旋转、缩放、平移、倾斜等操作。

百度-APP产品研发-秋招 · 第 1 轮 · 二面

Wed, 20 Aug 2025 14:54:45 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

面试时间： 60分钟

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 讲一下你在官网开发中的主要职责，开发的模块以及你觉的比较亮点的地方

题目要点

如果是面试官问到“官网开发中的主要职责、开发的模块以及比较亮点的地方”，一般可以从以下几个角度来回答，既展示你的全局把控能力，又体现你在某些点上有深度。

参考答案

下面是一个参考思路：

1. 主要职责

官网整体架构搭建：根据业务和设计稿，使用 React/Vue + Vite/Next.js/Nuxt.js 等技术栈完成整体框架搭建，包括路由、状态管理、多语言支持等。
公共模块封装：抽象公共组件（如导航栏、页脚、轮播、富文本渲染、内容卡片等），提高复用率，减少重复开发。
性能优化：处理首屏加载速度、资源拆分、图片懒加载、SSR/SSG、SEO 优化。
协作沟通：与产品、UI、后端保持沟通，保证页面上线节奏和质量。

2. 负责的模块（可根据实际情况举例）

首页：承担品牌形象展示，涉及 banner 动效、动态数据展示、视频播放等。
产品/解决方案页：结合后端接口，展示不同产品模块，支持筛选、搜索、动态路由。
活动/新闻动态页：接入 CMS（如 Strapi、Sanity、WordPress 等），支持运营人员通过后台直接发布。
多语言切换模块：基于 i18n 实现官网多语言，支持自动识别浏览器语言，静态资源跟随切换。
SEO 优化模块：处理 meta 信息、OG 标签、站点地图、robots.txt，提升搜索引擎收录效果。

3. 亮点/难点突破

性能优化亮点
- 利用 SSR/SSG（Next.js/Nuxt.js）提升首屏渲染速度，Lighthouse 分数提升到 90+。
- 使用图片 CDN + WebP 格式，首页加载时间缩短 30%。
- 按需加载组件、拆分 bundle，减少首次请求体积。
可配置化思路
- 引入 CMS 系统，实现官网内容可配置，避免频繁改代码上线，运营可直接维护。
- 封装通用“模块化组件”，如 Banner、富文本、图文组合，做到拖拽/配置式渲染。
前端体验优化
- 首页/产品页引入动效（基于 Lottie 或 GSAP），提升视觉冲击力。
- 交互细节（滚动吸附、视差动画、过渡效果）增强用户沉浸感。
工程化实践

百度-APP产品研发-秋招 · 第 1 轮 · 一面

Tue, 19 Aug 2025 14:47:24 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 前端实现动画有哪些方式？

题库原题：前端实现动画有哪些方式？

题目要点

前端开发中，实现动画的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些常见的实现方式：

CSS 动画：
- 使用 @keyframes 和 animation 属性定义动画。
- 优点：易于实现，性能好，易于维护。
- 缺点：功能相对简单，难以实现复杂的交互动画。
CSS 过渡（Transitions）：
- 使用 transition 属性在状态变化时实现平滑过渡。
- 优点：简单易用，性能优秀。
- 缺点：只能用于状态变化的过渡，不适合复杂动画。
JavaScript 动画：
- 使用 JavaScript 直接操作 DOM 元素的样式属性实现动画。
- 优点：灵活性高，可以控制动画的每一个细节。
- 缺点：可能影响性能，需要更多的代码实现。
Web Animations API：
- 使用 Element.animate() 方法实现动画。
- 优点：提供更丰富的动画控制和更一致的跨浏览器支持。
- 缺点：兼容性不如 CSS 动画。
SVG 动画：
- 使用 SVG 元素和 SMIL（Synchronized Multimedia Integration Language）或 CSS 动画实现动画。
- 优点：适合矢量图形动画，易于集成。
- 缺点：浏览器支持和性能可能不如 CSS 动画。
Canvas：
- 使用 HTML <canvas> 元素和 JavaScript 绘制动画。
- 优点：适合复杂的图形和游戏动画。
- 缺点：实现复杂，需要手动管理每一帧的绘制。
CSS 3D 变换：

百度-百度云-校招 · 第 1 轮 · 一面

Thu, 24 Jul 2025 15:06:51 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本轮面试注重基础知识的掌握与表达，涵盖了前端语言、框架原理、计算机基础、网络协议、数据库设计、加密安全等内容，兼顾技术深度与广度。

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 面向对象和面向程序设计的主要区别

题目要点

面向过程以过程为中心，强调顺序执行逻辑，适合小型程序；

参考答案

面向过程以过程为中心，强调顺序执行逻辑，适合小型程序；
面向对象以对象和行为抽象为中心，强调封装、继承、多态，适合复杂系统的可维护性与复用性设计。

2. 面向对象的三大特性

题目要点

封装隐藏内部实现、继承提高复用性、多态通过统一接口实现行为差异，三者是构建大型系统的基础。

参考答案

封装隐藏内部实现、继承提高复用性、多态通过统一接口实现行为差异，三者是构建大型系统的基础。

3. 开发的过程中你用到过哪些设计模式？

题库原题：开发的过程中你用到过哪些设计模式？

题目要点

设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。

参考答案

设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。

以下是一些常用的设计模式：

单例模式（Singleton）：确保一个类只有一个实例，并提供全局访问点来获取该实例。
工厂模式（Factory）：通过工厂方法创建对象，而不是直接使用new操作符。这样可以隐藏具体实现，并根据需要创建所需类型的对象。
观察者模式（Observer）：定义了一种一对多的依赖关系，当一个对象状态发生改变时，它的所有依赖者（观察者）都会收到通知并自动更新。
装饰器模式（Decorator）：动态地将责任附加到对象上。通过将对象包装在装饰器对象中，可以在运行时为对象添加新的行为。
策略模式（Strategy）：定义了一系列算法，将每个算法封装起来并使它们可以相互替换。策略模式可以让算法独立于客户端而变化。
适配器模式（Adapter）：将一个类的接口转换成客户端所期望的另一个接口。适配器模式使得原本由于接口不匹配而无法一起工作的类可以协同工作。

每个设计模式都有其特定的应用场景和优缺点，可以根据具体情况来选择使用。设计模式可以提高代码结构的灵活性、可维护性和可扩展性，并促进重用和解耦。然而，需要根据实际需求慎重选择和应用设计模式，避免过度设计或不必要的复杂性。

4. JavaScript 中引用数据类型和基本数据类型

题目要点

基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。

参考答案

基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。

5. 谈谈对Vue中双向绑定的理解

题库原题：谈谈对Vue中双向绑定的理解

题目要点

Vue中的双向绑定是其核心特性之一，它极大地简化了数据在视图（View）和模型（Model）之间的同步过程。双向绑定意味着当数据发生变化时，视图会自动更新以反映这些变化，反之亦然，用户在视图上的操作（如输入）也会自动更新到数据中。

实现原理

Vue的双向绑定主要依赖于其响应式系统（Reactivity System）和模板引擎（Template Engine）。

响应式系统：Vue使用Object.defineProperty（在Vue 3中使用了Proxy）来劫持（或说“代理”）对象的getter和setter。当组件的data中的属性被访问或修改时，Vue会拦截这些操作，并执行相应的依赖更新逻辑。这样，Vue就能追踪到数据的变化，并在需要时更新视图。
模板引擎：Vue的模板引擎使用基于HTML的模板语法，允许开发者声明式地将DOM绑定到底层Vue实例的数据上。当数据变化时，Vue的模板引擎会重新渲染模板，生成新的虚拟DOM树，并通过高效的DOM diff算法更新真实的DOM，以反映数据的最新状态。

参考答案

一、什么是双向绑定

我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子

百度-百度云-校招 · 第 1 轮 · 三面

Thu, 24 Jul 2025 15:06:51 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 三面偏重项目经历、思维深度与工程解决方案，兼顾产品理解与算法能力。

本轮共 6 道题。答案默认折叠，便于先自行作答。

1. 讲一下之前的实习经历，主要负责什么工作，你们团队是做什么的？

题目要点

在回答实习经历时，可以遵循： “团队是做什么的 → 自己负责了什么 → 过程中遇到的挑战 → 最终的结果和成长”。这样既能让面试官清楚地看到候选人的贡献，也能体现出对团队目标的理解和自身成长路径的清晰度。

要不要我帮你准备几个可直接套用的实习经历表述范例，比如业务团队和前端基础设施团队两个版本？

参考答案

这个问题本质上考察的是候选人能否清晰表达实习经历的价值，以及是否能将个人的工作与团队目标联系起来。回答时既要避免流水账式的叙述，也要避免过度拔高，而是重点体现做过什么、为什么做、产生了什么影响。

回答思路

1. 团队定位与职责

先交代团队是做什么的，比如：

是否负责某条具体业务线（例如地图、金融、电商、内容平台）；
是否是基础架构团队（组件库、工程化平台、性能优化、监控体系）；
团队的核心目标是什么（提升用户体验、提升研发效率、支撑业务增长）。

这样能让面试官快速理解环境。

2. 个人负责的工作

描述时可以抓住几个关键词：

核心任务：负责开发某个功能模块、参与前端组件封装、接入监控埋点、优化性能等；
协作方式：是否需要和后端、测试、设计配合，是否参与需求评审或接口联调；
挑战与亮点：是否遇到过性能瓶颈、复杂交互、数据量大等问题，是否提出了改进方案。

避免简单说“写页面、改 bug”，而是强调“通过实现某个功能/优化某处性能，解决了某类问题”。

3. 收获与成长

最后点出在实习期间的成长：

是否熟悉了前端项目的完整研发流程（需求 → 开发 → 测试 → 上线 → 复盘）；
是否积累了在团队协作、代码规范、工程化工具上的经验；
是否提升了技术能力，比如掌握了某些框架或优化手段。

2. 在工作中遇到过什么问题，是怎么解决的？

题目要点

这个问题的最佳回答路径是： “提出一个具体问题 → 说明如何分析定位 → 阐述解决过程和思考 → 总结结果和反思”。重点不是问题有多难，而是展现出遇事冷静分析、推动落地并能沉淀经验的能力。

要不要我帮你列几个可以直接在面试里使用的典型案例场景，比如“性能优化”、“构建优化”、“协作问题”三类？

参考答案

这个问题考察的是候选人的问题意识、分析能力、解决路径和复盘能力。面试官关注的不是问题本身多么“高大上”，而是能否体现出逻辑清晰、方案合理、结果正向。

百度-百度云-校招 · 第 1 轮 · 二面

Thu, 24 Jul 2025 15:06:51 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 二面重点考察前端框架理解与性能优化能力，同时关注工程化处理思维和大规模数据处理能力。

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 元素隐藏的三种方法（display:none、visibility:hidden、opacity:0）及其区别

题目要点

display: none：元素不在文档流中，不占位，无法响应事件。

参考答案

display: none：元素不在文档流中，不占位，无法响应事件。
visibility: hidden：占位但不可见，无法响应事件。
opacity: 0：占位且可响应事件（需用 pointer-events: none 避免）。

2. display:none是否影响DOM渲染性能？如何用CSS实现淡出动画？

题目要点

display:none 会从渲染树中移除，提升性能，但不能用于动画过渡。

参考答案

display:none 会从渲染树中移除，提升性能，但不能用于动画过渡。
使用 opacity + transition 实现淡出，再用 JS 延迟设置 display:none。

3. `Array.from({ length: 5 }, (v, i) => i * 2)` 的输出是什么？

题目要点

输出 [0, 2, 4, 6, 8]。构造一个长度为 5 的数组，并通过索引乘以 2 填充。

参考答案

输出 [0, 2, 4, 6, 8]。构造一个长度为 5 的数组，并通过索引乘以 2 填充。

百度-文库-校招 · 第 1 轮 · 一面

Sat, 19 Jul 2025 07:40:07 +0000

← 已是第一轮 · 返回本次面经 · 第 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 轮 · 二面

Sat, 19 Jul 2025 07:40:07 +0000

← 第 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 轮 · 三面

Sat, 19 Jul 2025 06:27:27 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 7 道题。答案默认折叠，便于先自行作答。

1. 讲一个你觉得最有成就感的项目？

题目要点

这个问题的回答重点不在于项目多复杂，而在于是否能通过一个真实的项目，清晰地表达出在关键阶段的判断力、推动力和技术价值。能讲出一个对业务和团队产生正向影响的案例，并体现出“为什么重要”、“怎么做的”、“结果如何”以及“有哪些沉淀”，才是打动面试官的关键。

参考答案

这个问题考察的是候选人在复杂项目中的角色、思维方式以及实际落地能力。回答时不必拘泥于“成功上线”或“技术高大上”的标准，更重要的是能体现出技术价值、业务洞察和综合影响力。

可以从以下几个方向展开：

1. 项目背景与挑战

项目是否处于关键节点（如业务转型、架构重构、性能瓶颈期），是否需要协调多个团队或跨端协作。重点在于说明“项目为什么重要”以及“初始面临的困难”，而不仅仅是“做了一个新功能”。

2. 所承担的角色与关键决策

可以适当展示一些深度思考，比如为什么选用了某项技术、重构的策略、组件化拆分方式、数据模型设计等。还可以强调在混乱或模糊中推动落地、制定标准、推动流程优化等能力。

3. 结果与影响

不仅仅是“功能上线”，更重要的是对业务、团队或系统带来了什么实质性的改进，比如性能提升、迭代效率变高、可维护性提升、用户体验改善、业务增长支持等。

4. 成长与反思

有价值的项目往往伴随着“认知升级”，比如原来低估了技术债的影响，或者通过实际落地理解了“领域驱动设计”的意义。这个部分体现出个人复盘能力。

2. 平时用哪个地图软件，你觉得百度地图和高德地图有什么区别？

题目要点

这个问题背后考察的是候选人是否能够从日常使用中提炼出产品与技术的理解。如果能结合体验差异、技术架构、场景适配和生态思考给出分析，而不是停留在“哪个好用”这类主观评价层面，将更容易体现出产品敏感度和技术视野。

参考答案

这个问题虽然看似轻松，其实背后是面试官在考察候选人是否具备产品意识、用户视角以及对技术背后的生态和体验差异的敏感度。

回答可以从以下几个方向展开：

1. 使用习惯和使用场景

地图类产品往往不止于“导航”，不同场景下用户会对产品有不同诉求，例如：

日常通勤更关注路线精准、避堵能力；
出行规划更看重 POI（兴趣点）搜索能力；
步行、骑行、公交路线推荐的体验也会有所差异。

可以结合真实使用感受，说明更倾向哪一个地图工具，并说明选择背后的产品逻辑。

2. 产品体验差异

从前端视角，可以提到一些常见的 UI/UX 差异，例如：

高德地图整体交互更轻量，响应更快，视觉上偏简洁；
百度地图在信息展示上更丰富，比如搜索结果信息量较大，适合城市探索或综合决策；
两者在加载速度、动效、地图渲染逻辑、图层处理等方面也有细节差异。

3. 数据能力与技术架构差异

可适当提及：

百度地图在自然语言搜索、智能推荐、AI 语义处理方面表现更突出；
高德地图更注重实时交通、路线规划和精准避堵，背后依赖阿里生态中调度算法与实时数据的融合；
技术开发角度，百度地图在 web 开发中更注重全家桶式工具链，而高德的 SDK 则更强调灵活性和接入效率。

4. 生态与平台联动

从更高层次看，还可以提及两者在生态整合上的不同：

高德地图与支付宝、饿了么、飞猪等联动，强调生活服务整合；
百度地图则依托百度搜索、百度 AI、大模型、自动驾驶等形成了更 AI 驱动的生态闭环。

3. 在多人协作开发中，若遇到接口定义不一致或代码冲突，你会如何推动问题解决？

题目要点

这个问题的核心在于是否具备跨人、跨团队推动协作问题闭环的能力。能够主动定位问题源头、推动规范和工具落地、在冲突中引导沟通达成共识，是一个成熟前端在协作场景中的重要价值体现。回答不应仅限于“怎么解决”，更要体现出“如何避免”和“如何沉淀机制”。

百度-地图-秋招 · 第 1 轮 · 二面

Sat, 19 Jul 2025 06:27:27 +0000

← 第 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 轮 · 一面

Thu, 10 Jul 2025 14:52:42 +0000

← 已是第一轮 · 返回本次面经 · 第 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 包裹元素，使父元素的高度得以支撑

百度 on Last Stand

百度-百家号-实习 · 第 1 轮 · 技术面试

1. 如何判断一个变量是数组？

题目要点

1. Array.isArray() 方法

2. instanceof 操作符

3. Object.prototype.toString.call() 方法

4. constructor 属性

5. Array.prototype.isPrototypeOf() 方法

6. 使用 constructor 属性和原型链

2. 讲一下闭包及其优缺点。

题目要点

百度-搜索-春招 · 第 1 轮 · 技术面试

1. 实现一个动画，当用户鼠标悬停在按钮上时，按钮逐渐变大

题目要点

2. 如何避免动画过程中的卡顿？

题目要点

原理解析

考察重点

百度-商业化-秋招 · 第 1 轮 · 一面

1. 如何在前端项目中实现动态路由？

题目要点

2. Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？

题目要点

百度-小程序-暑期实习 · 第 1 轮 · 一面

1. 深拷贝浅拷贝有什么区别？怎么实现深拷贝？

题目要点

浅拷贝方法

深拷贝

一、数据类型存储

二、浅拷贝

Object.assign

slice()

concat()

拓展运算符

三、深拷贝

百度-用户增长-秋招 · 第 1 轮 · 一面

1. 有没有使用 Node.js 进行开发的经历？

题目要点

1. 使用场景

2. 具体任务

3. 收获和亮点

2. CSS 3D 变形有哪些常见的属性和方法？

题目要点

百度-APP产品研发-秋招 · 第 1 轮 · 二面

1. 讲一下你在官网开发中的主要职责，开发的模块以及你觉的比较亮点的地方

题目要点

1. 主要职责

2. 负责的模块（可根据实际情况举例）

3. 亮点/难点突破

百度-APP产品研发-秋招 · 第 1 轮 · 一面

1. 前端实现动画有哪些方式？

题目要点

百度-百度云-校招 · 第 1 轮 · 一面

1. 面向对象和面向程序设计的主要区别

题目要点

2. 面向对象的三大特性

题目要点

3. 开发的过程中你用到过哪些设计模式？

题目要点

4. JavaScript 中引用数据类型和基本数据类型

题目要点

5. 谈谈对Vue中双向绑定的理解

题目要点

实现原理

一、什么是双向绑定

百度-百度云-校招 · 第 1 轮 · 三面

1. 讲一下之前的实习经历，主要负责什么工作，你们团队是做什么的？

题目要点

回答思路

1. 团队定位与职责

2. 个人负责的工作

3. 收获与成长

2. 在工作中遇到过什么问题，是怎么解决的？

题目要点

百度-百度云-校招 · 第 1 轮 · 二面

1. 元素隐藏的三种方法（display:none、visibility:hidden、opacity:0）及其区别

题目要点

2. display:none是否影响DOM渲染性能？如何用CSS实现淡出动画？

题目要点

1. `Array.isArray()` 方法

2. `instanceof` 操作符

3. `Object.prototype.toString.call()` 方法

4. `constructor` 属性

5. `Array.prototype.isPrototypeOf()` 方法

6. 使用 `constructor` 属性和原型链

3. `Array.from({ length: 5 }, (v, i) => i * 2)` 的输出是什么？