「前端」美团一面面经（已过），一小时瑟瑟发抖

美团前端一面核心考察点涵盖项目技术细节、前端基础知识、性能优化、框架原理及工程化工具使用，整体面试体验友好，注重候选人技术理解深度与实际解决问题的能力。具体内容如下：

1. GSAP动画库

   考察对动画实现原理的理解，需明确GSAP通过JavaScript操作DOM属性实现动画，对比CSS动画（GPU加速、交互性差）和Three.js动画（3D引擎、性能开销大）。

   关键点：CSS动画性能优但交互弱，JS动画灵活但依赖主线程，Three.js适合复杂3D场景。

2. Sentry性能监控

   需熟悉性能指标（如INP、TTFB）的含义及测量方式，通过监控代码记录时间节点计算指标。

   指标分析：除平均值外，中位数、1% low（极端情况）可更全面评估用户体验。

   优化策略：针对初始化渲染慢的问题，通过Performance API定位高开销任务，或根据用户日志分析设备差异（如CPU、网络）进行针对性优化。

1. CSS与JS动画对比

   性能：CSS动画利用GPU加速，帧率更稳定；JS动画在主线程运行，易受其他任务影响导致掉帧。

   渲染效果：CSS动画流畅度更高，JS动画适合需要交互控制的场景。

   重排/重绘：使用transform等属性不会触发重排，而修改宽度、高度等会改变文档流，导致重排。

2. TailwindCSS与CSS对比

   写法：Tailwind以行内样式方式编写，无需定义类名，代码可读性更高。

   性能：Tailwind通过按需构建移除未使用类，减少CSS文件体积；选择器优化（优先使用类/标签选择器）与普通CSS一致。

1. React性能优化

   memo/useMemo/useCallback：

   memo：缓存组件渲染结果，仅在props变化时重新渲染，避免父组件更新导致子组件无意义重渲染。

   useMemo：缓存计算结果，避免重复计算开销大的值。

   useCallback：缓存回调函数引用，防止子组件因引用变化而重渲染。

   使用场景：需权衡缓存成本（内存开销）与渲染成本，仅对计算密集型或频繁更新的组件/函数使用。

   Fiber架构：React 18引入Fiber，支持异步渲染、优先级调度，提升复杂应用性能。

2. Vue与React对比

   面试中未深入对比，但需熟悉Vue3的Composition API与React Hooks的相似性（如状态管理、副作用处理）。

1. 构建工具

   Next.js：使用Webpack/TurboPack（开发阶段）和Rollup（生产阶段），支持SSR/SSG。

   Vite：基于ESBuild（开发服务器启动快）和Rollup（生产打包），适合现代前端项目。

2. TypeScript与JavaScript

   类型系统：TS支持静态类型、接口、泛型，减少运行时错误。

   生态兼容：TS是JS的超集，可逐步迁移现有项目。

1. 数组拉平（flatten）

   实现方式：使用for...of循环遍历可迭代对象（需Symbol.iterator方法），对比for...in（遍历对象可枚举属性）。

   代码示例：

   function flatten(arr) { let result = []; for (const item of arr) { if (Array.isArray(item)) { result.push(...flatten(item)); } else { result.push(item); } } return result;}

2. 原生与Web开发识别

   判断方法：

   性能：Web应用易卡顿，原生应用流畅。

   加载过程：Web页面加载时可能白屏，原生应用组件已就位，仅数据动态加载。

   小程序渲染机制：基于Webview，但通过JS Bridge调用部分Native能力（如支付、定位）。

3. React Native渲染

   直接渲染Native组件（如View、Text），而非Web视图，性能接近原生应用。

1. 面试官关注点：

   对技术原理的理解深度（如动画实现、性能优化）。

   实际项目中的问题解决能力（如Sentry指标分析、渲染优化）。

   对新技术趋势的关注（如Rust、Fiber架构）。

2. 候选人准备建议：

   复习项目中的技术细节，确保对使用的工具（如GSAP、Sentry）有深入理解。

   掌握前端基础（CSS/JS动画、重排重绘、类型系统）。

   熟悉框架原理（React Fiber、Vue3 Composition API）及性能优化手段。

   了解工程化工具（Vite、Next.js、TypeScript）的核心特性。