当编辑attr（）和text（）（填充，描边，重量）元素时，RaphaelJS在IE8中出现大幅减速

Question

我正在用RaphaelJS调试IE8中的一些性能问题。我们正在使用raphael中的~1000个元素和文本节点构建图形，特别是一个图形在渲染时会导致我们出现问题。在IE9中，它需要2-7秒，具体取决于要渲染的机器，在IE8中需要1分钟。

您可以看到the website in question here。这是第3张图（点击它）。

基本上，我们为每个数据点创建元素，并在raphael画布上绘制它们。

我已经使用了IE Developer Tools分析器并确定当我们更改填充，描边，样式和其他一些时，它是setFillAndStroke()和attr()调用的text()函数元素的设置。 getBoundingRect()函数是setFillAndStroke()中的罪魁祸首。

这是screenshot of the profiler output

在我的研究中，我遇到过IE8问题的人，attr()和text()，例如，

所以有几个问题：

1. 您是否可以为Raphael元素设置'默认'填充和描边，以便使用该填充和描边创建它们？这应该删除对getClientBoundingRect()的调用。我试过在文档中寻找这样的功能，但没有运气。
2. 这是我们可以在不改变图形外观的情况下解决的问题吗？
3. 如果这是我们可以通过代码完成的事情，是否可以在不修改RaphaelJS的情况下这样做？
4. 还有其他想法吗？

有些人似乎在旧版本的Raphael中遇到了类似的问题，显然已经在2.0.0中修复了，但我们使用的是2.0.2版本（测试在2.1.0中也有同样的问题）。

这是issue report on github。

Answer 1

所以感谢Eliran Malka的建议我继续使用attr()更改为添加类和使用CSS，当我发现我们有一个错误导致总共178个标签而不是8（每22个间隔1个），除了主要的8个以外，其余的都在“纸张”的尺寸之外。

怀疑getBoundingRect()可能在元素屏幕外时窒息，我找到了bug的来源并修复了它，只绘制了预期的8，并且所有这些都在画布上。这将负载时间从1分钟减少到8.8秒。

因此，显着放缓的原因是使用text()在屏幕外创建元素，然后通过attr()更改其属性。

虽然8.8秒仍然不是很好，但它比1分钟和一点点（精确到72秒）大约一个数量级，所以当我们采购其余的时，我会称之为'已回答'。问题。