Javascript 优化Html5画布中的内容呈现

我正在开发一个应用程序，它使用Html5画布的图形上下文来呈现视图的层次结构。但是，我想进行一些性能优化，以更快地呈现完全不透明的内容

我如何实现这样的逻辑

你知道一个关于如何实现这样的系统的好的信息资源或教程吗

目前，我使用的基本绘图模型类似于和ui工具包，每个视图都表示屏幕上的矩形区域。渲染引擎与视图对象分开实现，并基于包含需要重新绘制的脏视图的列表渲染内容

编辑：

库和当前渲染系统 该库是所谓的平台或抽象层，基于画布元素动态渲染图形的能力。在目前的状态下，我已经实现了管理显示列表等的基础知识，但它还没有优化

当前渲染引擎正在使用缓冲区，并正在缓存视图的绘图命令，以便以后可以重新绘制视图。然而，当只有一个视图无效时，由于需要重新绘制层次结构，所以在绘制过程中存在一个过度的限制

---

如何实现一个系统来管理屏幕内容的脏矩形？

在我看来，HTML5的画布只适用于非常简单的事情，因为它具有锁定过程的性质。如果你想要一些复杂的东西，你真的需要使用SVG之类的东西，它比Canvas更具互换性，允许进行比Canvas复杂得多的操作。@JohnGreen PageSpike:大多数web开发人员不知道的是，Canvas API可以用来呈现非常高级的东西，GPU或软件支持的画布通常会呈现一些不太好的效果。我使用canvas渲染了相当复杂的东西，但性能没有受到影响，问题不是canvas不支持它，而是它必须用JavaScript重新实现。显然，它是有算法的，几乎每个绘图系统都在使用这种算法，甚至webkit也在使用simular方法重新绘制html内容。在这个库的本质上，SVG是不能使用的。我对画布的可行性做了重要的研究。它最大的问题是，它是使用画师绘图算法的过程javascript。如果你想画一些复杂的东西，你需要运行许多缓慢的锁定调用。动态操作SVG的性能和功能显著提高。。。由于画师的算法，再次管理画布中脏矩形的唯一方法是从一开始就将画布拆分，只绘制到伪矩形中，并处理路径拆分和其他会杀死perf Canvas所有内容的事情。