Advanced

Web 生态与高级能力

Canvas/WebGL 可视化、WebRTC 实时通信、CRDT 协同编辑、动画工程、音视频处理、Web Workers 并行计算。浏览器平台的高级能力边界。

Topics

动画工程——怎样在 CSS、Web Animations API、requestAnimationFrame 和动画库之间做选择，既把状态变化讲清楚，又把性能、可访问性和维护成本控制住。

浏览器 2D 图形双引擎——Canvas 像素级绘制与性能优化、SVG 矢量图形与 DOM 交互、Canvas vs SVG 选型策略、OffscreenCanvas 多线程渲染。

CRDT（Conflict-free Replicated Data Types）深入——G-Counter/LWW-Register/RGA 等数据类型、与 OT 的本质区别、Yjs/Automerge 实现原理、性能与内存权衡。

前端数据可视化体系——图表类型与视觉编码原理、D3.js 数据驱动范式、ECharts/Recharts 等图表库对比、大数据量渲染优化、Dashboard 设计模式。

实时协作系统设计——WebSocket 通信层、Operational Transformation 与 CRDT 算法选型、协作状态同步、Presence 感知、Yjs/Liveblocks 等框架实践。

Web 音视频处理——MediaStream/MediaRecorder API、视频播放（HLS/DASH）、浏览器端转码（FFmpeg.wasm）、视频编辑与特效、直播流媒体架构。

Web Audio API 体系——AudioContext 与音频图模型、音频节点（Source/Effect/Destination）、频域分析与可视化、空间音频、Tone.js 音乐编程。

Web Workers 与并行计算——怎样把重计算从主线程移出去，理解消息传递、structured clone、transferable、OffscreenCanvas、SharedArrayBuffer，以及它们在真实前端工程里的边界。

WebGL 与 Three.js——怎样理解浏览器里的 3D 渲染管线、GPU 思维、着色器、Three.js 抽象层和 React 生态中的 3D 工程实践，而不是只会把示例跑起来。

WebRTC 实时通信——P2P 连接建立流程（ICE/STUN/TURN）、媒体流捕获与传输、DataChannel 数据通道、信令服务器设计、常见架构模式（SFU/MCU）。