4

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

您可以在此处查看相关网站。这是第三张图（点击它）。

本质上，我们为每个数据点创建元素并将它们绘制在拉斐尔画布上。

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

这是分析器输出的屏幕截图

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

所以有几个问题：

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

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

这是github 上的问题报告。

4

1 回答 1

1

attr()因此，感谢 Eliran Malka 的建议，当我发现我们有一个错误导致总共绘制 178 个标签而不是 8 个（每 22~ 个间隔 1 个）时，我正在继续从使用更改为添加类和使用 CSS，所有但其中主要的 8 个超出了“纸张”的尺寸。

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

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

虽然 8.8 秒仍然不是很好，但它比 1 分多一点（准确地说是 72~ 秒）要好一个数量级，所以我将把它称为“已回答”，而我们会找出其余的问题。

于 2012-03-28T04:49:42.417 回答