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

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

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

面试时间： 60分钟

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

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

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

参考答案

下面是一个参考思路：

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

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

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

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

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

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

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

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 变换：