前端开发工程师

🧭岗位画像

前端工程师负责用户直接看到和触摸到的一切：网页、小程序、App 内的 H5、PC 客户端、可视化大屏。它处在「产品体验」与「后端能力」的交界处，把后端的接口和数据渲染成人能理解、愿意用的界面，同时承担交互逻辑、性能、兼容性、可访问性的责任。与后端的区别在于：前端直面用户，对视觉还原、响应速度和交互体验负责，代码运行在不可控的用户浏览器/手机上；与 UI 设计师的区别在于：设计师给的是静态稿，前端要把它变成有状态、能交互、适配各种机型的真实产品；与移动端的区别在于：前端以 Web 技术为核心，跨端框架（React Native、Flutter）让两者边界日益模糊。前端是离产品最近、需求变化最频繁的岗位，也是「全栈化」趋势最强烈的岗位。

📅日常工作：这份工作每天具体在干什么

这是判断自己适不适合最关键的依据。

1. 早上 10 点开站会，对齐今日要还原的设计稿和要联调的接口，确认产品有没有临时插入的紧急需求
2. 打开 Figma 设计稿，用 HTML/CSS 或组件库把页面像素级还原，边写边在浏览器 DevTools 里调间距、阴影和响应式断点
3. 写业务交互逻辑：用 React/Vue 组织组件、管理状态，处理表单校验、请求加载态、错误提示这些真实用户的每个操作路径
4. 和后端联调接口，用 Swagger 对字段，解决跨域、时间格式、mock 数据这些琐碎问题，接口没好的先写 mock 顶着
5. 修复测试和产品提的 bug：「iPhone 上按钮点不动」「华为手机白屏」「Safari 日期显示 NaN」，一个个机型去复现
6. 和 UI 设计师就 1px 偏差反复拉扯，就「这个动效是不是太卡」争论实现方案，最后用 Lottie 或 CSS 动画实现
7. 用 Chrome Performance 面板分析首屏加载，做代码分割、图片懒加载、资源预加载，把 LCP 从 3 秒优化到 1.5 秒
8. 写单元测试和端到端测试（Jest/Vitest + Playwright），保证组件改动能被回归测试兜住
9. 参与需求评审和技术方案评审，就「这个交互在低端机上会不会掉帧」提技术意见，评估工期
10. 维护公司内部组件库和构建工具，升级依赖版本，处理 Webpack/Vite 构建变慢、体积膨胀的工程问题

🎯核心要求（硬门槛）

• 必须：精通 HTML/CSS/JavaScript 三件套，理解盒模型、Flex/Grid 布局、BFC、事件循环、原型链、闭包
• 必须：熟练掌握至少一个主流框架（React/Vue），理解其响应式原理（虚拟 DOM、Diff、Proxy 响应式）与组件化思想
• 必须：熟悉前端工程化（npm/pnpm、Vite/Webpack、ESLint/Prettier、Git），能搭建和维护一个现代前端项目
• 必须：掌握 HTTP、浏览器渲染原理、跨域、缓存机制，能用 DevTools 定位网络与性能问题
• 必须：有响应式与移动端适配经验（rem/vw、媒体查询），能保证主流机型与浏览器的兼容性
• 加分：掌握 TypeScript，能写类型清晰的代码；有工程化工具链二次开发能力
• 加分：有可视化（ECharts/D3/Three.js）、跨端（React Native/Flutter/小程序）、微前端（qiankun）经验
• 加分：懂 Node.js，能写 BFF 层或 SSR（Next.js/Nuxt），具备一定全栈能力

🧱技术栈地图

📶能力分档：初级 / 中级 / 高级

📈成长路径与薪酬变化

💼面试考什么

• JS 基础：闭包、原型链、this 指向、事件循环（宏任务/微任务）、Promise 与 async/await 原理、深浅拷贝
• CSS：盒模型、BFC、Flex/Grid、水平垂直居中、清除浮动、1px 边框问题、层叠上下文
• 框架原理：React Fiber 与 Diff 算法、Hooks 原理与依赖陷阱、Vue 响应式原理（Proxy）、组件通信与生命周期
• 性能优化：首屏加载优化手段、Core Web Vitals、重排重绘、防抖节流、虚拟列表、懒加载
• 浏览器与网络：从输入 URL 到页面渲染的全过程、缓存策略、跨域方案、HTTP 版本差异、跨标签页通信
• 工程化：Webpack/Vite 构建流程、Tree Shaking、代码分割、微前端方案、Monorepo
• 手写题：手写 Promise、手写防抖节流、手写 call/apply/bind、手写简易虚拟 DOM diff
• 项目深挖：做过的复杂交互、性能优化数据、跨端方案取舍、踩过的兼容性坑

🗺️从零到能上岸：学习路线

1. 第 1 步：HTML/CSS/JS 基础，跟着 MDN 官方文档和 freeCodeCamp 过一遍，配合B站『黑马程序员前端』入门，能独立做出响应式静态页面
2. 第 2 步：深入 JavaScript，读《JavaScript 高级程序设计（红宝书）》《你不知道的 JavaScript》，手写常见 API，理解事件循环
3. 第 3 步：框架进阶，任选 React 或 Vue 系统学习（官方文档 + 尚硅谷/技术胖教程），用框架做一个完整的待办/后台管理项目
4. 第 4 步：工程化与 TypeScript，学习 Vite、Webpack 配置，用 TypeScript 重写项目，接入 ESLint/Prettier 建立规范
5. 第 5 步：项目实战，做一个带登录、权限、可视化图表的中后台系统，或一个跨端小程序，部署上线并写 Readme
6. 第 6 步：原理与源码，读 React/Vue 源码解析（如卡颂《React 技术揭秘》），手写简化版框架核心，冲刺大厂面试
7. 第 7 步：拓展全栈，学习 Node.js（《深入浅出 Node.js》），用 Next.js/NestJS 写 BFF，让自己具备全栈竞争力

🛠️能撑住简历的项目

⚖️真实处境：优势、代价与行业趋势