携程社招前端一面面经
2026-10-21 19:34:14
从面试过程来看，面试官围绕前端基础知识、性能优化、项目经验以及代码实现能力等多方面进行了考察。虽然部分问题回答不够理想，但也有一些表现不错的点，下面详细分析每个问题及回答思路。
各问题分析及回答要点自我介绍这是面试开场环节，要简洁明了地介绍自己的基本信息、工作经历、掌握的技术栈以及与应聘岗位相关的项目经验等，突出自己的优势和亮点，让面试官快速了解你。例如：“面试官您好，我叫[姓名]，有[X]年前端开发经验。熟练掌握 HTML、CSS、JavaScript 等基础技术，对 React 框架有深入研究。曾参与过[项目名称 1]、[项目名称 2]等多个项目，在项目中负责前端页面的搭建、交互逻辑的实现以及性能优化等工作。”
性能优化指标 & 如何性能优化- 性能优化指标
加载速度相关：包括首屏加载时间，即用户打开页面到首屏内容完全展示出来的时间；资源加载时间，如图片、脚本、样式表等资源的加载时长。
渲染性能相关：帧率（FPS），一般要求保持在 60fps 左右，以保证页面流畅度；重绘（Repaint）和回流（Reflow）次数，减少这两者的发生可以提升渲染性能。
内存使用相关：内存占用大小，避免内存泄漏导致页面卡顿甚至崩溃。
- 性能优化方法
代码层面：减少 DOM 操作，批量处理 DOM 更新；避免使用阻塞渲染的 CSS 属性；对 JavaScript 代码进行压缩和混淆，减少文件体积。
资源优化：对图片进行压缩和适当格式选择（如 WebP 格式）；使用 CDN 加速资源加载；对静态资源进行缓存，设置合理的缓存策略。
渲染优化：使用 CSS 硬件加速，如使用transform和opacity等属性；合理使用虚拟列表技术处理大量数据展示。
React 的渲染机制主要基于虚拟 DOM（Virtual DOM）。当组件的状态（state）或属性（props）发生变化时，React 会重新生成新的虚拟 DOM 树，然后通过 Diff 算法将新虚拟 DOM 树与旧虚拟 DOM 树进行对比，找出变化的部分，最后只将这些变化的部分更新到实际 DOM 中，而不是直接重新渲染整个页面，从而提高渲染性能。
react 函数组件怎么避免不必要的渲染？useMemo、useCallback- 避免不必要渲染的方法：使用React.memo对函数组件进行包裹，它会进行浅比较 props，如果 props 没有变化，则不会重新渲染组件。
- useMemo：用于缓存计算结果。当组件中某个计算量较大的值依赖于一些状态或属性，且这些状态或属性变化不频繁时，可以使用useMemo缓存计算结果，避免每次渲染都重新计算。例如：
- useCallback：用于缓存函数。当组件中需要将函数作为 props 传递给子组件，且该函数在子组件中作为依赖项使用时，为了避免子组件不必要的重新渲染，可以使用useCallback缓存函数。例如：
- 用过的状态管理库：可以列举如 Redux、MobX、Zustand 等。
- 区别
React 自带状态管理（如 useState、useReducer）：适用于简单的组件内部状态管理，逻辑相对简单，不需要额外的配置和学习成本。但当状态需要在多个组件间共享或状态逻辑较为复杂时，使用起来会比较困难。
第三方状态管理库：提供了更强大的功能，如全局状态管理、中间件支持（如 Redux 的 redux - thunk、redux - saga）、更灵活的状态更新方式等。适合大型项目，能够更好地组织和管理状态，但需要额外的配置和学习成本。
React SSR（Server - Side Rendering）即服务端渲染，其过程大致如下：
- 服务器接收到客户端的请求后，根据请求的路由信息，创建对应的 React 组件树。
- 在服务端执行组件的渲染逻辑，将组件渲染成 HTML 字符串。
- 将渲染好的 HTML 字符串以及初始化状态等信息一起返回给客户端。
- 客户端接收到响应后，将 HTML 字符串直接显示在页面上，同时加载客户端的 JavaScript 代码，对页面进行 hydration（水合），使页面具有交互性。
React 的 Hook 调用顺序在每次渲染时必须是相同的，这是 React 内部实现 Hook 状态管理的基础。如果将 Hook 写在条件语句里，在不同的渲染条件下，Hook 的调用顺序可能会发生变化，导致 React 无法正确跟踪和管理 Hook 的状态，从而引发错误。
每个项目中担任什么职责，遇到过的难点是什么，怎么解决的- 职责：根据实际项目情况，描述自己在项目中承担的具体工作，如前端页面搭建、交互逻辑实现、与后端接口联调、性能优化等。
- 难点及解决：例如，在处理大量数据展示时遇到页面卡顿问题，通过使用虚拟列表技术，只渲染可视区域内的数据，减少 DOM 节点数量，从而解决卡顿问题；或者在处理复杂交互逻辑时，通过合理拆分组件、使用状态管理库等方式，使代码结构更清晰，提高可维护性。
以下是使用正则表达式实现日期格式化的代码示例：
function format(date, formatStr) { const padZero = (num) => num < 10? `0${num}` : num; const year = date.getFullYear(); const month = padZero(date.getMonth() + 1); const day = padZero(date.getDate()); const hours = padZero(date.getHours()); const minutes = padZero(date.getMinutes()); const seconds = padZero(date.getSeconds()); const replacements = { 'yyyy': year, 'MM': month, 'dd': day, 'HH': hours, 'mm': minutes, 'ss': seconds, 'M': date.getMonth() + 1, 'd': date.getDate(), 'H': date.getHours(), 'm': date.getMinutes(), 's': date.getSeconds() }; return formatStr.replace(/yyyy|MM|dd|HH|mm|ss|M|d|H|m|s/g, (match) => replacements[match]);}反问环节总结- 组内业务：了解组内正在开展的业务，可以判断该岗位的工作内容是否符合自己的职业规划和发展方向。
- 求职建议：面试官给出的适当了解自己还没用过的技术栈、加强代码能力的建议非常中肯，对于前端开发者来说，不断学习和提升自己的技术能力是非常重要的。
从面试情况来看，在基础知识方面有一定的掌握，但在一些深入原理和实际应用方面还存在不足。后续可以加强对 React 原理、状态管理、SSR 等知识的学习，同时多参与实际项目，积累项目经验，提高代码实现能力和问题解决能力。
热门标签
