百度-搜索-春招 · 第 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 属性可以触发硬件加速，以及如何利用它们来优化动画性能。

参考答案

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

百度-搜索-春招 on Last Stand

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

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

题目要点

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

题目要点

原理解析

考察重点