【全栈开发技术路线】_web全栈学习路线

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

全栈介绍：

需求分析、设计规划、数据库设计、前端开发、后端开发、测试、服务部署、后期维护，全部一个人搞定。

---

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

对于非计算机专业或转行的同学，甚至本专业的同学未来需要往 Web 全栈方向发展，并成为一名资深开发的必备知识体系能力清单。 一名优秀的前端开发工程师也叫做 "全栈开发工程师"，这个时代也被叫做"大前端时代"。 只有根基扎实了，未来才能盖高楼大厦。

1.计算机基础

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

2.数据结构

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

3.算法

了解基本常用算法

4.编程模式

5.设计模式

6.前端相关语法和 API

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

(1)HTML/HTML5标签属性

• 基础标签

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

• 媒体标签、图形标签

  • 音视频
  • SVG
  • Canvas

(2)CSS/CSS3样式和属性

(3)ES语法

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

(4)TypeScript语法

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

(5)JS Web API

• 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)WebAssembly（简写 wasm）

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

7.网络和通讯

• 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、http://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

---

Web 全栈开发学习路线（高级篇）

从全局的视角，看清楚完整的技术体系和学习路线是非常有必要的，学习就不会迷茫。

1.前端工程化

• 规范化
  • Eslint 编码规范（结合 pre-commit）
  • Git 规范：branch 命名规范，commit 规范
  • jsdoc 注释规范
• 模块化
  • 代码分模块组织（依赖于 js css 模块化语法和 webpack 等工具的支持）
  • 组件化
• 自动化
  • 脚手架（如 create-react-app vue-cli），yeoman
  • 监听文件变化，自动构建
  • CI/CD 自动单元测试，自动提测、上线等
  • 自动兼容（如 postcss babel）
• webpack
  • 基础配置，常用 loader，常用 plugin
  • 代码拆分、公共代码抽离（产出多 chunk）
  • 性能优化
• babel 编译
  • babel-polyfill
  • babel-runtime
  • corejs
• rollup.js ES 模块打包器
• Parcel 零配置 JS 打包神器

2.运行和监控

• 浏览器 和 webview 引擎
• 页面加载和渲染：从输入 url 到页面显示的整个过程
  • 加载过程
  • 渲染过程
  • 重绘/重排
• JS 运行机制
  • JS 引擎（ 如 V8 ）
  • 内存机制
  • 垃圾回收机制
• 性能优化
  • 优化加载速度
  • 优化渲染速度
  • 优化操作体验（如节流、防抖）
  • Chrome Performance API 性能监控
  • Chrome lightHouse 检测工具
• 安全
  • XSS
  • CSRF
  • DDOS 攻击
  • 密码加密存储
• 监控和统计
  • 错误监控、报警
  • 性能监控
  • 统计上报（小流量统计）
  • APM 监控平台
• 客户端能力
  • jsbridge（如微信 jssdk）
  • js 调起 app

3.前端框架基础

• SPA 和 MPA （单页应用和多页应用）
• 前端路由
• MVVM
• 组件化
• 虚拟 DOM 和 diff 算法

4.Vue

• vue-cli
• 基础使用
  • 组件
  • 模板
  • 指令
  • 组件属性
  • 组件生命周期
  • 高级使用（如动态组件、异步组件、slot 等等）
  • 性能优化
• 原理
  • 响应式（ Object.defineProperty ）
  • 模板编译
  • 虚拟 DOM
• 周边
  • vuex
  • vue-router
  • UI 框架
    elementUI
    view-design（之前叫 iview）
    ant-design-vue
• Vue3.x + TypeScript + Vite

5.React

• create-react-app
• 基础使用
  • JSX 语法
  • 组件和属性
  • state 和 setState
  • 组件生命周期
  • 高级使用（如 Context、高阶组件、render-prop 等）
  • 性能优化（如 shouldComponentUpdate PureComponent ）
• 原理
  • JSX 语法糖本质
  • 合成事件机制
  • batchUpdate 机制
  • 事物机制
  • 组件渲染流程
  • fiber
• 周边
  • redux
  • mobX
  • react-router
  • UI 框架
    ant-design
• Hooks

6.常用工具和插件

• lodash - 工具函数
• echarts - 统计图表
• jquery 或 zepto - DOM 操作
• axios - ajax
• date-fns 或 moment - 日期时间格式
• css reset 库
• http://caniuse.com 浏览器兼容性
  等等 …

7.服务端开发

• NodeJS
  • 基本 API（如 http、fs 等）
  • commonjs 模块化
  • 框架
    express
    koa
    egg
  • 调试
• SSR
  • 服务端模板，如 ejs artTemplate 等
  • nuxt.js （Vue SSR）
  • next.js（React SSR）
• 常用
  • nginx（反向代理、负载均衡）
  • 数据库
    redis
    MySQL
    mongodb
  • Docker
  • 日志分析
• serverless
• Deno
• 小程序开发
• PWA
• 跨端（如 RN Weex）
• 客户端 electron

---

总结

来源：arry老师知乎
Web全栈开发学习路线（基础篇）
Web全栈开发学习路线（高级篇）