美团前端一面，已挂等捞

答案：从面试问题来看，此次美团前端一面覆盖了前端开发多个核心领域，包括基础技术、框架原理、性能优化、工程化等，以下是详细分析：

• 表单校验：

  需考虑多种校验规则（必填、格式、范围等）的实现方式，如使用正则表达式校验邮箱格式，或通过自定义函数校验密码强度。

  需处理异步校验场景（如验证用户名是否重复），可通过返回Promise实现。

  需优化用户体验，如实时校验、错误提示位置与样式、校验时机（提交时/输入时）等。

  常见实现方式包括原生JavaScript事件监听、第三方库（如VeeValidate）或框架内置方案（如Vue的v-model结合计算属性）。

• 减少API重复调用：

  防抖（Debounce）：延迟执行，如搜索框输入时等待用户停止输入后再发送请求。

  节流（Throttle）：固定频率执行，如滚动事件触发请求时限制频率。

  缓存策略：本地缓存已请求数据，如使用localStorage或内存缓存，结合版本控制避免脏数据。

  请求合并：将短时间内多个相同请求合并为一个，如使用axios的CancelToken取消重复请求。

• AI大模型幻觉减少：

  数据层面：使用高质量、权威数据源，增加事实性数据占比。

  模型层面：采用微调（Fine-tuning）或检索增强生成（RAG），结合外部知识库校验输出。

  后处理：设计校验逻辑，如对生成结果进行事实性验证或逻辑一致性检查。

• FCP（First Contentful Paint）：

  定义：浏览器首次渲染页面内容（如文本、图片）的时间，反映用户感知的首屏加载速度。

  测量方式：

  Performance API：通过performance.getEntriesByName('first-contentful-paint')[0].startTime获取。

  Lighthouse：自动化审计工具，直接报告FCP分数。

  Chrome DevTools：在Performance面板中查看时间轴。

  优化过程：

  资源加载优化：压缩CSS/JS、使用CDN、预加载关键资源（<link rel="preload>）。

  渲染阻塞优化：内联关键CSS、异步加载非关键JS（async/defer）。

  服务端优化：启用HTTP/2、SSR（服务端渲染）或SSG（静态生成）。

• 强缓存与协商缓存：

  强缓存：通过Cache-Control: max-age或Expires控制，浏览器直接使用本地缓存，不发送请求。

  协商缓存：通过Last-Modified/If-Modified-Since或ETag/If-None-Match校验资源是否更新，若未更新则返回304。

• Vue2与Vue3核心区别：

  响应式原理：Vue2使用Object.defineProperty，Vue3改用Proxy，支持更多数据类型且性能更高。

  组合式API：Vue3引入Composition API，逻辑复用更灵活（如setup函数）。

  性能优化：Vue3的编译优化（如静态提升、PatchFlag）减少运行时开销。

  其他：Fragment支持、Teleport组件、自定义渲染器等。

• 组合式API优势：

  逻辑复用：通过自定义hook（如useFetch）替代mixin，避免命名冲突。

  代码组织：按功能而非选项（data/methods）组织代码，更易维护。

  TypeScript支持：更好的类型推断，提升开发体验。

• ref与reactive区别：

  ref：将基本类型（如string、number）包装为响应式对象，需通过.value访问。

  reactive：直接对对象类型（如Object、Array）创建响应式代理，无需.value。

• Template中不用`.value：

  在模板中，ref会自动解包，无需显式写.value，这是Vue3的语法糖设计。

• Vue Router模式区别：

  hash模式：URL带#，兼容性好，但不够美观。

  history模式：URL更简洁，需服务器配置（如捕获所有路由返回index.html）。

• History返回内容：

  调用history.back()或浏览器后退按钮时，返回上一页的URL及状态（如滚动位置），但不会直接返回数据，需通过sessionStorage或状态管理库（如Pinia）传递。

• Webpack与Vite区别：

  启动速度：Vite基于ES Module原生支持，冷启动更快；Webpack需打包所有依赖。

  热更新：Vite仅更新修改模块，Webpack需重新构建依赖图。

  生态：Webpack插件丰富，Vite通过Rollup兼容部分Webpack功能。

• Vite兼容老浏览器：

  使用@vitejs/plugin-legacy插件，自动生成传统ES模块及polyfill（如core-js）。

  配置build.target为较低的ES版本（如es2015）。

• 项目细节拷问：

  上下文传递：需明确大模型调试中的上下文管理（如Prompt工程、会话状态保存）。

  流式传输：涉及分块传输数据（如SSE或WebSocket），需处理背压与错误恢复。

• 删除链表倒数第K个节点：

  思路：使用双指针（快慢指针），快指针先走K步，然后快慢同步移动，快指针到达末尾时慢指针指向待删除节点的前驱。

  边界条件：需处理K大于链表长度、删除头节点等特殊情况。

• 技术深度：面试官注重对原理的理解（如响应式、缓存机制），而非单纯使用经验。
• 场景化能力：需将技术方案与实际场景结合（如防抖在搜索框的应用）。
• 项目细节：对参与的项目需深入理解技术选型与实现细节。
• 后续准备：

  复习Vue3源码与生态工具（如Pinia、VueUse）。

  掌握性能优化指标（如FCP、LCP）与优化手段。

  练习算法题（如链表、树相关题目）。