军哥前端学习脑图思维导图

前端基础，框架，计算机基础等相关内容分解

树图思维导图提供《军哥前端学习脑图》在线思维导图免费制作，点击“编辑”按钮，可对《军哥前端学习脑图》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：3302730546e4088c32f229e1c696f919

思维导图大纲

前言

1. 这是一份前端知识点大梳理和汇总

2. 学习最重要的就是结构化，将知识联系到一起，并分层次。经常看脑图是非常棒的学习方式，因为它高度压缩知识点，并建立知识点的相互关联。

3. 这个脑图适合小白学习巩固知识、面试复习、进阶的人寻找知识点。

4. 前端基础部分与框架是找工作必须的

5. 计算机基础是程序员必备的

6. 前端工程化、前端优化与安全是进阶内容

7. ⭐️ 是面试高频提薪重点

一、前端基础

基本语法 HTML标签：

ul/ol：无序/有序列表

textarea：文本域

checkbox：复选框

内容框（content box）

内边距（padding）

相对定位（relative）

绝对定位（absolute）

弹性布局（flexbox）

text-decoration

background-color

background-image

border-color

border-width

border-radius

table-layout

border-collapse

媒体查询（@media）

布尔值（Boolean）

未定义（Undefined）

函数（Function）

正则表达式（RegExp）

do...while循环

函数声明与函数表达式 -⭐️ 箭头函数 -⭐️ 作用域与闭包

回调函数 -⭐️ 高阶函数

数组方法 - push、pop、shift、unshift

数组方法 - splice、slice、concat、join

数组方法 - map、filter、reduce -⭐️ 异步编程

事件监听与处理 -⭐️ 模块化与工具库

第三方工具库（如 Lodash、Moment.js）

二、框架

v -if / v -show

⭐️Vue Router

Getter 和 Mutation

Action 和 Module

Vue Resource 库

Vue DevTools

react-router

⭐️Redux Thunk

Styled Components

三、计算机基础

时间 / 空间复杂度分析

最短路径算法（Dijkstra、Floyd-Warshall）

最小生成树算法（Prim、Kruskal）

平衡二叉树（AVL树、红黑树）

传输层安全协议（TLS/SSL）

跨站请求伪造（CSRF）

抓包工具（如Wireshark）

多处理器系统（多核处理器）

容器技术（Docker）

文件系统的一致性与完整性

仓库（Repository）

远程仓库（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

四、前端工程化

描述：前端工程化是一种将前端开发过程中的模块化、自动化、规范化等技术手段应用于项目的方法，以提高开发效率、代码质量和团队协作能力的过程。

package.json配置

SASS/LESS/Stylus

GitLab CI/CD

描述：快速生成新项目的目录模板，提升开发效率和开发舒适性。

Create React App

不支持JavaScript的情况

描述：将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。

webpack5模块联邦

Puppeteer（Headless Browser）

描述：通过在应用开发阶段引入自动化来频繁向客户交付应用。前端 CI/CD 知识点：

CI/CD 持续集成实践

CI/CD 持续交付实践

CI/CD 持续部署实践

描述：高性能的 HTTP 和反向代理 web 服务器。

Master-Worker 架构

重定向 HTTP 到 HTTPS

Nginx 与其他工具的结合

Nginx + Docker

Nginx + Kubernetes

描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。

Docker Compose

编写docker-compose.yml文件

Docker和持续集成/持续交付

集成Docker到CI/CD流程

Docker镜像的版本控制与标签

在部署环境中使用Docker部署应用

JavaScript代码

JavaScript错误

JavaScript文件加载错误

window.onerror捕获

try...catch捕获

JavaScript加载时间

Navigation Timing API

Resource Timing API

User Timing API

PerformanceObserver API

JavaScript监听

Cookie/Local Storage

六、前端优化与安全

描述：提高网站的性能和用户体验。

描述：用于衡量一个 Web 页面的性能。

FP（First Paint）

描述：从开始加载到浏览器首次绘制像素到屏幕上的时间，也就是页面在屏幕上首次发生视觉变化的时间。

FCP（First Contentful Paint）

描述：浏览器首次绘制来自 DOM 的内容的时间。

FMP（First Meaningful Paint）

描述：页面的主要内容绘制到屏幕上的时间。

FSP（First Screen Paint）

描述：页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容。

TTI（Time to Interactive）

描述：表示网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。

JavaScript文件压缩

使用CSS Sprites

使用transform和opacity等CSS属性

使用节流和防抖等优化技术

使用性能测试工具进行性能评估

清晰且易于理解的导航结构

显眼且易于点击的导航按钮

状态指示器和当前位置提示

易于阅读的字体样式和大小

及时的用户反馈和错误提示

友好的错误提示和帮助信息

提供问题解决方案和帮助文档

XSS（跨站脚本攻击）防护

CSRF（跨站请求伪造）防护

七、大前端

OAuth/OpenID

描述：Serverless是一种计算模型，它让开发者无需关注服务器的管理和维护，而可以专注于编写业务逻辑。在Serverless架构中，应用的功能被拆分为独立的函数，每个函数负责执行一个特定的任务或处理一个请求。这些函数在需要时被自动触发，而不需要事先预分配服务器资源。

什么是Serverless

Serverless框架

Microsoft Azure Functions

Google Cloud Functions

Serverless开发流程

Serverless生态系统

Serverless最佳实践

React Native

Proton Native

描述：低代码是一种软件开发方法，通过可视化界面和简化的编程模型，使开发者能够快速构建应用程序，降低开发复杂度并提高生产效率。

八、前端求职

九、软技能