从后端转前端开发需要补哪些知识和技能

结论：后端转前端，真正要补的是浏览器运行模型、CSS 布局、JavaScript 异步与 DOM、组件化状态管理、构建工具链、性能与可访问性六块；按 8 周、每天 2 小时，先 HTML/CSS/JS，再选 React 或 Vue 3 + TypeScript + Vite，最后用 1 个带接口、测试和 Lighthouse 指标的项目收口。

后端转前端，先补哪三块基础？

结论：先补 HTML 语义化、CSS 布局、JavaScript DOM 与异步，这三块决定你能不能独立写出可维护页面。后端已有编程思维，变量、循环、函数不用重学，但要切换成浏览器单线程事件循环模型。具体做法：第 1 周学 HTML 语义标签 header/nav/main/section/footer、表单 label 关联；第 2 周学 CSS 盒模型、Flex、Grid、媒体查询，断点用 768px 和 1024px 起步；第 3 周学 DOM 事件、fetch、Promise、async/await。每天 2 小时，每块都手写页面，不只看视频。

CSS 和浏览器渲染要学到什么程度？

结论：CSS 不是“调样式”，要能解释重排重绘、层叠上下文、BFC 和关键渲染路径。浏览器把 HTML 解析成 DOM，把 CSS 解析成 CSSOM，合并成 Render Tree，再经历 Layout、Paint、Composite。频繁读取 offsetHeight 再写样式会触发强制同步布局，性能会掉。用 Chrome DevTools 的 Performance 面板看长任务，超过 50ms 的任务要拆。掌握 position、z-index、overflow、移动端 viewport，能独立还原设计稿，才算过关。

JavaScript 和 TypeScript 该掌握哪些点？

结论：JS 要掌握 ES6+、事件循环、闭包、原型、模块化；TS 要掌握类型收窄、泛型、interface/type 和工具类型。事件循环里，宏任务如 setTimeout，微任务如 Promise.then，每轮宏任务后清空微任务队列。TS 项目打开 strict: true 和 noImplicitAny，后端转过来容易把 Java/C# 的 nominal typing 直接套用，但 TS 是结构化类型，联合类型和类型收窄更常用。先写 30 个小题：防抖、节流、深拷贝、Promise 并发控制。

React 还是 Vue？框架要学到什么？

结论：先选一个，React 或 Vue 3 都行；重点不是 API，而是组件通信、状态提升、副作用、路由和请求缓存。选 React：函数组件、useState/useEffect/useMemo、React Router、TanStack Query；选 Vue 3：Composition API、ref/reactive、Vue Router、Pinia。不要一上来学 Redux，先 useState/Context 或 Pinia 管理跨组件状态。必须理解受控组件、表单校验、加载态、错误态，这些是后台管理系统最常见的活。

构建工具、包管理和工程化怎么补？

结论：必须会 Node.js 20 LTS、npm 或 pnpm、Vite、ESLint、Prettier 和 Git 分支。命令层面：node -v 确认版本，pnpm create vite 建项目，pnpm dev 本地开发，pnpm build 生产构建，pnpm preview 预览产物。理解 Vite 的 dev server 热更新、生产构建 tree-shaking 和路由级代码分割。环境变量在 Vite 里用 VITE_ 前缀。CI 至少跑 lint + test + build 三步，后端熟悉的流水线思维可以直接迁移。

前端性能、可访问性和测试怎么入门？

结论：前端上线后靠 Core Web Vitals 衡量：LCP 小于 2.5s、INP 小于 200ms、CLS 小于 0.1。性能优化先做图片 WebP/AVIF、懒加载、路由级代码分割、Cache-Control 缓存。可访问性按 WCAG 2.1 AA：语义化标签、键盘可操作、对比度 4.5:1、图片 alt。测试用 Vitest 写单元测试，Playwright 写端到端测试。Lighthouse 跑分截图放进项目 README，比口头说“会优化”有说服力。

后端转前端，作品集和面试怎么准备？

结论：做 1 个真实项目比刷 10 个教程有效。项目包含登录、列表分页、表单校验、路由、接口请求、错误处理、加载态、单元测试和 Lighthouse 截图。面试重点：CSS 布局、事件循环、HTTP 缓存与 CORS、框架状态管理、性能优化。你的后端经验是加分项：Node BFF、接口设计、数据库、部署都能讲。8 周后拿这个项目投递，前端基础岗和全栈岗都能覆盖。

收束：后端转前端不是从零开始，而是把编程能力换到浏览器这个运行时；先补 CSS 和浏览器模型，再用 TypeScript + 框架 + 工程化做项目，最后用性能和测试证明你能上线。