前端的思维导图

# 前端思维导图

## 一、基础知识

### 1.  HTML

*   **语义化:**
        *   语义化标签 (section, article, nav, aside, header, footer)
        *   SEO 优化
        *   可访问性 (Accessibility)
    *   **DOCTYPE声明:**
        *   HTML5 doctype (<!DOCTYPE html>)
    *   **标签属性:**
        *   通用属性 (class, id, style, title, data-*)
        *   事件属性 (onclick, onload, onmouseover等)
        *   输入类型属性 (type, placeholder, value等)
    *   **表单:**
        *   form标签
        *   input 标签 (text, password, radio, checkbox, submit, button, file 等)
        *   select, textarea 标签
    *   **多媒体:**
        *   img 标签
        *   video 标签
        *   audio 标签
        *   SVG
    *   **元数据:**
        *   meta 标签 (charset, viewport, description, keywords)
        *   link 标签 (stylesheet, icon)

### 2.  CSS

*   **选择器:**
        *   元素选择器
        *   类选择器
        *   ID 选择器
        *   属性选择器
        *   伪类选择器 (:hover, :active, :focus, :nth-child)
        *   伪元素选择器 (::before, ::after)
        *   组合选择器 (后代选择器, 子选择器, 相邻兄弟选择器, 通用兄弟选择器)
    *   **盒模型:**
        *   内容 (content)
        *   内边距 (padding)
        *   边框 (border)
        *   外边距 (margin)
        *   box-sizing (content-box, border-box)
    *   **布局:**
        *   Normal Flow (常规流)
        *   Flexbox (灵活盒模型)
            *   flex-direction (row, column, row-reverse, column-reverse)
            *   justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly)
            *   align-items (flex-start, flex-end, center, stretch, baseline)
            *   align-content (flex-start, flex-end, center, space-between, space-around, stretch)
        *   Grid (网格布局)
            *   grid-template-columns
            *   grid-template-rows
            *   grid-gap
            *   grid-area
        *   Position (定位)
            *   static
            *   relative
            *   absolute
            *   fixed
            *   sticky
    *   **文本:**
        *   字体 (font-family, font-size, font-weight, font-style)
        *   颜色 (color)
        *   文本对齐 (text-align)
        *   行高 (line-height)
        *   文本阴影 (text-shadow)
    *   **背景:**
        *   背景颜色 (background-color)
        *   背景图片 (background-image)
        *   背景重复 (background-repeat)
        *   背景位置 (background-position)
        *   背景大小 (background-size)
    *   **动画:**
        *   Transition (过渡)
        *   Animation (动画)
        *   @keyframes
    *   **响应式设计:**
        *   Media Queries (@media)
        *   Flexible Images (弹性图片)
        *   Viewport Meta Tag

### 3.  JavaScript

*   **基础语法:**
        *   变量 (var, let, const)
        *   数据类型 (Number, String, Boolean, Null, Undefined, Symbol, BigInt, Object)
        *   运算符 (算术运算符, 比较运算符, 逻辑运算符, 赋值运算符)
        *   控制语句 (if, else, switch, for, while, do...while)
        *   函数 (function, arrow function)
        *   作用域 (Scope)
        *   闭包 (Closure)
        *   this 指向
        *   原型 (Prototype) 和 原型链 (Prototype Chain)
    *   **DOM 操作:**
        *   获取元素 (getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll)
        *   修改元素 (innerHTML, textContent, setAttribute, removeAttribute)
        *   创建元素 (createElement)
        *   添加元素 (appendChild, insertBefore)
        *   删除元素 (removeChild)
    *   **事件处理:**
        *   事件监听 (addEventListener, removeEventListener)
        *   事件对象 (event)
        *   事件类型 (click, mouseover, keydown, submit, load)
        *   事件委托 (Event Delegation)
    *   **异步编程:**
        *   回调函数 (Callback)
        *   Promise
        *   async/await
    *   **ES6+ 新特性:**
        *   let 和 const
        *   箭头函数
        *   模板字符串
        *   解构赋值
        *   扩展运算符
        *   class
        *   模块 (import, export)
    *   **数据结构与算法:**
        *   数组 (Array)
        *   对象 (Object)
        *   链表 (Linked List)
        *   栈 (Stack)
        *   队列 (Queue)
        *   树 (Tree)
        *   图 (Graph)
        *   排序算法 (冒泡排序, 选择排序, 插入排序, 快速排序, 归并排序)
        *   搜索算法 (线性搜索, 二分搜索)

## 二、前端框架与库

### 1.  React

*   **核心概念:**
        *   JSX
        *   组件 (Component)
        *   Props
        *   State
        *   生命周期 (Lifecycle)
        *   虚拟 DOM (Virtual DOM)
    *   **Hooks:**
        *   useState
        *   useEffect
        *   useContext
        *   useRef
        *   useReducer
        *   useCallback
        *   useMemo
        *   自定义 Hooks
    *   **路由:**
        *   React Router
    *   **状态管理:**
        *   Redux
        *   Context API
        *   MobX
        *   Zustand
    *   **性能优化:**
        *   PureComponent
        *   React.memo
        *   代码分割 (Code Splitting)
        *   懒加载 (Lazy Loading)
    *   **测试:**
        *   Jest
        *   React Testing Library

### 2.  Vue

*   **核心概念:**
        *   模板语法 (Template Syntax)
        *   组件 (Component)
        *   Props
        *   Data
        *   Computed Properties
        *   Watchers
        *   指令 (Directives)
        *   生命周期 (Lifecycle)
    *   **Vue CLI:**
        *   项目初始化
        *   插件 (Plugins)
    *   **路由:**
        *   Vue Router
    *   **状态管理:**
        *   Vuex
        *   Pinia
    *   **Composition API (Vue 3):**
        *   setup()
        *   ref
        *   reactive
        *   computed
        *   watch
    *   **性能优化:**
        *   Keep-Alive
        *   异步组件 (Async Components)
    *   **测试:**
        *   Jest
        *   Vue Test Utils

### 3.  Angular

*   **核心概念:**
        *   TypeScript
        *   组件 (Component)
        *   模板 (Template)
        *   模块 (Module)
        *   服务 (Service)
        *   依赖注入 (Dependency Injection)
        *   RxJS (响应式编程)
    *   **Angular CLI:**
        *   项目初始化
        *   组件生成
        *   服务生成
    *   **路由:**
        *   Angular Router
    *   **状态管理:**
        *   NgRx
        *   Akita
    *   **表单:**
        *   模板驱动表单 (Template-driven Forms)
        *   响应式表单 (Reactive Forms)
    *   **HTTP:**
        *   HttpClient
    *   **测试:**
        *   Jasmine
        *   Karma

## 三、构建工具与流程

### 1.  Webpack

*   **核心概念:**
        *   Entry (入口)
        *   Output (输出)
        *   Loaders (加载器)
        *   Plugins (插件)
        *   Module Bundler (模块打包器)
    *   **配置:**
        *   webpack.config.js
    *   **常用 Loaders:**
        *   babel-loader (JavaScript 编译)
        *   css-loader (CSS 编译)
        *   style-loader (将 CSS 插入到 DOM)
        *   file-loader (处理文件资源)
        *   url-loader (处理文件资源，可以内联小文件)
    *   **常用 Plugins:**
        *   HtmlWebpackPlugin (生成 HTML 文件)
        *   MiniCssExtractPlugin (提取 CSS 到单独文件)
        *   CleanWebpackPlugin (清理构建目录)
    *   **优化:**
        *   代码分割 (Code Splitting)
        *   Tree Shaking (摇树优化)
        *   缓存 (Caching)

### 2.  Vite

*   **核心概念:**
        *   基于 ES modules
        *   No Bundle (无需打包)
        *   热模块替换 (HMR)
    *   **配置:**
        *   vite.config.js
    *   **插件:**
        *   Rollup 插件兼容
    *   **优势:**
        *   开发速度快
        *   生产环境优化

### 3.  Parcel

*   **零配置:**
        *   自动处理依赖
        *   自动转换代码
    *   **优势:**
        *   简单易用

### 4.  自动化构建工具：

*   Gulp
    *   Grunt

## 四、前端安全

### 1.  XSS (跨站脚本攻击)

*   **预防:**
        *   输入验证 (Input Validation)
        *   输出编码 (Output Encoding)
        *   内容安全策略 (CSP)
        *   使用框架的 XSS 防护机制

### 2.  CSRF (跨站请求伪造)

*   **预防:**
        *   验证码
        *   Token 验证 (CSRF Token)
        *   SameSite Cookie 属性

### 3.  SQL 注入

*   **预防:**
        *   参数化查询 (Parameterized Queries)
        *   输入验证

### 4.  其他安全问题

*   HTTPS
    *   敏感信息加密
    *   定期安全扫描

## 五、前端性能优化

### 1.  加载优化

*   代码压缩 (Minification)
    *   图片优化 (Image Optimization)
    *   CDN
    *   HTTP 缓存
    *   懒加载 (Lazy Loading)
    *   预加载 (Preloading)
    *   预渲染 (Prerendering)
    *   Service Worker

### 2.  渲染优化

*   减少 DOM 操作
    *   避免重绘 (Repaint) 和 重排 (Reflow)
    *   使用 CSS Sprites
    *   Virtual DOM 优化 (React, Vue)
    *   Web Workers (将计算密集型任务转移到后台线程)

### 3.  代码优化

*   避免内存泄漏
    *   优化算法
    *   代码分割 (Code Splitting)
    *   Tree Shaking (摇树优化)

## 六、前端测试

### 1.  单元测试 (Unit Testing)

*   测试单个组件或函数
    *   常用框架: Jest, Mocha, Jasmine

### 2.  集成测试 (Integration Testing)

*   测试多个组件或模块之间的交互
    *   常用框架: Cypress, Puppeteer

### 3.  端到端测试 (E2E Testing)

*   测试整个应用程序
    *   常用框架: Selenium, Cypress, Puppeteer

### 4.  测试驱动开发 (TDD)

*   先编写测试用例，再编写代码

## 七、前端工程化

### 1.  代码规范

*   ESLint (JavaScript)
    *   Stylelint (CSS)
    *   Prettier (代码格式化)
    *   EditorConfig (统一编辑器配置)

### 2.  版本控制

*   Git
    *   GitHub, GitLab, Bitbucket

### 3.  持续集成/持续部署 (CI/CD)

*   Jenkins
    *   Travis CI
    *   CircleCI
    *   GitHub Actions

### 4.  模块化

*   CommonJS
    *   AMD
    *   ES Modules

## 八、前端未来发展趋势

### 1.  WebAssembly
### 2.  Serverless
### 3.  PWA (Progressive Web Apps)
### 4.  低代码/零代码平台
### 5.  人工智能 (AI) 在前端的应用
### 6.  Web3 和 区块链

前端思维导图

一、基础知识

1. HTML

*   **语义化:**
    *   语义化标签 (section, article, nav, aside, header, footer)
    *   SEO 优化
    *   可访问性 (Accessibility)
*   **DOCTYPE声明:**
    *   HTML5 doctype (<!DOCTYPE html>)
*   **标签属性:**
    *   通用属性 (class, id, style, title, data-*)
    *   事件属性 (onclick, onload, onmouseover等)
    *   输入类型属性 (type, placeholder, value等)
*   **表单:**
    *   form标签
    *   input 标签 (text, password, radio, checkbox, submit, button, file 等)
    *   select, textarea 标签
*   **多媒体:**
    *   img 标签
    *   video 标签
    *   audio 标签
    *   SVG
*   **元数据:**
    *   meta 标签 (charset, viewport, description, keywords)
    *   link 标签 (stylesheet, icon)

2. CSS

*   **选择器:**
    *   元素选择器
    *   类选择器
    *   ID 选择器
    *   属性选择器
    *   伪类选择器 (:hover, :active, :focus, :nth-child)
    *   伪元素选择器 (::before, ::after)
    *   组合选择器 (后代选择器, 子选择器, 相邻兄弟选择器, 通用兄弟选择器)
*   **盒模型:**
    *   内容 (content)
    *   内边距 (padding)
    *   边框 (border)
    *   外边距 (margin)
    *   box-sizing (content-box, border-box)
*   **布局:**
    *   Normal Flow (常规流)
    *   Flexbox (灵活盒模型)
        *   flex-direction (row, column, row-reverse, column-reverse)
        *   justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly)
        *   align-items (flex-start, flex-end, center, stretch, baseline)
        *   align-content (flex-start, flex-end, center, space-between, space-around, stretch)
    *   Grid (网格布局)
        *   grid-template-columns
        *   grid-template-rows
        *   grid-gap
        *   grid-area
    *   Position (定位)
        *   static
        *   relative
        *   absolute
        *   fixed
        *   sticky
*   **文本:**
    *   字体 (font-family, font-size, font-weight, font-style)
    *   颜色 (color)
    *   文本对齐 (text-align)
    *   行高 (line-height)
    *   文本阴影 (text-shadow)
*   **背景:**
    *   背景颜色 (background-color)
    *   背景图片 (background-image)
    *   背景重复 (background-repeat)
    *   背景位置 (background-position)
    *   背景大小 (background-size)
*   **动画:**
    *   Transition (过渡)
    *   Animation (动画)
    *   @keyframes
*   **响应式设计:**
    *   Media Queries (@media)
    *   Flexible Images (弹性图片)
    *   Viewport Meta Tag

3. JavaScript

*   **基础语法:**
    *   变量 (var, let, const)
    *   数据类型 (Number, String, Boolean, Null, Undefined, Symbol, BigInt, Object)
    *   运算符 (算术运算符, 比较运算符, 逻辑运算符, 赋值运算符)
    *   控制语句 (if, else, switch, for, while, do...while)
    *   函数 (function, arrow function)
    *   作用域 (Scope)
    *   闭包 (Closure)
    *   this 指向
    *   原型 (Prototype) 和 原型链 (Prototype Chain)
*   **DOM 操作:**
    *   获取元素 (getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll)
    *   修改元素 (innerHTML, textContent, setAttribute, removeAttribute)
    *   创建元素 (createElement)
    *   添加元素 (appendChild, insertBefore)
    *   删除元素 (removeChild)
*   **事件处理:**
    *   事件监听 (addEventListener, removeEventListener)
    *   事件对象 (event)
    *   事件类型 (click, mouseover, keydown, submit, load)
    *   事件委托 (Event Delegation)
*   **异步编程:**
    *   回调函数 (Callback)
    *   Promise
    *   async/await
*   **ES6+ 新特性:**
    *   let 和 const
    *   箭头函数
    *   模板字符串
    *   解构赋值
    *   扩展运算符
    *   class
    *   模块 (import, export)
*   **数据结构与算法:**
    *   数组 (Array)
    *   对象 (Object)
    *   链表 (Linked List)
    *   栈 (Stack)
    *   队列 (Queue)
    *   树 (Tree)
    *   图 (Graph)
    *   排序算法 (冒泡排序, 选择排序, 插入排序, 快速排序, 归并排序)
    *   搜索算法 (线性搜索, 二分搜索)

二、前端框架与库

1. React

*   **核心概念:**
    *   JSX
    *   组件 (Component)
    *   Props
    *   State
    *   生命周期 (Lifecycle)
    *   虚拟 DOM (Virtual DOM)
*   **Hooks:**
    *   useState
    *   useEffect
    *   useContext
    *   useRef
    *   useReducer
    *   useCallback
    *   useMemo
    *   自定义 Hooks
*   **路由:**
    *   React Router
*   **状态管理:**
    *   Redux
    *   Context API
    *   MobX
    *   Zustand
*   **性能优化:**
    *   PureComponent
    *   React.memo
    *   代码分割 (Code Splitting)
    *   懒加载 (Lazy Loading)
*   **测试:**
    *   Jest
    *   React Testing Library

2. Vue

*   **核心概念:**
    *   模板语法 (Template Syntax)
    *   组件 (Component)
    *   Props
    *   Data
    *   Computed Properties
    *   Watchers
    *   指令 (Directives)
    *   生命周期 (Lifecycle)
*   **Vue CLI:**
    *   项目初始化
    *   插件 (Plugins)
*   **路由:**
    *   Vue Router
*   **状态管理:**
    *   Vuex
    *   Pinia
*   **Composition API (Vue 3):**
    *   setup()
    *   ref
    *   reactive
    *   computed
    *   watch
*   **性能优化:**
    *   Keep-Alive
    *   异步组件 (Async Components)
*   **测试:**
    *   Jest
    *   Vue Test Utils

3. Angular

*   **核心概念:**
    *   TypeScript
    *   组件 (Component)
    *   模板 (Template)
    *   模块 (Module)
    *   服务 (Service)
    *   依赖注入 (Dependency Injection)
    *   RxJS (响应式编程)
*   **Angular CLI:**
    *   项目初始化
    *   组件生成
    *   服务生成
*   **路由:**
    *   Angular Router
*   **状态管理:**
    *   NgRx
    *   Akita
*   **表单:**
    *   模板驱动表单 (Template-driven Forms)
    *   响应式表单 (Reactive Forms)
*   **HTTP:**
    *   HttpClient
*   **测试:**
    *   Jasmine
    *   Karma

三、构建工具与流程

1. Webpack

*   **核心概念:**
    *   Entry (入口)
    *   Output (输出)
    *   Loaders (加载器)
    *   Plugins (插件)
    *   Module Bundler (模块打包器)
*   **配置:**
    *   webpack.config.js
*   **常用 Loaders:**
    *   babel-loader (JavaScript 编译)
    *   css-loader (CSS 编译)
    *   style-loader (将 CSS 插入到 DOM)
    *   file-loader (处理文件资源)
    *   url-loader (处理文件资源，可以内联小文件)
*   **常用 Plugins:**
    *   HtmlWebpackPlugin (生成 HTML 文件)
    *   MiniCssExtractPlugin (提取 CSS 到单独文件)
    *   CleanWebpackPlugin (清理构建目录)
*   **优化:**
    *   代码分割 (Code Splitting)
    *   Tree Shaking (摇树优化)
    *   缓存 (Caching)

2. Vite

*   **核心概念:**
    *   基于 ES modules
    *   No Bundle (无需打包)
    *   热模块替换 (HMR)
*   **配置:**
    *   vite.config.js
*   **插件:**
    *   Rollup 插件兼容
*   **优势:**
    *   开发速度快
    *   生产环境优化

3. Parcel

*   **零配置:**
    *   自动处理依赖
    *   自动转换代码
*   **优势:**
    *   简单易用

4. 自动化构建工具：

*   Gulp
*   Grunt

四、前端安全

1. XSS (跨站脚本攻击)

*   **预防:**
    *   输入验证 (Input Validation)
    *   输出编码 (Output Encoding)
    *   内容安全策略 (CSP)
    *   使用框架的 XSS 防护机制

2. CSRF (跨站请求伪造)

*   **预防:**
    *   验证码
    *   Token 验证 (CSRF Token)
    *   SameSite Cookie 属性

3. SQL 注入

*   **预防:**
    *   参数化查询 (Parameterized Queries)
    *   输入验证

4. 其他安全问题

*   HTTPS
*   敏感信息加密
*   定期安全扫描

五、前端性能优化

1. 加载优化

*   代码压缩 (Minification)
*   图片优化 (Image Optimization)
*   CDN
*   HTTP 缓存
*   懒加载 (Lazy Loading)
*   预加载 (Preloading)
*   预渲染 (Prerendering)
*   Service Worker

2. 渲染优化

*   减少 DOM 操作
*   避免重绘 (Repaint) 和 重排 (Reflow)
*   使用 CSS Sprites
*   Virtual DOM 优化 (React, Vue)
*   Web Workers (将计算密集型任务转移到后台线程)

3. 代码优化

*   避免内存泄漏
*   优化算法
*   代码分割 (Code Splitting)
*   Tree Shaking (摇树优化)

六、前端测试

1. 单元测试 (Unit Testing)

*   测试单个组件或函数
*   常用框架: Jest, Mocha, Jasmine

2. 集成测试 (Integration Testing)

*   测试多个组件或模块之间的交互
*   常用框架: Cypress, Puppeteer

3. 端到端测试 (E2E Testing)

*   测试整个应用程序
*   常用框架: Selenium, Cypress, Puppeteer

4. 测试驱动开发 (TDD)

*   先编写测试用例，再编写代码

七、前端工程化

1. 代码规范

*   ESLint (JavaScript)
*   Stylelint (CSS)
*   Prettier (代码格式化)
*   EditorConfig (统一编辑器配置)

2. 版本控制

*   Git
*   GitHub, GitLab, Bitbucket

3. 持续集成/持续部署 (CI/CD)

*   Jenkins
*   Travis CI
*   CircleCI
*   GitHub Actions

4. 模块化

*   CommonJS
*   AMD
*   ES Modules