用HTML5和Node.js搭一个实时协作白板，发论前端靠Canvas API画图，发论后端用Socket.IO同步数据。发论这套组合跑下来，发论代码量不到800行，发论延迟控制在80ms以内。发论HTML5的发论WebSocket省掉了轮询开销，Node.js的发论事件循环处理并发连接比传统PHP+Apache省了将近三倍内存。这不是发论理论推导，是发论我上个月重写公司内部工具时的实测数据。

HTML5真正有用的发论部分不是那些花哨的语义标签。Canvas、发论WebSocket、发论LocalStorage、发论Web Worker——这四个API撑起了现代Web应用的发论骨架。Canvas负责像素级渲染，WebSocket保持长连接，LocalStorage做离线缓存，Web Worker把耗时计算挪到后台线程。我见过太多项目把HTML5当HTML4用，加几个<header>、<section>就算改版，纯属浪费。

Node.js在这套架构里干三件事：维持WebSocket连接池、处理房间逻辑、落盘持久化。Express框架搭HTTP服务，Socket.IO管理房间和广播。有个坑得注意——Socket.IO默认用polling降级，得强制指定transports: [‘websocket’]，否则首次连接会多花200ms。内存泄漏也常见，每个房间的客户端列表必须手动清理，Node.js不会自动回收闭包里的引用。

说个具体场景。用户A在画布上拖拽一个矩形，mousemove事件每16ms触发一次。前端不能直接发原始坐标，得先做节流——用requestAnimationFrame包装，每帧只发一次。后端收到后广播给同房间其他人，同时写入Redis做临时存储。用户B收到坐标数据，用Canvas的clearRect和fillRect重绘。这里有个细节：直接重绘整个画布会闪，得用双缓冲——离屏Canvas先画好，再一次性drawImage到主画布。

数据库选型看场景。MongoDB存画布快照方便，但频繁更新单个图形时，PostgreSQL的JSONB字段更稳。我试过用SQLite做本地开发，并发写入直接锁表，换成LevelDB才消停。Node.js的流式处理适合导出大画布——把Canvas转成PNG流，pipe到响应里，内存占用比Buffer拼接低一个数量级。

部署时别用PM2的cluster模式跑WebSocket。多进程间没法共享Socket实例，必须上Redis adapter做消息中转。Nginx配置要加proxy_set_header Upgrade $http_upgrade，否则WebSocket握手直接失败。这些坑我都踩过，文档里写得含糊，得自己抓包看。

性能优化有个反直觉的点：减少数据包体积比降低发送频率更有效。把坐标从浮点数转成整数，JSON换成MessagePack，带宽直接降60%。Node.js的Buffer操作比字符串拼接快，但别滥用——V8对短字符串有优化，过度用Buffer反而增加GC压力。

这套技术栈不是银弹。CPU密集型任务会阻塞Node.js事件循环，图像滤镜处理得扔给Worker或子进程。HTML5的Canvas在移动端有兼容性问题，iOS Safari对离屏Canvas的内存限制很严，超过50MB直接崩。真要做生产级应用，前端得加WebAssembly做图像处理，后端用Go写计算微服务。但原型验证阶段，HTML5+Node.js够用了——两天出Demo，一周上内测，这个速度其他方案给不了。