uCKEditor 中的图像映射性能不佳

Question

我们一直在使用uCKEditor plugin for umbraco for a few months now. We also installed a plugin for it called 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. In a page with 5 images, I started adding imagemaps。

第一个 imagemap 显示性能没有下降。在第二个图像映射之后，每个用户操作都会出现轻微的延迟。之后的每个 imagemap 都会使延迟逐渐变得更糟，以至于在具有 5 个图像映射的 5 张图像中，编辑器需要 4-5 秒才能将光标移动 1 个字符距离 left/right。这就是我的内容编辑同事所经历的。

我尝试在图片上添加 imagemaps manually(without the plugin) and I noticed that we still get the performance issues. However, the editor seems to run fine in <>Source view, but as soon as we switch back to default the performance drops dramatically. It seems that the editor is having problems rendering the 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 中的图像映射性能不佳

Imagemaps in uCKEditor bad performance

performance

plugins

imagemap

umbraco

ckeditor