【前端面经】美团-核心本地商业-业务研发平台(暑期,oc)

一面(2025/05/06)
1. 自我介绍
2. 社交、新闻数据聚合平台项目相关
    1. 导师项目还是个人项目
    2. 架构设计,比如技术选型、前后端怎么设计、怎么考虑并发、预期 TPS 等
    3. 爬虫的数据怎么与后端联动的,因为后端用的 Node.js(面试官觉得 Python 与 Node.js 无法直接交互,但我们后端的作用只是负责给前端提供数据,爬虫的数据会直接写入数据库然后被分析)
3. OJ 项目相关
    1. 权限设计
    2. token 怎么存的,为什么这么存,存在本地安全吗,如果重新设计该怎么做确保安全(回答的存在服务端,然后客户端使用 id 去拿到服务端的 token,id 存在 cookie 里,似乎有其他更好的办法)
    3. 那怎么确保这个 id 安全,加有效期限
    4. 还有吗,提示:比如我通过 JS 获取到(设置 HttpOnly,禁止脚本获取 cookie)
    5. Vue 里面有个路由守卫,可以控制不同权限的用户访问不同的路由。那 js 可以怎么实现呢,如果用户直接浏览器跳转呢( 回答的前端手动实现路由守卫,控制用户能看到哪些页面,后端权限校验,不通过返回 403)
4. 代码输出,说思路(面试官一直在提示,但我没答上来,this 指向没学得好)
```js
function Counter() {
  this.count = 0;
  setInterval(function() {
    this.count++;
    console.log(this.count);
  }, 1000);
}
const a = new Counter()
```
5. 代码输出,说思路
```js
console.log(1)
setTimeout(function() {
   console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
   console.log(3)
   resolve(1000) // 标记为成功
   console.log(4)
});
p.then(data => {
  console.log(data)
})
console.log(5)
```
6. flex,怎么垂直居中,flex-grow 是什么
7. 用 css 实现一个三角形
8. 实现一个 Vue 的 keep alive,面试官一直在提示我(ಥ_ಥ)
```js
class KeepAlive {
  constructor(maxNum = 5) {
  this.cache = new Map();
  this.maxNum = maxNum;
}

  addVNode(key, vNode) {
    if (this.cache.has(key)) {
      this.cache.delete(key);
    } else if (this.cache.size >= this.maxNum) {
      const oldKey = this.cache.keys().next().value;
      this.cache.delete(oldKey);
    }
    this.cache.set(key, vNode);
  }

  getVNode(ley) {
    return this.cache.get(key);
  }
}
```
9. module 、chunk 和 bundle 的区别
10. 实现方法把数组的非零元素放在前面,零元素放在后面,O(1) 空间复杂度
```js
function moveZero2End(arr) {
  let p = 0;
  for (let i = 0; i < arr.length; ++i) {
    if (arr[i] !== 0) {
      arr[p++] = arr[i];
    }
  }
  while (p < arr.length) {
    arr[p++] = 0;
  }
  return arr;
}
```
11. 有没有在用 AI 工具,怎么用的,被夸了,说我接触的很深
12. 反问:对我面试的不满之处和建议(被夸了哈哈,说我思路清晰,回答或者做题之前会说思路,建议就是多补齐前端知识的宽度和广度)

面试官很会引导你,还会解释自己的问题,面试体验非常的棒。秒约二面~

二面(2025/05/08)

1. 自我介绍
2. 讲一下 HTTP 不同版本的区别(这里一开始说的有些乱了,面试官让我重新总结一遍)
3. Vue 2/3 的区别
4. Vue 实现倒计时组件
5. m 元钱随机分给 n 个人,最大可分到 m/2,最小可分到 0.1
6. OJ 项目
    1. 几个人开发,开发周期
    2. 为什么要重构
    3. 说一个有挑战的事或难点(这里讲的智能训练流程图的组件封装,但面试官似乎不太满意?让我再说说,我就说了信息聚合可视化项目的难点,说了两个:插件开发 / 爬虫中高价值用户获取整体流程与迭代思路)
7. 用过 AI 吗,应用方面的呢
8. 对 AI 的基础知识或原理了解多少
9. DeepSeek 听说过吗,聊一聊实际使用情况
10. 用过 AI 编辑器吗,如 Cursor、Windsurf,使用体验怎么样
11.  反问
    1. 面试反馈:整体还可以,但是需要打好基础并扩展技术栈如 React,沟通的时候要先理清楚逻辑,AI 浪潮下要对 AI 相关的内容保持关注
    2. 多久出结果:一周内
    3. 工作时间:实习生宽松一些,早十晚八(意思是正式员工会更晚吗)

自我介绍完面试官沉默了一段时间,回答完基础知识又沉默了一段时间,我以为我要寄了!然后算法相关,真的很幸运,面试前十分钟看了牛客上的面经,结果真的问到了!
全部评论
正式工可能就周五下班早一点,反正我们部门是周宇晚上7点多就差不多都走了,除了个别有活的,实习生一般就混个餐补8点多就走了
点赞 回复 分享
发布于 05-19 16:06 北京

相关推荐

05-18 07:43
已编辑
东华大学 前端工程师
一面(2025/02/13)1.&nbsp;自我介绍2.&nbsp;你如何学习前端的3.&nbsp;为什么没有继续深入大数据相关行业4.&nbsp;项目介绍&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;项目功能&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;如何处理学生考试时提交结果的高并发的问题&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp;为何选择&nbsp;Pinia&nbsp;而不是更加主流的&nbsp;Vuex,出于什么考虑&nbsp;&nbsp;&nbsp;&nbsp;4.&nbsp;项目打包过程,产物是什么样的,浏览器能运行什么文件,能运行&nbsp;ts&nbsp;文件吗,为什么只有一个&nbsp;index.html&nbsp;却能显示不同页面,Vue&nbsp;中的&nbsp;template&nbsp;代码是如何在浏览器中被看到的(这里一开始没有回答上来,所以在引导我)(单页应用&nbsp;SPA)5.&nbsp;工程化&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;Vite&nbsp;打包过程&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;Webpack&nbsp;与&nbsp;Vite&nbsp;的区别&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp;Webpack&nbsp;中的&nbsp;loader&nbsp;是做什么的&nbsp;&nbsp;&nbsp;&nbsp;4.&nbsp;es6&nbsp;转&nbsp;es5&nbsp;是怎么实现的,听说过&nbsp;Babel&nbsp;吗&nbsp;&nbsp;&nbsp;&nbsp;5.&nbsp;npm、pnpm、yarn&nbsp;的区别,lock&nbsp;文件是做什么的6.&nbsp;Vue&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;组合式&nbsp;API&nbsp;与选项式&nbsp;API&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;Vue3&nbsp;与&nbsp;Vue2&nbsp;的区别&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp;组件通信方式7.&nbsp;CSS&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;有哪些布局,讲一讲&nbsp;Flex&nbsp;布局,常用属性&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;定位方式&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp;选择器优先级,important&nbsp;的优先级是多少8.&nbsp;JS&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;实现异步的方式(回调、Promise、async/await)&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;Promise&nbsp;的&nbsp;API,Promise&nbsp;的参数是什么&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp;事件循环,JS&nbsp;引擎为什么是单线程&nbsp;&nbsp;&nbsp;&nbsp;4.&nbsp;浏览器缓存(强缓存、协商缓存)9.&nbsp;Git&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;常用命令&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;rebase&nbsp;与&nbsp;merge&nbsp;的区别10.&nbsp;Linux&nbsp;常用命令11.&nbsp;数据结构与算法&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;数组和链表&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;有哪些排序算法,冒泡排序与快速排序的时间复杂度&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp;图的表示方式&nbsp;&nbsp;&nbsp;&nbsp;4.&nbsp;DFS&nbsp;和&nbsp;BFS,层序遍历属于哪个12.&nbsp;反问:什么是大前端如何学习前端的回答没有让面试官满意;项目细节不太了解,没有去尝试理解更深层次的部分;对前端打包细节了解不多;基础知识仍然需要再完善提高。美团的面试官让我对面试有了新的认知,跟京东的面试体验差距好大。二面(2025/02/20)1.&nbsp;面试官自我介绍,自我介绍2.&nbsp;能实习多久,什么时候能来3.&nbsp;你熟悉的技术栈4.&nbsp;盒模型5.&nbsp;居中方式6.&nbsp;事件循环7.&nbsp;防抖和节流8.&nbsp;HTTP&nbsp;状态码9.&nbsp;OSI&nbsp;七层模型10.&nbsp;UDP&nbsp;和&nbsp;TCP,TCP&nbsp;为什么更可靠11.&nbsp;GET&nbsp;和&nbsp;POST,POST&nbsp;为啥要两次请求12.&nbsp;JS&nbsp;与&nbsp;TS&nbsp;的区别13.&nbsp;TS&nbsp;类型14.&nbsp;v-model&nbsp;原理15.&nbsp;computed&nbsp;和&nbsp;watch&nbsp;的区别与使用场景16.&nbsp;nextTick&nbsp;使用场景和实现17.&nbsp;事件总线18.&nbsp;项目相关&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp;介绍&nbsp;OJ&nbsp;重构项目、人员规模、开发周期、你负责的内容&nbsp;&nbsp;&nbsp;&nbsp;2.&nbsp;为什么要重构&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp;重构时如何保证系统功能稳定性&nbsp;&nbsp;&nbsp;&nbsp;4.&nbsp;为什么选择&nbsp;Pinia&nbsp;而不是&nbsp;Vuex&nbsp;&nbsp;&nbsp;&nbsp;5.&nbsp;组件库的选择考量&nbsp;&nbsp;&nbsp;&nbsp;6.&nbsp;介绍大模型对话组件,背景、出发点、开发周期&nbsp;&nbsp;&nbsp;&nbsp;7.&nbsp;流式传输协议怎么实现的&nbsp;&nbsp;&nbsp;&nbsp;8.&nbsp;虚拟滚动技术怎么实现的,开始与结束的索引怎么计算的19.&nbsp;算法:最长递增子序列隔了一周挂了,有些没答上来,有些说的不够广不够深,算法看错题了(ಥ_ಥ)
点赞 评论 收藏
分享
评论
3
11
分享

创作者周榜

更多
牛客网
牛客企业服务