前言
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。
前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个要求：要折腾，爱折腾，反复折腾。
一、前端开发流程
| 标题 | 内容 | 备注 |
|---|---|---|
| 需求评审 | PRD产品需求文档-交互稿 | 需求分析、涉及渠道/环境、可行性分析、数据来源、异常流设计、需求变更 |
| 视觉评审 | Sketch画视觉稿 Figma原型设计软件 | 进度跟进、视觉稿的文件格式、检查需求、检查视觉规范、切图格式 |
| 排期评估 | 根据视觉稿排期 | |
| 技术选型 | 页面开发框架、CSS预处理器、复杂图形、动画的实现 | |
| 概要设计 | 项目结构设计、主要功能点逻辑设计 | |
| 开发环节 | 代码设计、视觉构建、业务逻辑实现、代码提交、自测 | |
| 产品体验 | ||
| 代码评审/代码review | ||
| 视觉走查 | ||
| 测试环节 | ||
| 发布方案 | 先发后端，再发前端 | |
| 上线确认 |
二、前端工程化
| 标题 | 内容 | 备注 |
|---|---|---|
| Git 版本管理 | 代码仓库 git 分支规范、Commit Message 的格式 业务分支，命名规范 | |
| 代码规范 | 代码格式化：Prettier 代码格式检查：ESLint | |
| CSS预处理器 | SASS、 Less 、 PostCSS | |
| 包管理 | npm、yarn、pnpm | |
| 编译构建 | webpack、Vite、 Gulp、 Babel | |
| 小程序工程化 | ||
| 测试相关 | 编写测试用例代码、 单元测试 、 自动化测试 |
三、前端核心知识
| 标题 | 内容 | 备注 |
|---|---|---|
| 入门核心 | 浏览器、HTML5、CSS3 、JS | |
| Node.js | 全局方法、 文件系统 | |
| Web 安全 | 跨域问题、同源策略、JSONP、 CORS | |
| 页面形式 | 多端自适应布局、SPA单页应用、PWA小程序鼻祖 | |
四、前端框架
| 标题 | 内容 | 备注 |
|---|---|---|
| JS框架 | Vue.js 声明式编程 数据驱动视图 React.js 函数式编程 调用api改变数据 Svelte轻量级框架 Angular比较老 逐渐淘汰 | |
| 组件库 B端常用 | Antd（React、Vue） Element（Vue） | |
| CSS框架 | 简单的CSS响应式框架：Bootstrap Vant Weapp：轻量级的移动端（含H5、小程序）组件库 Tailwind CSS | |
| 跨端框架 | Flutter Dart开发语言 可以编译为 ARM 64、x86 和 JS 代码 ReactNative（逐渐没落）：App、Web端 Taro：小程序、H5 | |
| 桌面应用开发框架 | Electron 框架：vscode是该框架开发的 | Electron缺点：慢、吃内存和大 |
| 前端可视化框架、图表库 | ECharts 百度的开源图表库 D3.js：可视化 js 库 Three.js 基于原生 WebGL 封装运行的三维引擎 | |
| Node.js 框架 | Koa：新一代 Node.js 框架 Egg.js：在Koa基础上进一步封装的企业级Web开发框架 Express：比较老的Node.js 框架。 |
五、前端性能优化
| 标题 | 内容 | 备注 |
|---|---|---|
| 性能分析工具 | 控制台Waterfall、performance、LightHouse | |
| 性能参数 | 首屏时间、预解析、预加载、预渲染、懒加载、懒执行 | |
| 浏览器渲染优化 | ||
| JS 优化 | JS资源优化、V8引擎工作原理、性能优化原理、防抖和节流 | |
| 资源优化 | ||
| 构建优化 | tree shaking、代码拆分 | |
| 网络传输优化 |
