军哥前端学习脑图思维导图
前端基础，框架，计算机基础等相关内容分解
树图思维导图提供 军哥前端学习脑图 在线思维导图免费制作，点击“编辑”按钮，可对 军哥前端学习脑图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：3302730546e4088c32f229e1c696f919
思维导图大纲
军哥前端学习脑图思维导图模板大纲
前言
1. 这是一份前端知识点大梳理和汇总
2. 学习最重要的就是结构化，将知识联系到一起，并分层次。经常看脑图是非常棒的学习方式，因为它高度压缩知识点，并建立知识点的相互关联。
3. 这个脑图适合小白学习巩固知识、面试复习、进阶的人寻找知识点。
4. 前端基础部分与框架 是找工作必须的
5. 计算机基础 是程序员必备的
6. 前端工程化、前端优化与安全是进阶内容
7. ⭐️ 是面试高频 提薪重点
一、前端基础
HTML
基本语法 HTML标签：
html：根标签
head：头部信息
title：文档标题
meta：元数据
link：外部资源引用
body：文档内容
h1~h6：标题
p：段落
a：链接
img：图片
div：块级容器
span：行内容器
ul/ol：无序/有序列表
li：列表项
table：表格
tr：表格行
th：表头单元格
td：数据单元格
form：表单
input：输入框
select：下拉框
button：按钮
textarea：文本域
label：标签
checkbox：复选框
radio：单选框
script：脚本
CSS
选择器
元素选择器
类选择器
ID选择器
属性选择器
伪类选择器
伪元素选择器
组合选择器
后代选择器
直接子元素选择器
兄弟选择器
⭐️盒模型
内容框（content box）
内边距（padding）
边框（border）
外边距（margin）
定位与布局
相对定位（relative）
绝对定位（absolute）
固定定位（fixed）
浮动（float）
弹性布局（flexbox）
网格布局（grid）
样式属性
尺寸和间距
width
height
margin
padding
字体与文本
font-family
font-size
color
text-align
text-decoration
背景与边框
background-color
background-image
border-color
border-width
border-radius
⭐️动画与过渡
animation
transition
表格样式
table-layout
border-collapse
th, td样式
响应式设计
媒体查询（@media）
伪类与伪元素
:hover
:active
:focus
::before
::after
CSS预处理器
Sass
Less
Stylus
响应式框架
Bootstrap
Foundation
JavaScript
数据类型
基本数据类型
字符串（String）
数字（Number）
布尔值（Boolean）
空值（Null）
未定义（Undefined）
引用数据类型
对象（Object）
数组（Array）
函数（Function）
正则表达式（RegExp）
日期（Date）
操作符
算术操作符
比较操作符
逻辑操作符
赋值操作符
条件（三元）操作符
typeof 操作符
控制流程
条件语句
if语句
switch语句
循环语句
for循环
while循环
do...while循环
函数
函数声明与函数表达式 -⭐️ 箭头函数 -⭐️ 作用域与闭包
回调函数 -⭐️ 高阶函数
对象
创建对象的多种方式
对象属性与方法
this 关键字
原型与原型链
数组操作
创建和初始化数组
数组遍历与操作
数组方法 - push、pop、shift、unshift
数组方法 - splice、slice、concat、join
数组方法 - map、filter、reduce -⭐️ 异步编程
回调函数
Promises
Async/Await
DOM 操作与事件处理
获取与修改元素
添加与删除元素
修改样式与属性
事件监听与处理 -⭐️ 模块化与工具库
CommonJS
ES6 模块化
第三方工具库（如 Lodash、Moment.js）
二、框架
vue
基础概念：
Vue 实例
模板语法
⭐️数据绑定
⭐️计算属性与侦听器
⭐️生命周期钩子
组件：
组件基础
单文件组件
父子组件通信
插槽
动态组件
指令：
v -bind
v -if / v -show
v -for
v -on
v -model
v -cloak
路由：
⭐️Vue Router
路由定义
动态路由和参数传递
嵌套路由
导航守卫
状态管理：
⭐️Vuex
定义和使用状态
Getter 和 Mutation
Action 和 Module
过渡与动画：
过渡基础
CSS 过渡
动态过渡
列表过渡
JS 过渡
服务端交互：
AJAX 请求
⭐️Axios 库
Vue Resource 库
WebSockets
测试和调试：
单元测试
E2E 测试
Vue DevTools
其他：
⭐️Mixins
插件
自定义指令
过滤器
SSR（服务端渲染）
react
⭐️SX
元素渲染
属性
条件渲染
列表渲染
事件处理
表单处理
组件
函数组件
类组件
生命周期
状态与属性
组件通信
父子组件通信
兄弟组件通信
跨层级通信
高阶组件
React Hooks
路由
react-router
路由配置
路由匹配
嵌套路由
跳转与导航
状态管理
Redux
Store
Action
Reducer
中间件
MobX
Observable
Computed
Action
异步数据请求
Fetch API
Axios
⭐️Redux Thunk
Redux Saga
样式
CSS Modules
Styled Components
CSS-in-JS
单元测试
Jest
Enzyme
三、计算机基础
计算机基础
算法和数据结构
时间 / 空间复杂度分析
算法：
排序算法
冒泡排序
插入排序
选择排序
快速排序
归并排序
查找算法
线性查找
二分查找
哈希查找
图算法
深度优先搜索（DFS）
广度优先搜索（BFS）
最短路径算法（Dijkstra、Floyd-Warshall）
最小生成树算法（Prim、Kruskal）
动态规划
贪心算法
回溯算法
分治算法
数据结构：
数组
链表
栈
队列
树
二叉树
二叉搜索树
平衡二叉树（AVL树、红黑树）
堆
B树和B+树
Trie树
图
有向图
无向图
加权图
散列表（哈希表）
堆（优先队列）
集合（集合运算）
字符串
布隆过滤器
并查集
计算机网络
OSI参考模型
物理层
数据链路层
网络层
传输层
会话层
表示层
应用层
TCP/IP协议族
IP协议
TCP协议
UDP协议
网络设备
网卡
集线器
交换机
路由器
网关
防火墙
网络地址
IP地址
IPv4地址
IPv6地址
子网掩码
网络前缀
网络协议
HTTP协议
HTTPS协议
FTP协议
SMTP协议
POP3协议
IMAP协议
DNS协议
网络安全
防火墙
VPN
加密与解密
传输层安全协议（TLS/SSL）
公钥基础设施（PKI）
跨站脚本攻击（XSS）
跨站请求伪造（CSRF）
网络拓扑
总线型拓扑
星型拓扑
环型拓扑
树型拓扑
网状拓扑
网络协议分析与调试
抓包工具（如Wireshark）
ping命令
tracert命令
nslookup命令
操作系统
进程和线程
进程调度
同步与互斥
死锁
内存管理
虚拟内存
分页机制
分段机制
文件系统
文件组织与访问
文件存储与管理
文件保护与安全
设备管理
I/O设备控制
中断处理
设备驱动程序
进程间通信（IPC）
共享内存
信号量
管道与消息队列
多处理器系统（多核处理器）
分布式系统
虚拟化技术
虚拟机
容器技术（Docker）
死锁处理算法
银行家算法
死锁检测与恢复
文件系统的一致性与完整性
设计模式
单例模式
代理模式
工厂模式
装饰者模式
观察者模式
策略模式
门面模式
Git 版本控制
Git基础
仓库（Repository）
提交（Commit）
分支（Branch）
标签（Tag）
远程仓库（Remote Repository）
常用命令
初始化仓库（git init）
克隆仓库（git clone）
添加文件（git add）
提交更改（git commit）
查看提交历史（git log）
查看文件状态（git status）
撤销更改（git checkout）
分支操作
创建分支（git branch）
切换分支（git checkout）
合并分支（git merge）
删除分支（git branch -d）
标签操作
创建标签（git tag）
查看标签（git tag）
删除标签（git tag -d）
远程操作
添加远程仓库（git remote add）
推送到远程仓库（git push）
从远程仓库拉取（git pull）
查看远程仓库（git remote -v）
高级操作
重写历史（git rebase）
修改提交消息（git commit --amend）
解决冲突（git merge、git rebase）
管理分支
切换到上一分支（git checkout -）
重命名分支（git branch -m）
强制推送分支（git push -f）
保留本地修改切换分支（git stash）
协作与远程仓库
Fork与Pull Request
解决冲突
Git工作流
四、前端工程化
描述：前端工程化是一种将前端开发过程中的模块化、自动化、规范化等技术手段应用于项目的方法，以提高开发效率、代码质量和团队协作能力的过程。
研发流程
版本管理
Git
分支管理
提交规范
协作流程
包管理器
npm
Yarn
package.json配置
包的安装与更新
模块化
CommonJS
ES Modules
模块打包工具
webpack
Rollup
Parcel
代码质量
代码风格
代码规范与Lint
代码测试与覆盖率
静态类型检查
构建工具
任务自动化
Gulp
Grunt
静态资源处理
编译器与预处理器
Babel
TypeScript
SASS/LESS/Stylus
⭐️性能优化
压缩与缓存
图片优化
资源懒加载
代码分割与懒加载
服务端渲染（SSR）
自动化部署与持续集成
CD/CI工具
Jenkins
Travis CI
GitLab CI/CD
自动化构建与部署
Docker容器化
监控与调试
日志收集
错误监控
性能分析与优化
浏览器调试工具
文档与协作
API文档生成
团队协作平台
项目文档管理
Wiki知识库
脚手架
描述：快速生成新项目的目录模板，提升开发效率和开发舒适性。
前端脚手架
定义
作用
常见前端脚手架
Create React App
Vue CLI
Angular CLI
Yeoman
工程初始化
项目结构
依赖管理
配置文件
开发环境
本地开发服务器
热重载
代码格式化与校验
Mock数据
打包与构建
资源压缩
代码编译
代码分割与懒加载
文件指纹与缓存
CSS预处理器
图片优化
发布与部署
环境配置
自动化部署
CDN加速
域名配置
插件与扩展
插件机制
自定义模板
扩展命令
项目管理与维护
版本控制
团队协作
文档生成
单元测试
性能优化
服务端渲染
前端服务端渲染
定义
优势
如何实现
SSR框架
Next.js
Nuxt.js
⭐️SSR与CSR对比
渲染方式
初始加载速度
SEO友好性
开发体验
⭐️SSR的工作原理
请求响应流程
服务器端渲染过程
客户端注水与激活
数据预取与传递
数据获取与管理
数据获取方式
API请求
数据预取
同构数据
数据管理与状态同步
Vuex
Redux
MobX
路由与导航
服务器端路由
客户端路由
路由状态同步
构建与部署
服务器端构建
客户端构建
部署环境配置
优化与缓存
数据缓存
HTML缓存
缓存更新机制
安全与权限
XSS攻击
CSRF攻击
权限验证
访问控制
兼容性与适配
不支持JavaScript的情况
移动端适配
日志与错误监控
日志记录
错误捕获与上报
SSR与前后端分离
架构选择
项目拆分
接口约定
微前端
描述：将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。
qiankun
single-spa
iframe
wujie
webpack5模块联邦
测试
测试框架
Jest
Enzyme
Puppeteer（Headless Browser）
Mocha
Jasmine
打包工具
⭐️Webpack
Rollup
Vite
CI / CD
描述：通过在应用开发阶段引入自动化来频繁向客户交付应用。 前端 CI/CD 知识点：
CI/CD 定义
CI/CD 好处
CI/CD 流程
代码管理
自动化构建
单元测试
集成测试
静态代码分析
打包与部署
自动化部署
CI/CD 工具
版本控制工具
构建工具
测试工具
静态代码分析工具
部署工具
CI/CD 配置
CI/CD 文件
基础设施配置
环境变量配置
CI/CD 持续集成实践
触发条件
代码检查
单元测试覆盖率
集成测试
构建成功通知
CI/CD 持续交付实践
部署环境
打包版本控制
自动化部署流程
部署成功通知
CI/CD 持续部署实践
灰度发布
蓝绿部署
流量切换
回滚机制
CI/CD 监控与优化
日志收集与分析
性能监控
代码覆盖率监控
持续改进与优化
CI/CD 安全策略
静态代码分析
自动化安全测试
安全漏洞扫描
访问权限管理
部署
Web 服务器
Nginx
描述：高性能的 HTTP 和反向代理 web 服务器。
Nginx 概述
定义
特点
应用场景
Nginx 架构
Master-Worker 架构
进程模型
事件驱动
Nginx 配置文件
主要配置文件
基本配置指令
HTTP 服务器配置
反向代理配置
负载均衡
轮询算法
IP 哈希算法
最小连接数算法
静态文件服务
静态文件缓存
文件压缩
断点续传
动态反向代理
FastCGI
uWSGI
SCGI
安全性配置
防止 DDOS 攻击
防止恶意请求
拦截 IP
HTTPS 配置
生成证书
配置 SSL/TLS
重定向 HTTP 到 HTTPS
日志与监控
访问日志
错误日志
监控和报警
性能优化
高可用性与故障恢复
多实例部署
热备份
故障转移
Nginx 与其他工具的结合
Nginx + Docker
Nginx + Kubernetes
Nginx + CDN
容器
Docker
描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。
Docker概述
定义
主要概念
优势
Docker架构
Docker引擎
镜像
容器
仓库
Docker基本命令
镜像操作
搜索镜像
拉取镜像
构建镜像
推送镜像
容器操作
创建容器
启动容器
停止容器
删除容器
网络操作
创建网络
连接容器到网络
断开容器与网络的连接
数据管理
数据卷
挂载主机目录
Docker Compose
定义和优势
编写docker-compose.yml文件
启动、停止和删除服务
环境变量和数据卷配置
Docker网络
默认网络模式
自定义网络模式
Bridge网络
Host网络
Docker存储
存储驱动
镜像层
容器数据卷
外部存储解决方案
Docker安全策略
用户命名空间隔离
访问控制和权限管理
安全镜像构建
容器隔离和限制资源使用
Docker和持续集成/持续交付
集成Docker到CI/CD流程
Docker镜像的版本控制与标签
构建和推送镜像到仓库
在部署环境中使用Docker部署应用
部署策略
静态文件托管
CDN
文件服务器
自动化构建与打包
npm scripts
Webpack
Gulp
代码版本管理
Git
分支管理
版本标签
环境划分
开发环境
测试环境
生产环境
持续集成与部署
持续集成工具
自动化测试
自动化部署
负载均衡与缓存
反向代理
Nginx
CDN缓存
前端服务监控
错误监控
性能监控
日志记录
回滚与版本控制
备份与恢复
版本回退
安全性与权限管理
防止常见攻击
权限控制
HTTPS
文档与沟通
项目文档
接口文档
团队沟通工具
监控告警
前端埋点
埋点类型
页面埋点
PV（页面访问量）
UV（独立访客数）
事件埋点
用户点击
表单提交
自定义事件
AJAX请求埋点
API请求
参数和返回值
数据采集
数据收集方式
JavaScript代码
SDK集成
数据接口调用
信息收集
URL
Referrer
浏览器信息
用户信息
数据存储与处理
存储方式
日志文件
数据库
实时数据流处理
数据分析
数据清洗
数据统计
数据可视化
埋点管理
埋点规划
定义埋点需求
制定埋点计划
埋点部署
埋点代码编写
埋点代码部署
埋点质量监控
数据准确性验证
异常监测和修复
隐私保护
匿名化处理
合规性审查
用户隐私权保护
错误监控
JavaScript错误
运行时错误
语法错误
引用错误
类型错误
异步错误
Promise错误
异步函数错误
跨域错误
资源加载错误
跨域请求被阻止
资源加载错误
图片加载错误
CSS加载错误
JavaScript文件加载错误
监控方式
window.onerror捕获
try...catch捕获
错误事件监听
错误信息上报
错误类型
错误堆栈
浏览器信息
数据处理与分析
错误统计
错误分类与归并
错误趋势分析
实时告警与通知
告警策略
错误次数阈值
错误率阈值
通知方式
邮件通知
短信通知
微信/钉钉机器人通知
性能监控
页面加载性能
DNS解析时间
TCP连接时间
SSL握手时间
发送请求时间
接收响应时间
页面渲染时间
资源加载性能
图片加载时间
CSS加载时间
JavaScript加载时间
字体加载时间
用户交互性能
首次输入延迟
滚动性能
点击响应时间
监控方式
Navigation Timing API
Resource Timing API
User Timing API
PerformanceObserver API
数据采集与上报
页面性能数据
资源性能数据
用户交互性能数据
数据处理与分析
性能指标计算
时间轴分析
异常检测
实时告警与通知
告警策略
页面加载时间超过阈值
资源加载时间超过阈值
用户交互性能低于阈值
通知方式
邮件通知
短信通知
微信/钉钉机器人通知
行为监控
用户行为追踪
页面浏览
点击事件
输入事件
滚动事件
鼠标移动事件
用户行为记录
页面路径
交互元素
表单数据
错误信息
用户设备信息
用户行为分析
用户行为漏斗
用户行为路径
热力图分析
AB测试分析
监控方式
JavaScript监听
埋点统计
用户代理信息
Cookie/Local Storage
数据采集与上报
用户行为数据
用户设备信息
错误日志
数据处理与分析
数据清洗与整理
用户行为转化率计算
用户行为路径分析
AB测试结果分析
实时告警与通知
告警策略
用户行为异常
错误率超过阈值
通知方式
邮件通知
短信通知
微信/钉钉机器人通知
六、前端优化与安全
描述：提高网站的性能和用户体验。
性能优化
⭐️性能指标
描述：用于衡量一个 Web 页面的性能。
FP（First Paint）
描述：从开始加载到浏览器首次绘制像素到屏幕上的时间，也就是页面在屏幕上首次发生视觉变化的时间。
FCP（First Contentful Paint）
描述：浏览器首次绘制来自 DOM 的内容的时间。
FMP（First Meaningful Paint）
描述：页面的主要内容绘制到屏幕上的时间。
FSP（First Screen Paint）
描述：页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容。
TTI（Time to Interactive）
描述：表示网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。
⭐️优化手段
压缩和合并资源
JavaScript文件压缩
CSS文件压缩
图片压缩
资源文件合并
缓存策略
HTTP缓存
强缓存
协商缓存
数据缓存
内存缓存
浏览器缓存
本地存储
延迟加载
图片懒加载
非关键资源延迟加载
动态加载组件/模块
DNS预解析
预解析DNS域名
减少重绘和回流
使用CSS Sprites
使用transform和opacity等CSS属性
避免频繁修改DOM结构
代码优化
减少HTTP请求数量
避免不必要的重复计算
使用节流和防抖等优化技术
前端缓存
CDN缓存
数据缓存
页面缓存
移动端优化
图片适应屏幕大小
使用响应式布局
使用硬件加速特性
服务端优化
启用Gzip压缩
使用CDN分发静态资源
后端接口性能优化
性能测试和监控
使用性能测试工具进行性能评估
监控页面性能指标
分析性能瓶颈并优化
离线包
预渲染
⭐️ssr
客户端渲染
用户体验
页面加载速度
合理的资源大小
使用缓存技术
延迟加载非关键资源
gzip压缩
响应式布局
适配不同屏幕尺寸
弹性布局
移动优先设计
导航和导航条
清晰且易于理解的导航结构
显眼且易于点击的导航按钮
状态指示器和当前位置提示
内容布局与可读性
规整的内容布局
易于阅读的字体样式和大小
足够的行距和间距
页面交互与反馈
优雅而平滑的动画效果
合适的过渡效果
及时的用户反馈和错误提示
表单设计与验证
简洁明了的表单布局
智能化的表单验证
友好的错误提示和帮助信息
无障碍访问
使用无障碍标准和技术
提供文本替代品和标题
键盘可访问性和焦点管理
多媒体内容和交互
优化的图像和视频加载
支持多种媒体格式
可交互的音频和视频控制
良好的错误处理
明确的错误提示信息
友好的错误处理页面
提供问题解决方案和帮助文档
⭐️安全
XSS（跨站脚本攻击）防护
CSRF（跨站请求伪造）防护
反爬虫
SQL 注入
DDoS
七、大前端
Node.JS
前端框架
Express.js
Koa.js
Next.js
Nuxt.js
路由与控制器
路由配置
路由中间件
控制器函数
请求处理与响应
数据存储
数据库
MongoDB
MySQL
PostgreSQL
Redis
ORM框架
Mongoose
Sequelize
TypeORM
数据访问层
模板引擎
EJS
Handlebars
Pug
静态文件处理
静态文件目录
静态文件中间件
CDN加速
用户认证与授权
用户登录与注册
Session管理
OAuth/OpenID
权限控制
API设计与开发
RESTful API
GraphQL
API版本控制
API文档生成
日志与错误处理
日志记录
错误处理中间件
异常捕获与处理
缓存与性能优化
HTTP缓存
数据缓存
页面渲染缓存
Gzip压缩
安全与防护
HTTPS与SSL证书
CSRF防护
XSS攻击防护
SQL注入防护
Helmet中间件
测试与部署
单元测试
集成测试
自动化测试
持续集成与部署
Docker容器化
Serverless
描述：Serverless是一种计算模型，它让开发者无需关注服务器的管理和维护，而可以专注于编写业务逻辑。在Serverless架构中，应用的功能被拆分为独立的函数，每个函数负责执行一个特定的任务或处理一个请求。这些函数在需要时被自动触发，而不需要事先预分配服务器资源。
什么是Serverless
概念和定义
原理和架构
优势和限制
Serverless框架
AWS Lambda
Microsoft Azure Functions
Google Cloud Functions
Serverless开发流程
函数编写与测试
函数打包与部署
环境变量和配置管理
事件驱动的函数执行
触发器和事件源
状态变化和数据流
异步与同步执行
无服务器基础架构
API网关与路由
存储和数据库
身份验证和权限管理
Serverless生态系统
第三方服务集成
构建和部署工具
监控和日志管理
成本优化与性能调优
函数冷启动优化
并发和资源调配
自动缩放和弹性伸缩
Serverless最佳实践
微服务化和领域驱动设计
高可用性和容错设计
安全和数据保护
移动应用
Hybrid
WebView
React Native
Flutter
桌面应用
Electron
NW.js
Proton Native
小程序
原生
WebView
跨端开发框架
⭐️uni-app
Taro
Flutter
Chameleon
Wepy
Rax
低代码
描述：低代码是一种软件开发方法，通过可视化界面和简化的编程模型，使开发者能够快速构建应用程序，降低开发复杂度并提高生产效率。
腾讯云低码
阿里金凤蝶
八、前端求职
简历
模拟面试
八股文
项目
数字化成果展示
难点
亮点
谈薪
九、软技能
沟通技巧
非技术人员沟通
同事之间沟通
跨团队沟通
提问技巧
协作与团队合作
团队沟通与协作工具
项目管理工具
团队角色与责任
冲突解决
分享与交流经验
时间管理
设置优先级
资源规划
目标设定与追踪
任务分解与估时
避免时间浪费
问题解决能力
调试与故障排除
分析与解决复杂问题
创造性思考
学习新技术与概念
持续改进与自我评估
技术文档与写作
技术文档编写
API 文档编写
博客写作与知识分享
清晰准确的表达能力
文档版本控制与维护
自我管理与职业发展
目标设定与规划
学习新技术与趋势
寻求反馈与学习机会
个人品牌塑造与推广
职业道德与职业素养
相关思维导图模板
树图思维导图提供 Day4数字化教学设计（上）彭深惠 在线思维导图免费制作，点击“编辑”按钮，可对 Day4数字化教学设计（上）彭深惠 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：b947c428ffbbe69bddb8345f81f21588
树图思维导图提供 糖类分类思维脑图 在线思维导图免费制作，点击“编辑”按钮，可对 糖类分类思维脑图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：a4fb083960178a1e77d1e149650b11fb
沪公网安备 31011502019485号
上海工商