Question

我们几个月来一直在使用umbraco的uCKEditor插件。我们还为它安装了一个名为Image Maps的插件。

最近，我们的一位内容编辑注意到在编辑某些页面时性能急剧下降。经过一段时间的测试后，我注意到从源中删除所有图像映射完全解决了性能问题，编辑器再次快速响应。

插件添加的imagemap示例：

<img src="image.jpg" usemap="#imgmap20156281337" />
<map id="imgmap20156281337" name="imgmap20156281337">
  <area coords="75,74,183,206" href="http://www.example.com" shape="rect"/>
  <area coords="408,169,533,368" href="http://www.example.com" shape="rect" />
</map>

实际上，该插件只是在图像中添加了几行HTML，因此我无法理解为什么它会如此严重地影响性能。

因此，我决定检查断点在哪里添加imagemaps。在包含5张图片的页面中，我开始通过插件向这些图片添加imagemaps。

第一个imagemap显示没有性能下降。在第二个图像映射之后，每个用户操作都会出现轻微的延迟。之后的每个imagemap都会使延迟逐渐恶化到5个图像为5 imagemaps的点，编辑器需要4-5秒才能将光标向左/向右移动1个字符。这就是我的内容编辑同事所经历的。

我尝试手动添加imagemaps（没有插件），我注意到我们仍然遇到性能问题。但是，编辑器似乎在＆lt;＆gt; Source视图中正常运行，但只要我们切换回默认值，性能就会急剧下降。似乎编辑器在图像上呈现imagemaps时遇到了问题。

在同一个编辑器中处理多个图像映射时，导致这种可怕性能的原因是什么？我们能做些什么吗？

Answer 1

我发现了造成这个问题的原因！

在与imagemaps插件的创建者沟通时，他将我推荐到他的测试页面：http://www.martinezdelizarrondo.com/ckplugins/imagemaps.demo4/

当我们在uCKEditor中本地工作并从媒体选择器插入图像时，将使用相对本地路径插入图像，如：

src="/media/1370030/4483_a.jpg"

然后我尝试将相同的html粘贴到远程测试页面，当然，我必须包含图像的完整域路径：

src="http://www.dphtrading.dk/media/1370030/4483_a.jpg"

我注意到的第一件事就是在本地，uCKEditor在特定图像的图像映射中指定的线上绘制边框。我用截图来说明：

http://imgur.com/dUJMzWn

在远程测试服务器上，没有边框，也没有性能问题。所以我将图像的完整域路径插入到uCKEditor中，这解决了性能问题（并出于某种原因删除了图像映射边框）。

看起来像uCKEditor，可能CKEditor一般不喜欢同一图像的相对文件路径和图像映射的组合。

uCKEditor中的图像映射性能不佳

1 个答案: