前端学习路线——HTML/CSS/Javascript/Vue/React/计算机网络/设计模式/数据结构与算法/可视化

HTML

html&css&javascript经典面试题目（一） html&css&javascript经典面试题目（二）

html面试必备基础（一） html面试必备基础（二） ⭐️ 标签（各类标签）

块级元素（独占一行，可以设置宽度和高度，默认从新行开始）
行内元素（不独占一行，宽度和高度由内容决定：span|a|img）
行内块元素（既可在同一行显示，又可设置宽度和高度input|button）

⭐️ 属性（HTML5 特性）

图形绘制多媒体支持地理位置API（Cesium可视化引擎|视频*GIS）
WebSocket、Web Workers(传位姿|聊天室、多线程提高性能）

CSS

CSS知识梳理 ⭐⭐⭐ CSS常见面试题目（一）待完善 CSS常见面试题目（二） ⭐️ 引入方式

**优先级：**行内样式>内部样式表（style)>外部样式表（link）

⭐️ 选择器

通用选择器
标签选择器：如p标签
id 选择器:#
class 选择器：.
属性选择器:input[type="text"]
派生选择器（后代、子元素、相邻元素）
- 后代选择器:A B div p 位于div块中的p标签元素
相邻兄弟选择器:h1 + p 紧接在h1元素后出现的段落元素
通用兄弟选择器：h1 ~ p会选择所有位于h1元素后的p元素
子元素选择器:ul > li { list-style: none; }
伪选择器：p::first-line（伪元素）、a:hover（伪类）
选择器优先级：

⭐️ 可继承与不可继承属性

可继承（文本相关）
不可继承（盒子模型相关margin、padding、border、width、height等|布局相关display、position、z-index和overflow等）
强制继承inherit
px、em(字体相对于父元素）、rem(字体相对于html根元素）、vw、vh视窗的百分比，1vw相当于视窗的1%

⭐️ display布局

block/inline/inline-block（ 内联元素 / 块状元素）
flex/grid
none

⭐️⭐️定位、浮动与层叠

定位、浮动与层叠规则

⭐️ CSS|LESS|SCSS:

CSS|LESS|SCSS

⭐️ 文档流

标准流
浮动流（浮动与清除浮动）
定位流

⭐️⭐️⭐️ BFS&IFS BFS&IFS渲染

⭐️⭐️⭐️ 盒子模型在这里插入图片描述 ⭐️⭐️⭐️ 响应式布局

常见响应式布局方式

Javascript

Javascript知识框架（待完善）

Javascript系统学习系列 Javascript系统学习（一） Javascript系统学习（二） Javascript系统学习（三） Javascript系统学习（四） Object&Array&String JS基础知识（一） JS基础知识（二） JS基础面试题目

Javascript面试手撕系列 Javascript面试手撕系列（大全）

具体核心知识点：（一）

（三）

ES6核心内容 Proxy&Reflect JS高级-this指向及其改变、new关键字与原型链、异步、闭包和函数防抖与节流进阶面试题 待完善 Map&Set Javascript高级大纲 ES6面试题目

Javascript核心内容事件循环（一）事件循环（二）原型链闭包编译原理异步编程异步编程（二）

Javascript代码分析题目（一）待完善 前端代码分析面试题

异步：Promise系列、async&await、setTimeout等（核心为事件循环和Promise基本语法）
对象&作用域&this指代
闭包
原型链

Vue

Vue.js
│
├── 基础知识
│   ├── 组件
│   │   ├── 组件创建与使用
│   │   ├── 组件间通信
│   │   │   ├── Props
│   │   │   ├── Event Emit
│   │   │   └── $refs
│   │   ├── 插槽 (Slots)
│   │   │   ├── 默认插槽
│   │   │   └── 命名插槽
│   │   ├── 计算属性 (Computed)
│   │   └── 监听器 (Watchers)
│   ├── 数据绑定
│   │   ├── 双向绑定 (v-model)
│   │   ├── 属性绑定 (v-bind)
│   │   └── 事件绑定 (v-on)
│   ├── 条件与列表渲染
│   │   ├── 条件渲染 (v-if, v-else)
│   │   └── 列表渲染 (v-for)
│   ├── 指令
│   │   ├── v-show
│   │   ├── v-if / v-else / v-else-if
│   │   ├── v-for
│   │   ├── v-bind / v-on
│   │   └── 自定义指令
│   ├── 生命周期钩子
│   │   ├── mounted / created / beforeDestroy 等
│   │   └── Vue 3 生命周期的变化
│   └── 异常与错误处理
│       ├── errorCaptured
│       └── try-catch
│
├── Vue 3 新特性
│   ├── Composition API
│   │   ├── ref / reactive
│   │   ├── computed
│   │   ├── watch / watchEffect
│   │   └── setup()
│   ├── Teleport
│   ├── Fragment
│   ├── Suspense
│   └── 新的生命周期钩子（如 onBeforeMount, onUnmounted）
│
├── Vue 路由
│   ├── Vue Router 安装与配置
│   ├── 路由跳转
│   ├── 动态路由
│   ├── 嵌套路由
│   ├── 路由守卫
│   └── 路由懒加载
│
├── 状态管理
│   ├── Vuex（Vue 2.x）
│   │   ├── State / Mutations / Actions
│   │   ├── Getters
│   │   ├── Modules
│   │   └── 插件与中间件
│   ├── Pinia（Vue 3）
│   │   ├── Store 定义
│   │   ├── State / Actions / Getters
│   │   └── 插件和持久化
│   └── 全局状态管理与局部状态管理
│
├── TypeScript 支持
│   ├── Vue 3 支持 TypeScript
│   ├── 类型推导与类型声明
│   ├── 使用 `defineComponent` 和 `PropType`
│   └── TS 与 Vue 3 Composition API 的结合
│
├── 性能优化
│   ├── 计算属性与方法的选择
│   ├── 虚拟DOM和diff算法
│   ├── 懒加载与代码分割
│   ├── Vuex 性能优化
│   ├── 减少不必要的渲染
│   └── 使用异步组件
│
├── 插件系统
│   ├── Vue 插件机制
│   ├── 第三方插件的集成
│   └── 自定义插件的开发
│
└── 测试与调试
    ├── 单元测试（Vue Test Utils）
    ├── 快照测试
    ├── 端到端测试（Cypress）
    └── Vue DevTools

Vue进阶_Map Map （待查漏补缺）

Vue基础知识

Vue路由

Vue状态管理

Vue2
- Vuex&Pinia
- VueX
Vue3状态管理 Pinia

Vue3新特性

TypeScript 支持

Vue高级&性能优化（待吸收）

虚拟DOM和diff算法（待吸收） Diff
Vue核心解读
渲染过程源码解析（待吸收）Vue2源码解读
Vue源码巧妙设计之处
双向数据绑定双向数据绑定解读
Vue渲染函数 Vue渲染函数
响应式操作与nextTick
MVVM
性能优化篇
服务端渲染SSR 待吸收 项目优化&首页提升

测试、调试与部署

构建工具 Vue&Vite Vite
Eslint_语法检查
项目部署Nginx部署前端项目
Vue项目与浏览器的兼容性分析 Vue项目与IE浏览器的兼容性分析(Vue|ElementUI)

React

基础

React 知识框架图：

+---------------------+
|     React 基础      |
+---------------------+
        |
        |--- JSX语法
        |--- 函数组件与类组件
        |--- 渲染机制（虚拟DOM、渲染流程）
        |--- 事件处理（onClick, onChange）
        |--- 条件渲染与列表渲染
        |--- 受控组件与非受控组件
        |--- 基本的组件通信（props, state）
        |
+---------------------+
|     React Hooks     |
+---------------------+
        |
        |--- useState
        |--- useEffect
        |--- useContext
        |--- useRef
        |--- useReducer
        |--- useCallback
        |--- useMemo
        |
+---------------------+
|     React 路由      |
+---------------------+
        |
        |--- React Router (v6)
        |--- 路由配置（Route, Switch, Link）
        |--- 嵌套路由与动态路由
        |--- 重定向与路由守卫（`待完善`）
        |
+---------------------+
|    组件间通信       |
+---------------------+
        |
        |--- 父子组件通信（props）
        |--- 子父组件通信（通过回调函数传递数据）
        |--- Context API（跨层级共享状态）
        |--- 自定义Hooks（共享逻辑）
        |
+---------------------+
|     状态管理       |
+---------------------+
        |
        |--- useState / useReducer（局部状态）
        |--- Redux（全局状态管理）
        |--- Redux Toolkit
        |--- MobX （`待完善`）
        |
+---------------------+
|   性能优化与调试    |
+---------------------+
        |
        |--- React.memo
        |--- useMemo
        |--- useCallback
        |--- shouldComponentUpdate
        |--- React Profiler
        |--- 懒加载与代码分割（React.lazy & Suspense）
        |
+---------------------+
|     高级功能       |
+---------------------+
        |
        |--- 动态导入（React.lazy）
        |--- Suspense与错误边界
        |--- React Portals
        |--- HOC（高阶组件）
        |--- Render Props
        |--- 自定义Hooks
        |--- Context API优化
        |
+---------------------+
|     测试与部署     |
+---------------------+
        |
        |--- 单元测试（Jest, React Testing Library）
        |--- 快照测试（Snapshot Testing）
        |--- 端到端测试（Cypress）
        |--- Webpack与Babel配置
        |--- CI/CD与自动化部署
        |
+---------------------+
|   配置与工具链     |
+---------------------+
        |
        |--- Webpack
        |--- Babel
        |--- ESLint / Prettier
        |--- Create React App (CRA)
        |--- Next.js / Gatsby
        |

React基础：React基础 React Hooks： useState、useReducer&useRef

useEffect 高级Hooks React状态管理：（MobX待完善） React状态管理（一） Redux（一） Redux（二） Redux&Redux-thunk React路由： React Router __React Router 1 _ React组件通信待补充：React组件通信性能优化和测试待补充 ：相关Hooks React生命周期待完善：生命周期