internet-explorer-8 - 编辑元素的 attr() 和 text()(填充、描边、粗细)时，RaphaelJS 在 IE8 中大幅减速

Question

我正在使用 RaphaelJS 在 IE8 中调试一些性能问题。我们正在 raphael 中从大约 1000 个元素和文本节点构建图形，特别是一个图形在渲染时给我们带来了问题。在 IE9 中，根据机器渲染需要 2-7 秒，在 IE8 中需要 1 分钟以上。

你可以看到the website in question here .这是第三张图(单击它)。

本质上，我们为每个数据点创建元素并将它们绘制在 raphael Canvas 上。

我使用了 IE 开发人员工具分析器并确定它是 setFillAndStroke()从 attr() 调用的函数和 text()当我们更改元素的填充、描边、样式和其他一些设置时。 getBoundingRect()函数是 setFillAndStroke() 的罪魁祸首.

这是一个 screenshot of the profiler output

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

所以有几个问题:

您能否为 Raphael 元素设置“默认”填充和描边，以便使用该填充和描边创建它们？这应该删除对 getClientBoundingRect() 的调用.我试过在文档中寻找这样的功能，但没有运气。

这是我们可以在不改变图形外观的情况下解决的问题吗？

如果这是我们可以通过代码完成的事情，是否可以在不修改 RaphaelJS 的情况下做到这一点？

还有其他想法吗？

有人在旧版本的 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()当元素离开屏幕时可能会窒息，我找到了错误的来源并修复了它，只绘制了预期的 8 个，并且所有这些都在 Canvas 上。这将加载时间从 1 分钟加减少到 8.8 秒。

所以急剧放缓的原因是使用 text()在屏幕外创建元素，然后通过 attr() 更改它们的属性.

虽然 8.8 秒仍然不是很好，但它比 1 分多一点(准确地说是 72 秒)要好一个数量级，所以我将在我们寻找其余问题的同时将其称为“已回答”。