顺丰前端春招准备
顺丰前端开发岗位春招备考入口，整理一面到终面的高频问题、项目深挖方向、知识点跳转和准备优先级。
#type / howto
#status / growing
#tech / dev / frontend
#source / company / sf-express
#resource / interview
[!info] related notes
- 所属 MOC: 前端八股文 MOC
- 公司对比: 银行与科技企业前端面试对比
- Vue 主线: Vue MOC
- ES6 主线: ES6 新特性 MOC
- 浏览器: 浏览器渲染过程, 浏览器缓存分类与 304 / memory cache / disk cache
- 网络: HTTP 与前端网络 MOC
- 项目表达: 项目问答
顺丰前端春招准备
公开样本不算特别多，但能归纳出一个稳定结论：顺丰前端的二面通常不是再来一轮纯八股，而是明显转向项目深挖 + 原理追问 + 轻手写/口述代码 + 团队协作判断；终面则大多更像 HR / 综合面，重点看稳定性、城市意向和职业规划。整体主线依然是 浏览器 / 网络 / Vue / 性能监控 四件套。
岗位画像
- 岗位：前端开发工程师
- 职责：页面设计、页面开发、单元测试、重构优化、文档维护
- 技术要求：JavaScript、HTML5/CSS3、HTTP、浏览器原理、调试工具、软件开发流程、git/SVN
- 加分项：UI/UE 经验
- 内部技术栈：Vue2.x（主力）、React、原生 JS、JSP
面试流程判断
- 一面：基础八股 + 项目经历，考浏览器、网络、Vue、工程化和简历项目
- 二面 / 复试：项目深挖、Vue 与浏览器原理、轻手写、协作判断会混着问
- 三面 / 终试：更像 HR / 综合面，重点看意向度、稳定性、base 接受度和职业规划
- 样本说明：公开前端二面/三面样本相对少，以下内容更适合作为高频规律总结，而不是把它当成某一届固定剧本
一面（基础 + 项目）
- 项目难点（必问）→ 项目问答
- ES6 新特性 → ES6 新特性
- axios 封装 → axios
- 闭包与垃圾回收 → ECMAScript 闭包, JS 垃圾回收
- HTTP/2 → HTTP1.1 vs HTTP2
- TCP 可靠性 → TCP 可靠性
- Map / WeakMap → Map vs WeakMap
- Set / WeakSet → Set vs WeakSet
npm run build原理 → webpack 构建流程- webpack 配置与原理 → webpack 构建流程, webpack loader 和 plugin
- Promise 嵌套与 async/await → ECMAScript Promise 与异步
- var / let / const → var / let / const 区别
- Vue 源码理解
- Vue 双向绑定原理 → Vue2 Object.defineProperty 响应式原理, Vue3 Proxy 响应式原理
二面 / 复试（项目深挖 + 原理追问 + 轻手写）
典型追问方向
1. 项目深挖
- 你做过哪些优化，优化前后差别怎么量化 → 前端性能优化面试题, 性能指标体系, 项目问答
- 项目里最难、最有印象的一次问题是什么，怎么定位和解决 → 白屏问题诊断, 页面加载性能排查, 项目问答
- 你封装过什么组件 / hook / 请求层 → axios, 前端 HTTP 请求：XHR、Fetch 与 Axios
- Vue2 升 Vue3 时最大的技术难点是什么 → Vue2 vs Vue3 对比, Vue2 与 Vue3 响应式系统对比
- 团队里怎么多人协作、怎么管理版本和变更 → 项目问答
2. 框架与浏览器原理
- Vue2 vs Vue3 的核心差异 → Vue2 vs Vue3 对比
- Vue3 响应式原理、为什么从
Object.defineProperty转向Proxy→ Vue响应式系统, Vue3 Proxy 响应式原理, Vue2 与 Vue3 响应式系统对比 - Vue Router 的
hash/history模式区别 → Vue Router - SSR 有什么优点，和 CSR/SSG 怎么区分 → 服务端渲染（SSR）,CSR,SSG CSR、SSR 和 SSG 有什么区别
- 白屏出现的常见原因、排查顺序和证据链 → 白屏问题诊断, 页面加载性能排查
- 浏览器缓存、强缓存 / 协商缓存、304 怎么讲 → 浏览器缓存分类与 304 / memory cache / disk cache
- APM / RUM 要看什么指标，怎么做监控闭环 → 性能监控体系, 性能指标体系
- 移动端怎么适配、怎么验证不同设备表现 → 网页的响应式布局（网页平板手机）, CSS 尺寸单位与响应式尺寸, Chrome DevTools Device Mode
3. JS 基础与轻手写
- 深拷贝和浅拷贝有什么区别，深拷贝怎么实现 → 深拷贝, 浅拷贝 vs 深拷贝
- 事件循环输出题为什么是这个顺序 → JS 事件循环
- 数组扁平化、去重、如何口述实现 → Array.prototype.reduce, JavaScript Array
4. 已经开始混入综合判断
- 为什么想来顺丰 / 为什么想做这个方向
- 你更喜欢单独钻研还是团队协作
- 以后工作更看重什么
- 未来 3 到 5 年规划是什么
二面面试官在看什么
- 你有没有真实做过项目，而不是只会背题
- 你能不能把一个“优化”讲成背景、瓶颈、方案、权衡、结果的因果链
- 你对 Vue / 浏览器 / JS 原理是不是停留在口号层
- 你是不是一个能进团队、能稳定协作、能把事情讲清楚的人
二面前最该准备什么
- 把简历上最强的 2 个项目按“背景 → 负责内容 → 技术难点 → 方案选择 → 为什么这么做 → 效果怎么衡量 → 如果重来怎么优化”的顺序讲熟 → 项目问答
- 把顺丰高频四件套过一遍：浏览器渲染、缓存、Vue2/3 与响应式、性能监控
- 轻手写至少要能口述清楚：深拷贝、事件循环、数组扁平化 / 去重
- 对“白屏 / 慢页面 / 移动端适配”这类场景题，要准备排查顺序，而不是只背定义
备考优先级
第一优先（四件套）
- URL → 渲染全流程
- 浏览器缓存机制与 304
- 事件循环（宏任务/微任务输出题）
- Vue2/3 区别与双向绑定原理
第二优先（项目 + 排查）
- 白屏与慢页面排查思路
- 前端监控 / APM 方案设计
- 认证鉴权（JWT）
- 项目难点梳理（至少准备 2 个能讲透的案例）
第三优先（手写 + 工程化）
- 手写深拷贝
- webpack 构建流程与 loader/plugin
- axios 封装方案
- npm run build 背后的逻辑
三面 / 终面（HR / 综合面）
常见问题
- 为什么选顺丰 / 顺丰科技
- 为什么选深圳或目标工作地，是否接受目标 base
- 未来 3 到 5 年职业规划
- 还在投哪些公司，当前流程到哪一步
- 你看重什么样的团队和成长环境
- 手里如果有多个 offer，怎么排序和决策
- 再介绍一次最能代表你的实习 / 项目经历
- 是否考虑考研、转方向或短期跳槽
三面面试官在看什么
- 稳定性：会不会接了 offer 又不来，或者城市意向其实不稳
- 意向度：是不是真的愿意去顺丰，而不是把它当保底
- 匹配度：职业规划是否正常、清晰，团队合作预期是否容易对齐
三面前最该统一的口径
- 为什么选顺丰
- 为什么选这个城市
- 未来 3 到 5 年想怎么成长
- 手里其他机会怎么排序
终面最怕前后不一致：二面说想深耕前端，三面又说想转产品；二面说深圳没问题，三面又明显犹豫，这类反差很容易减分。
顺丰前端备考建议
顺丰算法不一定每轮都考，但浏览器 / 网络 / Vue / 性能监控几乎是稳定主线。
- 内部 Vue2 用得更多，**Vue2 响应式原理（Object.defineProperty）**要能讲透，同时别忽略 Vue3 对比题
- 项目追问会比纯八股更重要，每个写在简历上的项目都要能说出难点、权衡和结果
- APM / 性能监控是很好的区分题，最好准备一套“怎么发现慢、怎么定位、怎么监控、怎么验证收益”的完整答案
- 白屏问题排查是典型场景题，从网络、资源加载、JS 报错、渲染阻塞四个维度准备
- 终面提前统一好职业规划、城市意向和 offer 排序逻辑，避免前后口径打架