牛客面经整理：美团前端二面（含 Node / Koa / 部署）（十四）
收录日期：2026-04-23
关键词：前端、Node、Koa、部署、工程化、浏览器
1. 项目技术点介绍（怎么讲）
参考答案
建议用“背景-目标-方案-难点-结果”结构，并准备好下钻点。
- 背景与目标：解决什么业务问题、指标是什么（转化/耗时/稳定性）。
- 方案：模块拆分、关键链路、技术选型理由（而不是罗列技术名词）。
- 难点：性能、状态复杂度、兼容性、工程化、稳定性与监控。
- 结果：用数据说明（首屏、包体、错误率、QPS、成本）。
2. Node 事件循环（浏览器 vs Node 有什么不同）
参考答案
- Node 事件循环是分阶段的（常见说法：timers → pending callbacks → idle/prepare → poll → check → close callbacks）。
setTimeout在 timers 阶段，setImmediate在 check 阶段；I/O 回调通常在 poll 相关阶段。- 微任务：Promise 的 microtask 队列；另外 Node 还有
process.nextTick（优先级更高，容易饿死 I/O，需要谨慎）。 - 追问点：为什么某些输出顺序在 Node 和浏览器不一样（阶段不同 + nextTick 特性）。
3. Koa “洋葱圈”模型是什么？为什么这样设计？
参考答案
- 本质：中间件是
async (ctx, next)，await next()之前是“请求阶段”，之后是“响应阶段”，形成前后包裹。 - 好处：
- 统一处理：日志、鉴权、异常捕获、耗时统计可以在一处“包住”后续逻辑。
- 组合性强：中间件可插拔，顺序决定链路。
- 常见坑：漏写
await next()会导致后续中间件不执行；异常需要最外层中间件捕获。
4. Express 和 Koa 的区别
参考答案
- 中间件模型：Express 更偏线性（传统回调链），Koa 是基于
async/await的洋葱模型。 - 内置能力：Express 内置更多功能；Koa 更轻，很多能力靠社区中间件组合。
- 错误处理：Koa 倾向统一 try/catch；Express 需要按约定传递
next(err)或错误中间件。 - 风格：Koa 更“底层/灵活”，适合搭框架；Express 更“开箱即用”。
5. Node 全局变量有哪些？需要注意什么？
参考答案
- 常见全局：
global、process、Buffer、setTimeout/setImmediate、__dirname/__filename（CommonJS 环境）。 - 注意点：
- 全局可变状态会带来测试困难、并发污染与内存泄漏。
- 生产里少挂
global.xxx，用依赖注入或模块封装替代。
6. 项目部署方案怎么设计（前端常见）
参考答案
- 静态站点：构建产物上传 CDN/对象存储，Nginx/边缘节点托管。
- 容器化：构建镜像（Nginx + 静态资源），走 K8s/发布平台。
- 灰度与回滚：
- 产物带 hash（内容寻址），新版本发布不覆盖旧资源。
- 入口 HTML 控制版本切换，支持快速回滚。
- 配套：SourceMap 权限管控、健康检查、监控报警（404/JS error/白屏）。
7. Vue 和 React 对比（重点讲差异与取舍）
参考答案
- 心智模型：Vue 更“模板 + 响应式”，React 更“函数式 + 状态驱动 UI”。
- 更新机制：Vue 依赖追踪更细粒度（按需触发）；React 依赖 props/state 变化触发渲染，靠 memo/shouldComponentUpdate 优化。
- 生态与工程：React 选择更自由（路由/状态/构建），Vue 更偏官方整合。
- 取舍回答：结合团队习惯、可维护性、性能与生态成熟度给出理由。
8. Vuex 的单向数据流是什么？
参考答案
- 数据流：View 触发 action/commit → mutation 修改 state → state 驱动 View 更新。
- 好处：状态变更可追踪、可回放，方便调试与协作。
- 追问：为什么 mutation 设计成同步（方便追踪与时间旅行调试）。
9. HTML5 新增/常用特性有哪些？
参考答案
- 语义化标签：
header/nav/main/section/article/footer。 - 多媒体与图形：
audio/video/canvas/svg。 - 表单增强：
email/url/date、required、pattern、placeholder。 - 存储与通信：
localStorage/sessionStorage、postMessage、WebSocket、historyAPI。
10. Doctype 的作用是什么？
参考答案
- 作用：告诉浏览器使用“标准模式”渲染，避免怪异模式（Quirks Mode）导致盒模型与布局行为不一致。
- 现代项目基本使用：
<!DOCTYPE html>。
11. Storage 和 Cookie 的区别
参考答案
- Cookie：会随请求自动携带到同域；体积小（通常 ~4KB）；可设置
HttpOnly/Secure/SameSite；适合会话与鉴权。 - localStorage/sessionStorage：不随请求携带；容量更大；仅前端可读写（易受 XSS 影响）；适合非敏感缓存。
- 安全建议：敏感 token 尽量放
HttpOnlyCookie，并配合 CSRF 防护（SameSite/双重 cookie/CSRF token）。
12. Flex 属性（常见追问：flex: 1 是什么）
参考答案
flex是flex-grow flex-shrink flex-basis简写。flex: 1常等价于flex: 1 1 0%（不同浏览器/规范实现细节略有差异，面试回答抓住核心即可）。- 常用：两端对齐（
justify-content: space-between）、居中（align-items/justify-content: center）。
13. ES5 继承怎么做？原型链是什么？
参考答案
- 原型链：对象通过
[[Prototype]]链式查找属性，直到null结束。 - ES5 继承常见实现：
- 构造函数继承（借用构造函数）：
Parent.call(this)（解决实例属性）。 - 原型链继承：
Child.prototype = Object.create(Parent.prototype)（解决方法共享）。 - 组合继承：两者结合，最后修正
constructor指向。
- 构造函数继承（借用构造函数）：
14. 跨域是什么？怎么解决？
参考答案
- 来源：浏览器同源策略限制读取跨域资源（协议/域名/端口任一不同即跨域）。
- 解决方案：
- CORS（推荐）：服务端配置
Access-Control-Allow-Origin等。 - 反向代理：同域转发到后端（Nginx/Vite proxy）。
- JSONP（历史，GET 限制）。
- postMessage（跨窗口通信）。
- CORS（推荐）：服务端配置
- 注意：跨域请求可能已到达服务端，但响应被浏览器拦截；不要把“跨域”当“后端没收到”。
15. Cookie 的 SameSite 属性是什么？有什么用？
参考答案
- 目的：限制第三方上下文携带 Cookie，降低 CSRF 风险。
- 取值：
Strict：最严格，跨站不带。Lax：一般跨站不带，但顶级导航 GET 等场景可能会带（更适合大多数站点）。None：允许跨站携带，但必须同时设置Secure（HTTPS）。
- 落地：鉴权 Cookie 常用
Lax或None+Secure（视业务是否需要第三方跳转/嵌入）。