HTML5 网络拓扑图性能优化

HTML5 中的 Canvas 对文本的渲染（fillText，strokeText）性能都不太好，比如设置字体（font）、文本旋转（rotation），如果绘制较多的文本时，一些交互操作会手动很大的影响，操作起来没那么顺畅，体验将会极其差，这不是我们想要的结果，再进一步和图片的绘制进行比较比较，你会发现，绘制图片和绘制文本在性能上不是一个等级的，在性能上绘制图片会好太多。

 

我们今天就来谈谈 HT for Web 性能相关的问题。在 HT 中，有很多地方可以设置文本，每个节点上面都可以设置两个 label 和两个 note 文本，如果全开启的话，绘制一个节点就要附带绘制 4 个文本，假如说绘制 文本的性能消耗是绘制图片性能消耗的 3 倍的话，附带绘制 4 个文本，就想当与多出 12 倍的性能消耗，这节点以多的话，可想而知，不管是哪个引擎都不可能 hold 得住这样的性能消耗。

 

既然绘制文本的性能消耗无法避免，那么我们要如何提高系统的整体性能呢？换个思路，绘制文本会有高性能消耗，导致操作上面的延迟和卡顿，那么我是不是可以在操作时不绘制文本呢，将文本绘制所消耗的性能节省下来，用在其他的性能消耗上，这样是不是就可以解决操作延迟和卡顿的问题呢？