前端面试日记：美团一面凉经

面试公司：美团

面试岗位：前端

大厂距离自己感觉很远，但是感觉似乎再努努力又有些许机会，这种“只可远观，不可亵玩”的感觉可真让人着迷。

看着室友已经上岸宇宙厂，自己还在底层挣扎，心情钛酸爽了……

团子面试给人感觉还是很好的，面试官非常随和，问的问题也中规中矩，除了最后让我手撕hard（白准备了两天的二分、快排、堆排、LRU……TUT）。

老样子，问题来源于面试官，回答来源于ai，反思来源于我，题目为全流程。

【项目拷打】

1、问题：项目的难点与亮点？

答案：略

反思：感觉这边答得还是太乱了，就是得系统性的梳理一遍。

2、问题：懒加载和虚拟列表实现？

答案：略

反思：老传统了，就是话语介绍能够更加有逻辑些。

3、问题：关于性能优化这块是否量化过？如何测试的？

答案：性能优化是项目中非常重要的一环，我们通常会通过Lighthouse、WebPageTest等工具进行量化测试。例如，在一个项目中，我们通过减少HTTP请求数量、优化图片加载（使用WebP格式和懒加载）以及减少JavaScript的阻塞时间，将首屏加载时间从4.5秒优化到1.8秒。为了量化这些优化效果，我们会定期运行性能测试脚本，记录关键指标（如FID、LCP、CLS）的变化，并通过A/B测试验证优化方案的实际效果。

反思：这边确实被问了很多次，感觉下次注意下小程序这边的性能优化量化指标好了。

4、问题：Vue2/3的区别？说说Proxy和defineProperty为何会有差别，Proxy性能更好底层原理是什么？

答案：核心区别有三点：1）响应式系统重构，Vue3使用Proxy替代Object.defineProperty，能直接检测对象属性的增删和数组索引变化，无需$set方法；2）Proxy代理整个对象，避免递归遍历所有属性，初始化性能提升40%；3）内存优化，通过WeakMap建立依赖关系，避免内存泄漏。

原理差异在于：defineProperty通过劫持getter/setter，需要预先递归遍历所有属性，而Proxy在对象层面建立拦截，按需触发。这在处理深层嵌套对象时，Vue3的惰性劫持机制能显著减少初始化开销。

反思：这边开始八股是会背的，问到defineProperty和Proxy区别也能背出来，但是说到优化点在哪里，确实就卡壳了。感觉这种深层次的东西确实准备的不是很熟。

5、问题：你是从哪几个维度去思考导入第三方包库的？

答案：从六个维度进行评估：

1）包体积，使用BundlePhobia分析影响，优先选择支持Tree-shaking的ES Module版本；

2）维护状态，检查GitHub的commit频率、issue解决率；

3）类型支持，优先选择自带TypeScript定义的类型安全库；

4）兼容性，通过caniuse验证API支持度，必要时配置Babel垫片；

5）安全审计，使用npm audit检查历史漏洞；

6）替代方案成本，例如当需要Moment.js时，评估改用date-fns的迁移成本。曾通过该评估模型，将某核心依赖从2MB的UI库替换为300KB的定制方案。

反思：回答了三点，现在想想安全性和维护性也应该答上的。

【基础内容】

1、问题：Vue的双向数据绑定如何实现？用到了什么原理？

答案：Vue通过数据劫持结合发布-订阅模式实现双向绑定，具体分为三个步骤：1）数据监听：使用Object.defineProperty(Vue2)或Proxy(Vue3)劫持数据对象的读写操作；2）依赖收集：在getter中通过Dep类收集Watcher实例，建立数据与视图的映射关系；3）派发更新：setter中触发Dep的notify方法，通知所有Watcher执行update更新视图。视图到数据的同步通过v-model指令实现，本质是语法糖：监听表单元素的input事件，将事件对象的值赋给数据属性。

反思：就回答了订阅者监听，具体的确实没搞清楚。

2、问题：DOM的事件冒泡机制？如何实现祖先节点先触发，再触发子节点？

答案：DOM事件流包含三个阶段：捕获阶段（由外向内）、目标阶段、冒泡阶段（由内向外）。默认在冒泡阶段触发监听器。当点击子元素时，事件传播顺序为：parent捕获 -> child目标 -> parent冒泡。但若需要祖先在子元素之后触发冒泡阶段，则需调整监听顺序或使用微任务控制执行时序。

parent.addEventListener('click', handler, true) // 第三个参数true表示捕获阶段
child.addEventListener('click', handler, false) // 冒泡阶段

反思：这块确实没具体了解过，当时答了是单向的，后续才发现原来应该是双向的。再去好好复习整理。

3、问题：常用的布局？讲讲flex的布局原理？

答案：略

反思：常规八股，无需多盐

4、问题：小程序是如何去做移动端适配的？适配的策略有哪些？CSS Modules了解吗？

答案：小程序适配主要采用两种策略：1）rpx响应式单位，以750rpx为屏幕基准宽度，运行时按实际设备宽度等比换算；2）Flex弹性布局结合@media媒体查询，针对不同宽高比设备调整布局。

进阶方案包括：使用vw/vh配合postcss插件转换、通过wx.getSystemInfoSync获取设备信息动态计算样式。

CSS Modules是通过生成唯一类名解决样式冲突的方案，在小程序中可通过配置Webpack的css-loader启用，但需注意小程序自身样式隔离机制（如选项式addGlobalClass）与CSS Modules的配合使用。

反思：答出了rpx，但是面试官不太满意，似乎想让我回答Css Modules之类的，没回答上来，再看看。

5、问题：TCP三次握手讲解一下过程？

答案：略

反思：常规八股，无需多盐。

6、问题：讲一下url点击后的过程？介绍下重排和重绘这边的性能优化？

答案：略

反思：常规八股，无需多盐。

【手撕】（全军覆没TUT）

1、问题：手撕柯里化，一个四个参数的函数，函数处理变成柯里化函数。

反思：有看过，确实没深入理解。再好好手写下相关模块。

2、问题：leetcode4，两个有序数组，找出其中位数，时间O(log(m+n))。

反思：当时卡了，想了半天也没想出来，满脑子乱糟糟的，感觉自己啥也不会。出来一看是hard题，现在想想应该至少先动手写个二分思路的，就算不成功，也表明自己有思路，可惜了。

【手撕后开放问答】

1、你是如何用ai的？

反思：就常规的使用，不过忘了说自己研究生做的方向和ai有关了。

2、ai给出的api在官网没有找到，你会如何做？

反思：运行、整理、社区探讨、上报之类的。

3、ai如果给出你不熟悉的领域的回答，你会如何做？

反思：扩展知识，ai询问类似。

4、你知道哪些设计模式？（4种以上）

反思：回答了2种又说还有呢，回答了又说还有呢，结果第五个卡壳了，还在想就被打断说可以了。还是准备不够到位吧。

反思：

感觉团子面试回答的比字节好多了，但是团子深挖的地方也比字节多多了，最后扔了一个hard，也应该是对我之前基础不扎实的回应了。总的来说，团子确实是更像要人的样子，双非佬好好准备上岸概率还是挺大的。

另外自己确实基础还是太薄弱了，得需要好好强化。最后问面试官自己提升的地方，听到基础和算法，就知道自己凉凉了。

目前团子已经回退筛选中，等捞……