快速开始
约 3637 字大约 12 分钟
指南快速开始
2024年08月12日
HTML CSS
HTML
元素 Elements
DOM - Document Object Model
- 事件和事件绑定的底层机制
BOM - Browser Object Model
CSS
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
- Nodejs 提供的能力原生 API
- Node 原生的 Web Server 实践、单测的写法
- Node 进阶及原理解析
- NVM 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 插件
- JWT 权限认证原理
- 手写 Express、koa2
- 多语言、防盗链、正向和反向代理服务器
- 加密和签名算法
- pkg
- @vercel/ncc
打包工具
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 源码分析
前端工程化
微前端
- 微前端概述:背景、核心价值、实现方案(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 微信小程序
前端性能优化
- 浏览器缓存原理和最佳设置策略
- 火焰图(Flame Graph)
- 浏览器加速秘籍:全方位前端性能优化终极指南
- CDN 缓存优化
- EventLoop 异步更新
- 避免回流和重绘
- 节流与防抖
- 通过 Performance 监控性能
- webpack 优化方案
Nginx
设计模式
- 设计模式概述 — 设计模式简介与分类
- 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
计算机网络
网络协议
网络请求
- Request
- Form 提交
- Ajax 和 Fetch
- 文件上传
- Axios 源码分析
- WebSocket
- 缓存
- Request
网络安全
- Web 漏洞的分析与防御、同源策略
- XSS(跨站脚本攻击)
- CSRF(跨站请求伪造攻击)
PWA
服务端
- MongoDB 安装和使用
- MongoDB 的系统架构
- MongoDB 高级查询
- MongoDB 索引
- MongoDB 安全与权限
- mongoose 模块之 Schema
- mongoose 模块之 Model
- 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 服务器
- ReactHooks 和 GraphQL 项目实战
- GraphQL+Nest.js 微服务开发
- Nest.js 模块定义
- Nest 实现后端微服务
- TypeScript+Nest.js 项目构建
- GraphQL 的服务器搭建与查询操作
- docker 安装与使用
- 虚拟机
- Linux 容器
- Docker 核心概念
- Docker 架构
- Docker 镜像
- Docker 容器
- Dockerfle
- Docker 数据盘
- 网络配置
- docker-compose
