HTML CSS

• HTML

• 元素 Elements

• DOM - Document Object Model

  • 事件和事件绑定的底层机制

• BOM - Browser Object Model

• CSS

  • 选择器

  • CSSOM

  • 布局

    • 正常布局流(Normal flow)

    • display 属性(The display property)

    • 弹性盒子(Flexbox)

    • Grid 布局(Grid)

    • 浮动布局(Floats)

    • 定位(Positioning)

    • 表格布局(Table layout)

    • 多列布局(Multiple-column layout)

    • 盒模型与盒尺寸

  • 交互

  • 绘制

  • 预处理器： Sass | Less

JavaScript / TypeScript

• 函数
  • underscore 源码分析
  • compose 函数和 pipe 函数
  • 高阶函数
  • 防抖和节流
  • 深拷贝和浅拷贝
• 异步编程
  • 理解异步
  • Event Loop 机制（浏览器 / Node.js）
  • 异步编程方法
    • 回调函数
    • 发布/订阅
    • 深入理解 promise
    • generator 函数及异步应用
  • 深入理解 async 和 await
  • 处理异步的框架 RxJS
  • Web Worker 的多线程机制
• 模块加载
  • 模块加载方案
  • 闭包
  • 资源定位 异步加载
  • 解析依赖
  • WebComponent
• V8 内存管理
  • JavaScript 中的垃圾收集、内存管理
  • V8 垃圾回收机制分类
  • 引用计数、标记清除、标记整理和增量标记
• RegExp 正则表达式
• TypeScript
  • 开发环境搭建
  • TypeScript 安装和编译
  • 数据类型、函数、类、接口、泛型
  • 结构类型系统、类型变换
  • 模块 VS 命名空间
  • 类型声明、声明文件
  • Typescript + React 集成开发
  • Typescript 工程化

Vue

• Vue 基础
  • 组件间通信、EventBus 应用
  • 组件 slot 用法
  • 双向绑定与单向数据流
  • 组件化设计
  • 公共组件封装
  • 上拉刷新、下拉加载、图片懒加载
  • axios 数据获取/应用拦截器
• Vue-Router（路由控制）
  • vue router 的基础应用
  • 编程式导航、 命名视图、 路由重定向
  • 路由守卫、 路由懒加载、 路由元信息、路由监听
  • 实现动态权限
  • 菜单、按钮及权限认证、登录权限
  • 路由动画配置
• Vuex （状态管理）
  • Vuex 基础
  • 数据持久化
• Vue CLI （脚手架工具）
  • Vue CLI 4.0 项目搭建
  • 如何 Mock 后台数据
  • 项目布署和上线
• Vue3.0 新特性
• Vue SSR 服务端渲染
  • SSR 原理和设计理念
  • 集成路由及代码分割
  • 集成 KOA 实现服务器端渲染
  • 集成 VueSSR 和 Vuex 实现数据同步
  • Webpack 构建 Vue SSR 项目
  • 路由懒加载
  • Vue 骨架屏、页面预渲染
  • Vue-devtools 开发插件
  • Nuxt 实战(Webhooks 生成器项目)
  • Vue 动画原理
• Vue 实践
  • 动画切换效果
  • 基于 JWT 的注册登录权限管理
  • 从零封装系列（模态窗口组件、装轮播图组件、表格组件、上拉加载和下拉刷新组件、树形组件、日历组件、表单组件、异步加载的省和市级联组件）
  • 基于 element-ui/iview 二次封装
  • 组件的单元测试和集成测试
  • 国际化设置
  • 自动化页面埋点
  • 自定义皮肤设置
• 深入 Vue 源码
  • MVVM 响应式原理及源码分析
  • 手写实现 Vue3.0 响应式原理
  • 手写实现 Vue-Router
  • 手写实现 vuex 中的 state、getter、commit、dispatch、actions/mutations、模块化
  • 虚拟 DOM
  • DOM diff
  • 模板编译和代码生成

React

• React 基础：环境搭建、组件和 JSX、Props、State、事件、生命周期与 Hooks
• React Router（路由管理）：动态路由、嵌套、路由传参、重定向、懒加载、权限路由、React Router 4/5 到 6 的理解
• Redux（状态管理）：Action / Reducer / Store、Redux Toolkit、Selector、Thunk / Saga、dva / mobx / immutable 等生态理解
• SSR 服务端渲染：CSR vs SSR、同构、SEO、预渲染、首屏数据注水、Koa + Next.js 的实践意义
• 组件化开发：表单、上传、树形、轮播等组件设计，受控/非受控、组合模式与可访问性
• React 高级实践和性能优化：工程化、Umi / Ant Design / dva、长列表优化、懒加载、Suspense、ErrorBoundary、测试
• React 原理：JSX、虚拟 DOM、更新队列、Diff、Fiber、Hooks、批处理与调度
• 企业级 React 框架：Next.js、Umi v3、Ant Design Pro 所代表的企业级工程体系
• 源码阅读：React 15 与 16+ 的架构差异、Fiber、Hooks、更新链路和阅读路径

Node.js

• Node 基础

  • Nodejs 提供的能力原生 API
  • Node 原生的 Web Server 实践、单测的写法
  • Node 进阶及原理解析
  • NVM Node 版本管理工具

• Node 核心模块

  • Event loop 和事件队列
  • process 全局对象、events 事件处理模块、commonjs 原理解析
  • 深入字符编码、Buffer 对象、fs 文件模块、压缩与解压缩
  • stream 流的原理和应用
  • cookie 和 session 原理

• Node 框架

  • Express : 路由配置、处理参数、中间件、模板引擎、静态文件服务器、重定向

  • Koa : Koa 给出的答卷，解决原生困境、重写 Web Server、进阶及原理解析 / Koa 源码分析 & 手写 Koa 核心代码 / Koa 在企业开发中的应用

  • Egg : 项目架构 / 配置路由、静态文件中间件、模版引擎 / 远程接口服务 / 计划任务 / 集成 MYSQL / Restful 接口 / Sequelize 持久化工具 / 国际化 / 扩展工具方法 / 中间件 / 多进程与集群 / 运行环境、单元测试 / 服务器部署和运维 / 手写自己的 Eggjs 框架， 包括 egg-core、 egg-init、 egg-cluster / 自定义插件和框架, 手写 egg- sock-et.io 插件

  • Midway

• Node 实践

  • JWT 权限认证原理
  • 手写 Express、koa2
  • 多语言、防盗链、正向和反向代理服务器
  • 加密和签名算法

• Node 打包工具

  • pkg
  • @vercel/ncc

• PM2 进程管理

打包工具

Webpack

• webpack 基础知识
• webpack4 实战 entry、output、loaders、plugins、文件指纹
• webpack4 优化(dll、resolve、 模块热替换、压缩、代码分割、可视化工具)
• Webpack4 源码分析，懒加载原理、热更新原理
• 编写自定义 Loader(style-loader css-loader less-loader 等)
• 编写自定义 Plugin(html-webpack-plugin)
• 手写自己的 Webpack4
• Webpack 的事件机制 tapable 和 AST 抽象语法树
• 手搓 webpack 插件
• Babel 基础：token 到 ast，编译理论
• 设计思想:Tapable 源码分析

前端工程化

• 脚本世界
  • npm & yarn 包管理工具
  • package.json 项目说明文件
  • bash 简介和快速入门
  • pnpm 快速的，节省磁盘空间的包管理工具
  • node 开发简单 CLI 工具
  • 搭建私有 Npm 仓库
• 规范先行
  • 代码风格
    • ESLint
      • ESLint 插件
    • prettier 代码格式化
  • 语义化版本管理和 Changelog
  • 其他规约
• 质量
  • Code Review
  • 测试基础
  • 单元测试
  • E2E 测试
  • 测试驱动开发 TDD
  • 监控和异常上报
• 工程设计
  • 前端架构设计
  • 多仓库选型
• 持续集成与部署
  • CI/CD 简介
  • 持续集成
    • GitHub Action 进阶
    • Jenkins CI/CD
  • 部署
    • 前后端分离
    • 发布策略
    • 多环境发布
  • 虚拟化
    • Docker
    • Kubernetes 入门
• 效率工具
  • 真机远程代码调试
  • “无线”调试
  • 移动端调试
  • 代理工具
  • 公网访问本地服务
  • Mock 服务与数据生成
  • SVRX 工具

微前端

• 微前端概述：背景、核心价值、实现方案（qiankun、single-spa、EMP、icestark）
• 微前端通信机制：Props 传递、CustomEvent、共享状态（qiankun initState、Redux/Zustand）
• 微前端路由分发与样式隔离：主应用路由配置、JS/CSS 隔离方案
• 从零编写一个微前端框架：初始化工程、.app 相关概念、路由拦截、执行流程、location 事件

跨端

• Flutter：Dart 语法 / 环境搭建 / Widget 三棵树 / 布局系统 / 路由与动画 / 状态管理 / 平台通道 / 性能优化

• React Native：新旧架构（Bridge vs Fabric/JSI/TurboModules）/ 核心组件 / Flexbox 布局 / React Navigation / Reanimated 动画 / FlashList 性能优化 / 原生模块

• uni-app：调试 / HBuilder / nvue 布局 / 多端发布 / 路由和动画 / 微信分享

• Taro：React/Vue 语法编译到各小程序 / 多端适配 / 组件与 API 差异

weapp 微信小程序

• 基础用法
• web-view

前端性能优化

• 浏览器缓存原理和最佳设置策略
• 火焰图（Flame Graph）
• 浏览器加速秘籍：全方位前端性能优化终极指南
• CDN 缓存优化
• EventLoop 异步更新
• 避免回流和重绘
• 节流与防抖
• 通过 Performance 监控性能
• webpack 优化方案

Nginx

• nginx 的安装和使用
• 模块和基本配置
• 正向反向代理等应用场景
• 跨域
• 防盗链
• rewrite 重写
• 负载均衡集群
• CDN
• 浏览器缓存

设计模式

• 设计模式概述 — 设计模式简介与分类
• UML 模型图
  • 用例图
  • 活动图
  • 类图和对象图
    • 依赖关系(Dependence)
    • 泛化关系(Generalization)
    • 实现关系(lmplementation)
    • 关联关系
    • 聚合关系
    • 组合关系
  • 时序图
  • 协作图
  • 组件图
  • 部署图
• 面向对象
  • 什么是面向对象
  • 封装、继承和多态
  • 面向对象和面向过程
• 设计原则
  • 开放封闭原则
  • 接口隔离原则
  • 单一职责原则
  • 迪米特法则
  • 里氏替换原则
  • 合成复用原则
  • 依赖倒置原则
• 创建型模式
  • 建造者模式(Builder)
  • 抽象工厂模式(Abstract Factory)
  • 原型模式(Prototype)
  • 工厂方法模式(Factory Method)
  • 单例模式(Singleton)
• 结构型模式
  • 适配器模式(Adapter)
  • 外观模式(Facade)
  • 桥接模式(Bridge)
  • 享元模式(Flyweight)
  • 组合模式(Composite)
  • 代理模式(Proxy)
  • 装饰模式(Decorator)
• 行为型模式
  • 命令模式(Command)
  • 职责链模式(Chain of Responsibility)
  • 解释器模式(Interpreter)
  • 迭代器模式(lterator)
  • 状态模式(State)
  • 中介者模式(Mediator)
  • 策略模式(Strategy)
  • 备忘录模式(Memento)
  • 模板方法模式(Template Method)
  • 观察者模式(Observer)
  • 访问者模式(Visitor)

数据结构和算法

• 算法的基础知识

  • 输入、输出和数量级|计算能力的变革

  • CPU、寄存器和内存|二分查找 I 插入排序 I 置泡排序

• 算法的衡量和优化

  • 时间复杂度和空间复杂度 I 复杂度的本质

  • 合并排序| 递归函数复杂度分析

  • 递归表达式分析法 I 递归数学归纳法分析

  • 主定理

• 排序算法

  • 排序算法介绍

  • 计数排序

  • 基于比较的排序算法

  • 基数排序

  • 合并排序优化

  • 桶排序

  • 快速排序

  • 外部排序

  • 快速排序复杂度和优化

• 递归

  • 递归的基本概念

  • 回溯算法

  • 递归图形的绘制

  • 重复子问题优化

  • 递归和穷举问题

  • 尾递归

  • 组合问题

  • 搜索问题(8 皇后)

  • 递归空间优化

  • 深度优先搜索和广度优先搜索

• 数据结构

  • 数组

  • 堆

  • 双向链表

  • 栈

  • 反转单向链表

  • 队列

• 进阶算法

  • 动态规划的概念

  • 填表法

  • LCS 问题的子结构

  • 构造结果

• BAT 面试真题

  • 反转二叉树

  • 火车排序问题和队列

  • 解析 Query 字符串

  • 网格走法动态规划

  • 取 N 个数字为 M

  • 两个栈实现一个队列

Git

• Git 原理介绍
• Git 基础操作-常用命令
• Git 进阶
  • rebase 的作用
  • reset 与 revert 的区别
  • reflog
  • cherry-pick
  • Git 与 shell 结合
• 前端工程化应用 husky link-staged

计算机网络

• 网络协议

  • OSI 七层模型

  • TCP/IP 参考模型

  • TLS 与网络安全

  • 物理层

  • 数据链路层

    • 以太网

    • 总线型拓扑

    • 冲突检测

    • MAC 地址

    • 以太网帧

    • ARP 协议

  • 互联网层(网络层)

    • IP 协议

    • 选址

    • 子网掩码和子网划分

  • 传输层

    • TCP 数据包、TCP 序列号

    • 滑动窗口的拥塞检测

    • 三次握手和四次挥手

    • UDP 协议、DNS 协议

  • 应用层：HTTP、HTTPS、HTTP2

• 网络请求

  • Request
    • Form 提交
    • Ajax 和 Fetch
    • 文件上传
    • Axios 源码分析
  • WebSocket
  • 缓存

• 网络安全

  • Web 漏洞的分析与防御、同源策略
  • XSS（跨站脚本攻击）
  • CSRF（跨站请求伪造攻击）

PWA

• manifest.json 配置
• service worker 生命周期
• fetch
• 请求拦截
• cache api 以及缓存策略
• Notification
• API
• workbox 应用
• Vue 中应用 PWA

服务端

• MongoDB

  • MongoDB 安装和使用
  • MongoDB 的系统架构
  • MongoDB 高级查询
  • MongoDB 索引
  • MongoDB 安全与权限
  • mongoose 模块之 Schema
  • mongoose 模块之 Model

• MySQL

  • MySQL 安装与使用
  • MySQL 系统架构
  • 数据处理之增删改查
  • 数据类型和约束分页
  • 索引和慢查询性能分析
  • 数据库安全之防止 SQL 注入
  • 数据库设计 ER 图设计
  • 数据库事务和锁
  • 数据库设计之三大范式
  • 分组和聚合函数
  • 基于角色的权限访问控制(Role Based Access Control)

• Redis

  • 5 种数据结构及使用场景
  • API 的理解和使用
  • Redis 客户端
  • 发布订阅
  • 事务
  • 备份和恢复

• Linux

  • Linux 与 Windows 的不同
  • Linux 安装和虚拟机的使用
  • 桥接、NAT、Host-Only 等 网络连接
  • 快照、克隆、挂载点和分区
  • Linux 常用命令 VI 编辑器、用户与权限管理、服务管理、软件管理、网络管理、系统命令
  • Shell 实战监控服务和主机网络状态

• GraphQL

  • GraphQL 概念
  • 使用 GraphQL 查询和变更数据
  • 后端搭建 GraphQL 服务器
  • ReactHooks 和 GraphQL 项目实战
  • GraphQL+Nest.js 微服务开发
    • Nest.js 模块定义
    • Nest 实现后端微服务
    • TypeScript+Nest.js 项目构建
    • GraphQL 的服务器搭建与查询操作

• Docker

  • docker 安装与使用
  • 虚拟机
  • Linux 容器
  • Docker 核心概念
  • Docker 架构
  • Docker 镜像
  • Docker 容器
  • Dockerfle
  • Docker 数据盘
  • 网络配置
  • docker-compose

AI

Agent 编排框架

• LangGraph：用图编排 LLM / Agent 工作流
  • 核心概念
  • 构建一个 Agent
• LangChain：组件工具包（模型 / prompt / 检索），LangGraph 的同生态基座
• CrewAI：角色化多 Agent 协作框架
• AutoGen：微软多 Agent 对话框架
• MetaGPT：多 Agent 协作模拟软件开发
• LlamaIndex：数据检索与 Agent 框架
• Vercel AI SDK：前端 / 全栈 Agent 工具包
• Dify / Flowise / Coze：可视化（低代码）Agent 编排平台
• n8n：自动化工作流，可接入 AI 节点

LLM 可观测性与评估

• Langfuse：开源 LLM 可观测性平台
  • 调用追踪 Tracing
  • 评估 Evals
  • Prompt 管理
  • 自托管部署
• LangSmith：LangChain 官方 tracing + evals + prompt 管理
• Helicone：token 成本追踪与代理网关
• Arize Phoenix：基于 OpenTelemetry 的开源可观测
• W&B Weave：Weights & Biases 的 LLM 观测
• AgentOps：Agent 会话专属观测

相关协议与基础设施

• MCP（Model Context Protocol）：Agent 连接工具与数据源的开放标准
• OpenTelemetry / OpenInference：LLM 观测的通用标准
• 模型网关：LiteLLM / OpenRouter / Portkey 统一接入

贡献者: Ra1n

下一页html-基础知识