重学前端 - 学习路线

Holin_浩霖
103 阅读7分钟

JavaScript 深度复习

基础与进阶概念

  • 数据类型与运算

    • 原始类型：String、Number、Boolean、null、undefined、Symbol、BigInt
    • 引用类型：Object、Array、Function、Date、RegExp、Map、Set、WeakMap、WeakSet
    • 类型判断：typeof、instanceof、Object.prototype.toString.call()
    • 类型转换：隐式转换规则、显式转换方法

  • 作用域与闭包

    • 词法作用域 vs 动态作用域
    • 变量提升、暂时性死区（TDZ）
    • 闭包原理、内存泄漏问题、实际应用场景
    • 模块模式、IIFE、块级作用域

  • 原型与继承

    • __proto__、prototype、constructor 关系
    • 原型链查找机制
    • 继承实现：原型链继承、构造函数继承、组合继承、寄生组合继承、Class继承
    • ES6 Class：静态方法、私有字段、getter/setter

异步编程深度掌握

  • 异步演进历程

    • 回调函数 → Promise → Generator → Async/Await
    • Promise 核心原理：状态机、链式调用、微任务机制
    • Promise 静态方法：all、allSettled、race、any
    • Async/Await 错误处理、并行执行优化

  • 事件循环机制

    • 浏览器事件循环：宏任务 vs 微任务
    • Node.js 事件循环：6个阶段详解
    • setTimeout、setInterval、requestAnimationFrame、requestIdleCallback
    • MessageChannel、MutationObserver 微任务应用

  • 高级异步模式

    • 可取消的 Promise、竞态条件处理
    • 异步迭代器、for-await-of
    • Web Workers：专用Worker、共享Worker、Service Worker

ES6+ 现代特性

  • 语法增强

    • 解构赋值：对象、数组、嵌套解构、默认值
    • 模板字符串：标签模板、多语言处理
    • 扩展运算符：数组拼接、对象合并、函数参数
    • 可选链操作符 ?.、空值合并运算符 ??

  • 新数据结构

    • Map vs Object 性能对比、使用场景
    • Set 去重应用、Weak引用机制
    • TypedArray：Int8Array、Uint32Array 等
    • ArrayBuffer、SharedArrayBuffer

  • 元编程

    • Proxy：拦截器、响应式系统实现
    • Reflect：标准化对象操作
    • Symbol：唯一性、内置Symbol、元编程应用

⚛️ React 生态深度掌握

React 18+ 核心特性

  • 新特性深度理解

    • Concurrent Features：startTransition、useDeferredValue
    • Automatic Batching：批处理优化
    • Suspense for Data Fetching：数据获取的Suspense
    • Offscreen API：隐藏组件保持状态

  • Hooks 高级用法

    • 基础Hooks：useState、useEffect、useContext
    • 性能Hooks：useMemo、useCallback、memo
    • 引用Hooks：useRef、useImperativeHandle
    • 状态Hooks：useReducer、自定义Hooks
    • 第三方Hooks库：ahooks、react-use

  • Server Components

    • 服务端组件 vs 客户端组件
    • 数据获取模式、序列化限制
    • 流式渲染、选择性Hydration

状态管理深度对比

  • 客户端状态管理

    • Zustand：轻量、基于Hook、中间件系统
    • Jotai：原子化、派生状态、异步原子
    • Recoil：Facebook出品、Selector缓存
    • Redux Toolkit：createSlice、RTK Query、不可变更新

  • 服务端状态管理

    • TanStack Query：缓存策略、后台更新、无限滚动
    • SWR：Vercel出品、轻量级替代
    • Apollo Client：GraphQL专属、规范化缓存

性能优化专业级

  • 渲染优化

    • React.memo 深度比较、自定义比较函数
    • useMemo/useCallback 依赖项优化
    • 组件懒加载：React.lazy + Suspense
    • 虚拟列表：react-window、react-virtualized

  • 包大小优化

    • 代码分割：路由级、组件级分割
    • 树摇优化、副作用标记
    • 动态导入、预加载提示

  • 运行时优化

    • 防抖、节流、虚拟化
    • Web Workers 计算卸载
    • 内存泄漏检测与预防

🌐 全栈与元框架

Next.js 15 深度掌握

  • App Router 架构

    • 文件系统路由：page.tsx、layout.tsx、loading.tsx
    • 路由组：(auth)、并行路由 @folder
    • 路由拦截：(..)photo、动态路由 [...slug]

  • 数据获取与缓存

    • 服务端组件数据获取：async/await
    • 缓存策略：force-cache、no-store
    • 重新验证：revalidatePath、revalidateTag
    • 增量静态再生（ISR）、按需重新验证

  • 高级功能

    • 中间件：身份验证、国际化、A/B测试
    • 边缘运行时 vs Node.js 运行时
    • 图像优化：next/image、远程模式
    • 字体优化：next/font、Google Fonts

现代全栈模式

  • 后端集成

    • tRPC：端到端类型安全
    • GraphQL：Apollo Client、Relay Modern
    • RESTful API 设计、OpenAPI 规范

  • 数据库与ORM

    • Prisma：模式定义、迁移、客户端生成
    • Drizzle：TypeScript原生、轻量级ORM
    • 数据库：PostgreSQL、MySQL、SQLite、MongoDB

  • 身份验证与授权

    • NextAuth.js / Auth.js：OAuth、JWT、Session
    • Clerk：预构建组件、用户管理
    • Supabase：一体化身份验证方案

🎨 样式与设计系统

CSS 现代方案

  • CSS-in-JS

    • Styled-components：主题、样式扩展、服务端渲染
    • Emotion：高性能、灵活配置
    • Vanilla Extract：零运行时、TypeScript友好

  • Utility-First CSS

    • Tailwind CSS：配置扩展、组件提取
    • 自定义插件、变体组、arbitrary values

  • 现代CSS特性

    • CSS Grid：二维布局、网格区域
    • Flexbox：弹性布局、对齐控制
    • Container Queries：容器查询
    • CSS Nesting：嵌套规则
    • Viewport Units：动态视口单位

设计系统构建

  • 组件库架构

    • 原子设计：原子、分子、有机体、模板、页面
    • 组件API设计：可组合性、可访问性
    • 主题系统：颜色、间距、字体、阴影令牌

  • 流行组件库

    • shadcn/ui：基于Tailwind、可复制粘贴
    • Radix UI：无头组件、极致可访问性
    • Chakra UI：主题系统、样式道具
    • Ant Design：企业级、功能完整

⚡ 构建工具与工程化

现代构建工具

  • Vite 深度配置

    • 插件系统：自定义插件开发
    • 依赖预构建、模块联邦
    • 环境变量、多环境配置
    • 自定义服务器、代理配置

  • 打包优化策略

    • 代码分割：动态导入、vendor分离
    • 资源优化：图片压缩、字体子集
    • 预渲染、预加载、预获取
    • 包分析工具：webpack-bundle-analyzer

代码质量工程

  • TypeScript 高级用法

    • 泛型约束、条件类型、映射类型
    • 工具类型：Partial、Required、Pick、Omit
    • 模板字面量类型、字符串操作类型
    • 类型推断、类型保护、类型断言

  • 测试策略

    • 单元测试：Jest、Vitest、React Testing Library
    • 集成测试：用户交互测试、状态测试
    • E2E测试：Playwright、Cypress
    • 视觉测试：Chromatic、Loki

  • 工程规范

    • ESLint：自定义规则、插件开发
    • Prettier：配置一致性、团队规范
    • Husky：Git Hooks、提交前检查
    • Commitizen：标准化提交信息

🚀 性能优化专业级

核心性能指标

  • Web Vitals 深度优化

    • LCP：图片优化、字体优化、服务端渲染
    • FID/INP：JavaScript优化、任务分解
    • CLS：尺寸预留、内容稳定性
    • TBT：主线程优化、长任务分解

加载性能优化

  • 资源加载策略

    • 关键CSS内联、非关键CSS异步加载
    • 字体显示策略：font-display、字体预加载
    • 图片优化：WebP/AVIF格式、响应式图片、懒加载
    • 第三方脚本优化：异步加载、资源提示

  • 缓存策略

    • CDN缓存、浏览器缓存、Service Worker缓存
    • 缓存失效策略、版本控制
    • stale-while-revalidate 模式

运行时性能

  • JavaScript 性能

    • 内存管理、垃圾回收机制
    • 避免内存泄漏：事件监听器、定时器清理
    • 防抖、节流、虚拟滚动
    • Web Assembly：Rust编译、性能密集型任务

  • 渲染性能

    • 合成层优化、GPU加速
    • 减少重绘重排、transform/opacity优化
    • 内容可见性：content-visibility属性

🔧 跨平台开发

React Native 生态

  • 核心概念

    • 原生组件 vs 自定义组件
    • 桥接机制、线程模型
    • 手势处理、动画系统

  • 开发工具链

    • Expo：简化开发、预构建组件
    • React Native CLI：完全控制、原生模块
    • 调试工具：Flipper、React DevTools

  • 性能优化

    • 列表优化：FlashList、虚拟列表
    • 图片优化：缓存、渐进加载
    • 包大小优化：代码分割、动态导入

小程序与桌面端

  • 小程序框架

    • Taro：多端统一、React语法
    • 微信小程序原生开发、云开发

  • 桌面应用

    • Electron：主进程、渲染进程、进程通信
    • Tauri：Rust后端、轻量级替代

🛡️ 安全与最佳实践

前端安全

  • 常见攻击防护

    • XSS：内容安全策略、输入输出编码
    • CSRF：SameSite Cookie、Token验证
    • 点击劫持：X-Frame-Options、CSP
    • 依赖安全：漏洞扫描、许可证检查

监控与可观测性

  • 错误监控

    • Sentry：错误捕获、性能监控
    • 用户行为回放、问题复现

  • 性能监控

    • RUM：真实用户监控、性能指标收集
    • Core Web Vitals 监控、业务指标关联

🎯 新兴技术与趋势

前沿技术探索

  • AI 集成

    • LLM 前端集成：OpenAI API、本地模型
    • 向量数据库、语义搜索
    • AI代码助手：GitHub Copilot、Cursor

  • Web3 与区块链

    • 以太坊开发：ethers.js、web3.js
    • 智能合约交互、钱包集成

  • 可视化与3D

    • Three.js：3D场景、物理引擎
    • D3.js：数据可视化、自定义图表
    • WebGL：高性能图形、着色器编程
avatar
文章
阅读
粉丝