Web 全栈开发学习路线（基础篇）

TIP

对于非计算机专业或转行的同学，甚至本专业的同学未来需要往 Web 全栈方向发展，并成为一名资深开发的必备知识体系能力清单。

一名优秀的前端开发工程师也叫做 "全栈开发工程师"，这个时代也被叫做"大前端时代"。

只有根基扎实了，未来才能盖高楼大厦。

1、计算机基础

TIP

需要了解和熟悉核心知识点，具体内容可查阅相关资料

计算机组成原理	操作系统	汇编语言
冯 · 诺依曼结构	进程和线程	寄存器和内存模型
二进制	CPU 调度算法	堆栈模型
算术运算和逻辑运算	内存管理	CPU 指令
各级存储器的区别	文件系统和 IO	/

编译原理	计算机网络	编码
编译器流程	TCP/IP 协议	ASCII 码
AST	UDP	unicode 字符集
/	DNS，HTTP	UTF-8 / UTF-16

2、数据结构

TIP

结构化与非结构化的思维，非常重要

逻辑结构与代码表现	线性结构
栈（逻辑结构）可用数组或链表（代码）表示	向量（如 C 语言的数组，length 不可变）
队列（逻辑结构）可用数组（代码）表示	链表
树（逻辑结构）可用对象（代码）表示	栈
/	队列

树（tree ）	其他
普通树	优先级队列：堆
二叉树（为何偏偏重点讲二叉树？而不是三叉树、四叉树……）	词典（散列表）
搜索树（AVL 树、红黑树、B 树）	图

3、算法

TIP

了解一下常用基本算法

算法思想	递归思想	常用算法	算法刷题
二分	本质	线性结构（查找、排序，新增、删除）	leetcode
贪心	爆栈	树（遍历，新增删除 [ 平衡树 ] ）	/
动态规划	/	图（搜索，最短路径）字符串（KMP 算法、前缀匹配）	/

4、编程模式

面向对象 OOP	面向切面编程 AOP	函数式编程 FP
类和对象	主要功能、意图	高级函数，纯函数
三要素（继承、封装、多态）	AOP/OOP 区别	curry
UML 类图	作用，应用范围	compose

5、设计模式

SOLID 设计原则	常见设计模式	常见应用程序框架模式
单一职责原则	工厂模式、构造器模式	MVC
开闭原则	单例模式、原型模式	MVVM
里氏替换原则	发布订阅者模式（观察者模式）	ORM
接口隔离原则	适配器模式、装饰器模式	/
依赖倒置原则	代理模式、外观模式、迭代器模式	/

6、前端相关语法和 API

TIP

• 业界标准：W3C、ECMA-262
• XML：可扩展标记语言

（1）HTML/HTML5 标签和属性

TIP

• 基础标签：

  • 文档声明、文档结构、功能标签
  • 块级元素，区块标签，内联元素，特殊内联元素
  • 转义字符，表格标签

• 媒体标签、图形标签：

  • 音视频
  • SVG
  • Canvas

（2）CSS/CSS3 样式和属性

基础	布局	定位	响应式	CSS3	模块化
理解“流” CSS 的设计核心	block 和 inline-block	relative，absolute	viewport	渐变	BEM
基础的图文样式	盒模型、margin 相关	fixed	rem	动画	css-in-js
层叠性和选择器权重、字体 iconfont	float 布局，BFC，Flex、Grid、响应式布局，移动端事件	定位上下文	vw vh，百分比	2D/3D 转换	/

（3）ES 语法

TIP

• 变量，表达式，函数等基础语法
• 作用域：
  • 自由变量
  • 闭包
  • this
• class 和 继承
• 原型、原型链
• 异步编程：
  • promise、async/await
  • 宏任务和微任务
  • event
  • loop
  • 模型
• Map 和 Set
• Proxy 和 Reflect
• 装饰器 Decorator
• 常用 API ：
  • 字符串
  • 数组
  • 对象
  • 正则表达式
  • 日期处理
• 异步处理
• 模块化：ES6 Module（可对比 AMD、CMD、CommonJS）

（4）TypeScript 语法

TIP

• 类型：变量类型、函数参数类型、函数返回值类型
• 自定义类型
• 接口
• 泛型
• 枚举
• 函数重载
• 命名空间

（5）JS Web API

TIP

• DOM 操作：

  • DOM 结构
  • DOM 操作
  • DOM 操作的性能考虑

• DOM 事件：

  • 事件绑定
  • 冒泡模型
  • 事件代理（委托）

• BOM 操作：

  • window
  • location（获取 url）
  • navigator（获取 UA）
  • history（前端路由）
  • screen

• 通讯：

  • postMessage
  • BroadcastChannel

• Ajax：

  • XMLHttpRequest
  • Fetch
  • 浏览器同源策略
  • 跨域请求（CORS、JSONP）
  • cookie

• 存储：

  • localStorage
  • sessionStorage
  • indexedDB

• webworker：相关 API

（6）WebAssembly（简写 wasm）

值得深入研究，目前最新技术方案

最近，WebAssembly 在 JavaScript 圈非常的火！解析运行更快，将改变 Web 开发领域

WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。

WebAssembly 由 Web 和 Assembly 组成，简言之就是在 Web 上运行 Assembly，其缩写是 wasm。开发者可以把 Rust、Go、C 等编写的程序编译为 WebAssembly，从而让程序在浏览器中运行。

2019 年，W3C 宣布 WebAssembly 核心规范成为正式标准。

时隔 3 年，在 2022 年 4 月 W3C 又发布了 WebAssembly 核心规范 2.0 的首个草案

目前，国内大厂已经在实际生产中应用了。（比如：微信的存储和算法中台）

（7）Web RTC

TIP

WebRTC，名称源自网页即时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的 API。

7、网络和通讯

TIP

• TCP/IP（了解即可）: IP，7 层模型，3 次握手
• URL 格式
• DNS 解析（域名到 IP）
• HTTP：
  • method（Restful API）
  • 状态码
  • Request Header
  • Response Header（其中会有 gzip 压缩）
  • cookie
  • 缓存策略（强制缓存、协商缓存）
• HTTPS：
  • 如何加密传输
  • 购买 SSL 证书
• WebSocket
• 登录方案：
  • session
  • jwt
• 鉴权方案：
  • oauth2
  • sso
• 文件上传
• 相关术语：
  • PV
  • UV
  • QPS ......
• CDN（专门提供静态文件服务，需要知道）

8、Web 前端企业级项目开发流程

一线企业级项目研发流程

• 1、代码版本管理 Git：

  • 常用命令、多人协作开发
  • 使用 GitHub、GitLab、Gitee、coding.net 等

• 2、软件包管理：

  • npm
  • package.json
  • yarn

• 3、技术基建：

  • UI 组件库
  • 业务组件库
  • 公共 SDK

• 4、Mock：

  • charles mock，
  • mock.js
  • 在线 mock server
  • 国内目前推荐：https://www.fastmock.site/

• 5、调试和抓包：

  • debugger
  • charles 和 fiddler（抓包、配置代理，如微信能力的测试，需要线上域名）
  • chrome 开发者工具
  • 深入：内存泄漏的排查

• 6、单元测试：

  • jest 等工具
  • Vue React 框架的测试工具

• 7、CI/CD：

  • 持续自动化部署和监控
  • github actions
  • travis 等等

• 8、linux 基本应用：

  • ssh
  • ssh key 信任
  • 常用命令
  • scp 远程拷贝
  • vim 编辑器

• 9、文档：

  • wiki 平台
  • 在线 office / 知识库
  • MarkDown

• 10、研发流程：

  • ① 需求评审和 UI 设计

  • ② 技术方案设计

  • ③ 开发过程：编码、调试、单元测试、自测、写注释和文档、代码走查等

  • ④ 联调

  • ⑤ 提测

  • ⑥ 上线：全量，小流量（灰度），ABTest

  • ⑦ DevOps