Canvas 不是银弹

WebGL / Canvas 性能更好是迷信。

Canvas / WebGL 带来的好处是能把排版过程和绘制过程分开，可以自己做性能调优。现在 Web 平台的排版过程和绘制过程是耦合的，没有办法分开调整，这造成了非常常见的性能瓶颈，因此在这种情况下 Canvas 「可能」是一种解决方案。

但是，用 Canvas / WebGL 做这种调优是有成本的，毕竟 Yoga / 其他排版系统不是 Native Code，执行性能肯定会有问题。另外 2D Context API 下面的原子操作性能并没有想象当中那么理想，你还得费心去维护 Context 上的那个状态机，尽量不要破坏它的状态，不然它就卡给你看。要处理这些问题需要非常有经验的开发者，因此复杂的绘制任务想要做到 60fps 是很有挑战的。

至于 WebGL 那边，怎么写 Shader 本身就是一个很恶心的事情了，PIXI / THREE 这些库也远没有 DOM 这边的解决方案成熟，只能达到「能用」的等级。更不要提 Draw Call 的成本问题，优化不好连浏览器带显卡驱动一起给你带走，这种体验是前所未有的刺激。

最后，还有一个问题你必须得考虑：A11Y，在 Canvas 上是不存在的，你得从头徒手做。

因此我才主张「WebGL / Canvas 性能更好是迷信」，纯绘图任务可以再看一下 SVG，最好不要把 Canvas 当成第一选择。

以及，我不觉得 Flutter for Web 会是一个 Option。

一些过来人的经验。