2025年春招美团前端技术二面面经（附参考答案与考察点分析）

前端面试题宝典

已于 2025-03-29 20:38:34 修改

阅读量889

点赞数 20

文章标签：面试前端 vue.js

于 2025-03-29 20:35:25 首次发布

本文链接：https://blog.youkuaiyun.com/u010053703/article/details/146710818

版权

一、面试问题与参考答案

1. 自我介绍

参考答案：
面试官好，我是XXX，目前就读于XXX大学计算机专业。主攻前端开发方向，熟练掌握HTML/CSS/JavaScript基础，熟悉Vue和React框架，并有多个项目实战经验。最近独立开发了一个数据可视化大屏项目，使用ECharts实现动态图表渲染，并优化了首屏加载速度。课余时间喜欢研究前端新技术，保持每周输出技术博客的习惯。

考察点：

自我总结能力
技术栈与项目亮点提炼
沟通表达能力

2. 有自己部署什么网页吗？

参考答案：
曾部署过个人博客和课程项目，使用Nginx作为服务器，结合GitHub Actions实现自动化部署。在部署过程中配置了HTTPS证书，并通过Gzip压缩优化资源加载速度。

考察点：

项目部署经验
服务器运维基础

3. 项目背景

参考答案：
最近开发的数据可视化项目主要用于展示实时业务指标。技术栈为Vue3 + ECharts + Axios，通过WebSocket实现数据实时更新。核心难点是图表渲染性能优化，最终通过懒加载和按需渲染解决。

考察点：

项目理解深度
技术选型合理性

4. 前端学到什么程度？

参考答案：

基础：深入理解ES6+、CSS布局与动画、浏览器原理。
框架：熟悉Vue/React核心原理（如虚拟DOM、Diff算法）。
工程化：掌握Webpack配置优化、Babel转译流程。
进阶：研究过微前端架构和性能优化方案。

考察点：

技术体系完整性
学习深度与广度

5. 网页有点卡是因为什么？

参考答案：
可能原因：

网络层：资源体积过大、未启用CDN、HTTP请求过多。
渲染层：频繁DOM操作、未使用防抖/节流、重排重绘过多。
代码层：未优化长任务、内存泄漏、同步阻塞逻辑。

考察点：

性能问题排查能力
浏览器渲染机制理解

6. jQuery相关问题

参考答案：
jQuery的优势是链式调用和兼容性处理，但现代框架更强调数据驱动和组件化。在旧项目中用jQuery实现过动态表单验证，但新项目已转向Vue。

考察点：

传统库的理解
技术演进认知

7. 大屏适配方案

参考答案：
采用rem+vw/vh+scale结合：

基础布局用rem动态计算；
图表容器使用vw/vh按视口比例缩放；
通过transform: scale()整体缩放适配超宽屏。

考察点：

响应式设计能力
大屏场景实践经验

8. 大屏可视化技术

参考答案：

基础库：ECharts、AntV。
3D渲染：Three.js、Babylon.js。
低代码平台：阿里DataV、腾讯图扑。

考察点：

技术视野广度
行业方案了解

9. rem原理

参考答案：
rem基于根元素（HTML）的font-size计算值。通过动态修改根字体大小（如使用lib-flexible库），实现页面等比缩放。

考察点：

移动端适配原理
CSS单位理解

10. ECharts打包体积优化

参考答案：

按需引入模块：import 'echarts/lib/chart/bar'。
使用Webpack的externals配置，通过CDN加载核心库。
压缩混淆代码，开启Tree Shaking。

考察点：

构建工具优化能力
体积敏感意识

11. Axios封装内容

参考答案：

基础配置：统一baseURL、超时时间。
拦截器：请求头添加Token、响应错误统一处理。
封装GET/POST方法，支持自动Loading态管理。

考察点：

HTTP请求管理
工程化思维

1.说说 axios 的拦截器原理及应用，并简单手写核心逻辑
2.Axios的原理是什么？
3.Vue项目中有封装过axios吗？怎么封装的？

12. 为何不用DevTools看请求返回？

参考答案：
生产环境需考虑安全性，敏感数据可能被加密。此外，部分场景需模拟不同角色权限，DevTools无法覆盖全流程测试。

考察点：

安全意识
全链路调试经验

13. 鉴权实现（meta）

参考答案：
在路由配置中使用meta字段标记权限，如{ path: '/admin', meta: { role: 'admin' } }。通过全局路由守卫比对用户角色与meta.role，决定是否放行。

考察点：

权限控制方案设计
Vue Router应用

1.常见的登录鉴权方式有哪些？
2.说说你对前端鉴权的理解
3.如何实现jwt鉴权机制？说说你的思路

14. 拦截请求修改角色如何防御？

参考答案：

前端角色信息应由服务端签发Token（如JWT），前端不可篡改。
服务端需二次校验权限，防止越权访问。

考察点：

安全防护意识
前后端协作理解

15. 登录状态保持

参考答案：

使用localStorage存储Token，Axios拦截器携带Token。
服务端返回Refresh Token用于续期，前端定时刷新。
退出登录时清除存储并重置Vuex状态。

考察点：

身份认证机制
状态管理

16. 图片懒加载实现

参考答案：

原生方案：监听IntersectionObserver API，判断图片是否进入视口。
Vue指令：封装自定义指令v-lazy，动态设置src属性。

考察点：

性能优化手段
API应用能力

17. 数组转树形结构（代码题）

参考答案：

function arrayToTree(items, parentId = null) {
  return items
    .filter(item => item.parentId === parentId)
    .map(item => ({
      ...item,
      children: arrayToTree(items, item.id)
    }));
}

考察点：

递归算法
数据结构转换

18. 异步任务队列实现

参考答案：

class AsyncQueue {
  constructor() {
    this.queue = [];
    this.running = false;
  }

  add(task) {
    this.queue.push(task);
    if (!this.running) this.run();
  }

  async run() {
    this.running = true;
    while (this.queue.length) {
      const task = this.queue.shift();
      await task();
    }
    this.running = false;
  }
}