海川的日志

前端复习计划

作者：海川，发表于：2026年1月22日 01:30:00

前端全方位复习计划

复习面试

第 1 周 - HTML & CSS 基础夯实

HTML

  • 基础概念 & 语义化标签
  • 表单增强
  • 数据存储、Web Worker、重要API

CSS

  • 基础概念、选择器、盒模型、布局
  • 过渡、动画和变换
  • 响应式设计
  • BFC、常见问题、性能优化和最佳实践

Flex布局

  • 基础概念
  • 容器属性
  • 项目属性
  • 实用案例
  • Flex vs Grid

Grid布局

  • 网格容器与网格项
  • grid-template、gap、grid-area
  • 自动填充与响应式（auto-fit、auto-fill、minmax）
  • 实践：实现 Pinterest 瀑布流、仪表盘布局

CSS 进阶技巧

  • BFC（Block Formatting Context）原理与应用
  • 清除浮动的多种方法
  • CSS 变量（自定义属性）
  • calc()、clamp()、min()、max()
  • 实践：使用 CSS 变量实现主题切换

Tailwind CSS 基础 ⭐

  • Tailwind 核心理念（Utility-First）
  • 安装配置与 VSCode 插件
  • 常用工具类（spacing、colors、typography）
  • 响应式前缀（sm、md、lg、xl、2xl）
  • 伪类与伪元素（hover、focus、group）
  • 实践：用 Tailwind 重构之前的布局

Tailwind CSS 进阶 ⭐

  • 自定义配置（theme、colors、spacing）
  • 暗黑模式实现
  • 组件抽取（@apply、组件化）
  • 插件系统（forms、typography、aspect-ratio）
  • 性能优化（PurgeCSS、JIT 模式）
  • 实践：实现完整的响应式个人网站（含暗黑模式）

第 2 周 - JavaScript 基础强化

JavaScript 数据类型

  • 基本类型与引用类型
  • 类型判断（typeof、instanceof、Object.prototype.toString）
  • 类型转换（隐式与显式）
  • Symbol、BigInt 的使用
  • 实践：实现深拷贝、类型判断函数

ES6+ 核心特性（上）

  • let/const vs var（暂时性死区）
  • 箭头函数与普通函数的 5 个区别
  • 模板字符串、标签模板
  • 默认参数、剩余参数、扩展运算符
  • 实践：重构传统 JavaScript 代码

ES6+ 核心特性（下）

  • 解构赋值的各种场景
  • 对象简写、计算属性名
  • 类（Class）语法糖
  • 模块化（import/export）
  • 实践：用 ES6 重构一个工具库

Promise 与异步编程

  • Promise 状态与链式调用
  • Promise.all、race、allSettled、any
  • async/await 与错误处理
  • 手写 Promise
  • 实践：实现请求并发控制、超时取消

闭包与作用域

  • 执行上下文与作用域链
  • 闭包的原理与内存模型
  • 闭包应用（模块化、柯里化、缓存）
  • 闭包陷阱与解决方案
  • 实践：实现防抖、节流、单例模式

原型与继承

  • 原型链完整图解
  • 构造函数、原型、实例的关系
  • 继承的 6 种方式
  • ES6 Class 继承原理
  • 实践：手写 new、instanceof、Object.create

this 绑定与函数方法

  • this 的 4 种绑定规则
  • call、apply、bind 的区别
  • 箭头函数的 this
  • 手写 call、apply、bind
  • 实践：实现函数柯里化、偏函数

第 3 周 - JavaScript 进阶

数组方法大全

  • 遍历方法（forEach、map、filter、reduce）
  • 查找方法（find、findIndex、some、every、includes）
  • 修改方法（push、pop、shift、unshift、splice）
  • 高级方法（flat、flatMap、from、of）
  • 实践：实现数组去重、扁平化、分组、排序

对象与 API

  • Object 静态方法（keys、values、entries、assign、freeze、seal）
  • 属性描述符（writable、enumerable、configurable）
  • Proxy 与 Reflect
  • WeakMap、WeakSet 应用
  • 实践：实现响应式系统（类 Vue 3）

事件循环机制

  • 调用栈、任务队列、事件循环
  • 宏任务与微任务执行顺序
  • requestAnimationFrame、requestIdleCallback
  • Node.js 事件循环
  • 实践：分析 20 道输出顺序题

正则表达式

  • 正则基础语法
  • 常用元字符、量词、分组
  • 前瞻、后瞻断言
  • 贪婪与非贪婪匹配
  • 实践：表单验证（邮箱、手机号、URL、身份证）

DOM 操作

  • DOM 树结构与节点类型
  • 节点查询（querySelector、getElementById）
  • 节点操作（创建、插入、删除、克隆）
  • 属性操作（getAttribute、dataset）
  • 实践：实现拖拽、虚拟滚动列表

事件机制

  • 事件流（捕获、目标、冒泡）
  • 事件委托原理与应用
  • 常见事件（click、input、change、scroll）
  • 阻止默认行为与冒泡
  • 实践：实现图片懒加载、无限滚动

浏览器 API

  • localStorage、sessionStorage、IndexedDB
  • Fetch API 与 XMLHttpRequest
  • File API、FormData、Blob
  • Intersection Observer、Mutation Observer
  • 实践：实现图片上传、离线缓存

第 4 周 - React 核心

React 基础回顾

  • JSX 语法与原理
  • 组件类型（函数组件、类组件）
  • Props 与 Children
  • 条件渲染与列表渲染
  • 实践：实现评论列表组件

Hooks - 基础三剑客

  • useState 原理与批量更新
  • useEffect 完整生命周期
  • useRef 的 3 种用途
  • 自定义 Hook 设计模式
  • 实践：实现 useToggle、useCounter、usePrevious

Hooks - 性能优化

  • useMemo 缓存计算值
  • useCallback 缓存函数
  • React.memo 浅比较
  • 何时使用优化 Hook
  • 实践：优化大列表渲染

Hooks - 进阶应用

  • useReducer 状态机
  • useContext 跨组件通信
  • useLayoutEffect vs useEffect
  • useImperativeHandle、forwardRef
  • 实践：实现复杂表单管理

状态管理

  • Context API 最佳实践
  • Zustand 基础与中间件
  • Redux Toolkit 简化版
  • 状态管理方案对比
  • 实践：实现全局主题、购物车

React 路由

  • React Router v6 核心 API
  • 路由配置、嵌套路由
  • 路由守卫、权限控制
  • 路由懒加载
  • 实践：实现后台管理系统路由

React 高级特性

  • 错误边界（Error Boundary）
  • Portals 传送门
  • Suspense 与 lazy
  • Concurrent Mode 概念
  • 实践：实现 Modal、Tooltip 组件

第 5 周 - Next.js 全栈开发 ⭐

Next.js 基础入门

  • Next.js 核心概念与优势
  • App Router vs Pages Router
  • 文件路由系统（app/page.tsx）
  • Layout 与嵌套布局
  • Link 组件与导航
  • 实践：创建多页面应用

Next.js 渲染模式 ⭐

  • SSR（服务端渲染）
  • SSG（静态站点生成）
  • ISR（增量静态再生）
  • CSR（客户端渲染）
  • 渲染模式选择策略
  • 实践：实现博客系统（SSG + ISR）

Next.js 数据获取

  • Server Components vs Client Components
  • async/await 数据获取
  • fetch 与缓存策略
  • Dynamic Routes 动态路由
  • generateStaticParams 静态参数
  • 实践：实现文章详情页

Next.js API Routes

  • Route Handlers（app/api）
  • RESTful API 设计
  • 请求处理（GET、POST、PUT、DELETE）
  • 中间件（Middleware）
  • 实践：实现完整 CRUD API

Next.js 进阶特性

  • Image 组件优化
  • Font 优化（next/font）
  • Metadata API（SEO）
  • 环境变量配置
  • 错误处理（error.tsx、not-found.tsx）
  • 实践：优化网站性能与 SEO

Next.js + TypeScript

  • TypeScript 配置
  • 类型安全的路由
  • Server Components 类型
  • API Routes 类型定义
  • 实践：为 Next.js 项目添加完整类型

Next.js 部署与优化

  • Vercel 部署流程
  • 环境变量管理
  • 性能优化（代码分割、预加载）
  • 分析工具（@next/bundle-analyzer）
  • 实践：部署生产环境项目

第 6 周 - 工程化

TypeScript 基础

  • 基础类型、接口、类型别名
  • 联合类型、交叉类型、字面量类型
  • 类型守卫、类型断言
  • 泛型基础
  • 实践：为 JavaScript 项目添加类型

TypeScript 进阶

  • 泛型约束、默认值
  • 映射类型、条件类型
  • infer 关键字
  • 实用工具类型（Partial、Required、Pick、Omit）
  • 实践：实现类型体操题

Vite 深入（主学） ⭐

  • Vite 原理（ESM、esbuild 预构建）
  • 开发服务器原理（按需编译）
  • 插件系统
  • 生产环境打包（Rollup）
  • 环境变量与模式
  • 实践：用 Vite 从零搭建 React 项目

Webpack 核心概念（了解）

  • 核心概念（Entry、Output、Loader、Plugin）
  • 打包流程与原理
  • 常用配置（babel-loader、css-loader）
  • 代码分割与 Tree Shaking
  • 对比总结：Vite vs Webpack
  • 实践：分析 create-react-app 的 webpack 配置

单元测试

  • Jest 配置与基础
  • 测试驱动开发（TDD）
  • Mock、Spy、Stub
  • 覆盖率要求
  • 实践：为工具函数写完整测试

React 测试

  • React Testing Library 理念
  • 查询优先级（getByRole、getByText）
  • 用户事件模拟（userEvent）
  • 异步测试、Mock API
  • 实践：为表单、列表组件写测试

代码质量与规范

  • ESLint 配置与自定义规则
  • Prettier 格式化
  • Husky + lint-staged 提交检查
  • Git 工作流（Conventional Commits）
  • 实践：搭建完整的代码规范体系

第 7 周 - 实战进阶

CSS 预处理器与方案

  • Sass/Less 语法
  • 变量、嵌套、混入、继承
  • CSS Modules
  • CSS-in-JS（styled-components、Emotion）
  • Tailwind 最佳实践
  • 实践：对比不同 CSS 方案

性能优化综合

  • 首屏优化（SSR、预渲染、骨架屏）
  • 资源优化（压缩、CDN、懒加载、预加载）
  • 渲染优化（虚拟列表、时间分片）
  • 代码优化（防抖、节流、Web Worker）
  • 实践：使用 Lighthouse 分析优化

HTTP 与网络

  • HTTP 方法、状态码
  • HTTPS、HTTP/2、HTTP/3
  • Cookie、Session、JWT、OAuth
  • CORS 跨域解决方案
  • 缓存策略（强缓存、协商缓存）
  • 实践：配置 Nginx、抓包分析

浏览器原理

  • 从输入 URL 到页面展示
  • 渲染流程（解析、布局、绘制、合成）
  • 重排、重绘优化
  • 垃圾回收与内存泄漏
  • Performance API 使用
  • 实践：性能监控 SDK

前端安全

  • XSS 攻击与防御
  • CSRF 攻击与防御
  • 点击劫持、SQL 注入
  • Content Security Policy
  • HTTPS 中间人攻击
  • 实践：为项目添加安全防护

Web3 与现代前端

  • PWA（Progressive Web App）
  • Service Worker 与离线缓存
  • WebAssembly 入门
  • WebSocket 实时通信
  • 实践：实现 PWA 应用

前端监控与埋点

  • 性能监控（FCP、LCP、CLS、FID）
  • 错误监控（Sentry）
  • 用户行为埋点
  • 数据上报策略
  • 实践：搭建前端监控系统

第 8 周 - 算法与数据结构

数组与字符串

  • 双指针、滑动窗口
  • 前缀和、差分数组
  • 字符串匹配（KMP）
  • 实践：LeetCode 20 道题

链表与栈

  • 链表反转、合并
  • 快慢指针、环检测
  • 栈的应用（括号匹配、单调栈）
  • 实践：LeetCode 15 道题

树与图

  • 二叉树遍历（前中后序、层序）
  • BST、平衡树
  • DFS、BFS
  • 实践：LeetCode 15 道题

排序与查找

  • 快排、归并、堆排序
  • 二分查找及变种
  • 哈希表应用
  • 实践：LeetCode 10 道题

动态规划

  • DP 基础（斐波那契、爬楼梯）
  • 背包问题
  • 最长子序列问题
  • 实践：LeetCode 10 道题

贪心与回溯

  • 贪心算法思想
  • 回溯模板
  • 排列组合问题
  • 实践：LeetCode 10 道题

综合算法练习

  • 高频面试题集中刷题
  • 时间复杂度分析
  • 空间优化技巧
  • 实践：LeetCode 20 道题

第 9 周 - 项目实战

项目一 - Next.js 博客系统 ⭐

  • 需求：文章列表、详情、分类、标签、搜索
  • 技术栈：Next.js 14 + TypeScript + Tailwind CSS
  • 渲染：SSG + ISR
  • 部署到 Vercel
  • 实践：实现 MDX 博客

项目二 - 全栈 Todo 应用

  • 需求：增删改查、筛选、排序、持久化
  • 技术栈：Next.js + TypeScript + Prisma + PostgreSQL
  • API Routes 后端
  • Zustand 状态管理
  • 实践：完整的全栈应用

项目三 - 电商首页

  • 需求：商品列表、筛选、购物车、支付
  • 技术栈：React + TypeScript + Tailwind + Zustand
  • 虚拟滚动优化
  • 图片懒加载
  • 实践：性能优化到 Lighthouse 90+

项目优化与部署

  • 性能优化全面检查
  • 无障碍优化（a11y）
  • SEO 优化（meta、sitemap）
  • 编写完整项目文档
  • GitHub README 优化

代码练兵场

预览