CKEditor在setData()时存在内存泄漏问题

Question

我认为与CKeditor的setData()函数相关的一些大的内存泄漏问题。我有一个Web应用程序，用户可以使用JavaScript设计自己的内容。 CKEditor用作所述设计每个部分的用户编写内容的所见即所得编辑器。

每次用户单击其设计中的可编辑文本元素时，都会调用editor.setData，并将CKEditor数据设置为正在单击的用户设计文本元素中的任何内容。

这对于几次来说效果很好，但每当用户点击新的文本元素并调用.setData（）时，该应用程序会变得越来越慢，直到网站崩溃。我尝试在我的JavaScript中禁用setData（）函数，当我这样做时，我没有内存泄漏或性能问题。

是否有人遇到过类似的问题？ 有人有任何建议如何避免这种内存泄漏和性能损失吗？

导致性能损失的函数是：

function clickTextElement() {
    var location = $(this);
    $('.selected').removeClass('selected');
    location.addClass('selected');
    $('#main-tools').hide();

    if(location.hasClass('textarea')){
        $('#imageeditor').hide();
        $('#texteditor').show();
        editor.setData( $('.selected').html() );
    }
}

- Marcus Lind

---

听起来很不可能是ckeditor的问题。我已经使用ckeditor很长时间了，有时在编辑器的生命周期中会进行数十次甚至上百次的setData()调用。通过拍摄堆快照/记录堆分配（Chrome开发者工具）来检查占用内存的内容。不同浏览器的性能分析工具各不相同，因此请尝试几种工具并尝试确定问题所在。 - Joel Peltonen

你能否展示一下你使用的 cke 版本、配置和输入类型？你是否使用了任何自定义插件？ - Joel Peltonen

Answer 1

我通过首先添加以下代码，成功地提高了该函数的性能：

editor.document.clearCustomData();
editor.document.removeAllListeners();
editor.window.getFrame().clearCustomData();
editor.window.getFrame().removeAllListeners();

在函数clickTextElement()开始时，我们的想法是在加载新数据之前清除与编辑器相关的所有数据。我不确定哪个调用能够最大程度地提高性能，我尝试逐个取消注释以查看性能损失/改进情况，但很难区分它们。

我还从CKEditor配置中删除了许多字体。以前，我在CKEditor中加载了许多Google字体，可能有50多种。现在我将其减少到约15种。

这两个改变共同显著提高了性能。之前，我可以点击（调用clickTextElement()）大约10-20次，然后内存就会耗尽。现在，我已经尝试点击/调用该函数数百次，而没有任何明显的性能下降。

如果有人想添加关于此修复以及clearCustomData()和removeAllListeners()函数调用的信息，请随意添加。

- Marcus Lind

---

你能否在http://dev.ckeditor.com上报告这个问题的票吗？我们肯定需要一个展示该问题的样本，因为必须满足一些额外的要求才能重现此问题。正如Nanotlep所写-在正常情况下，CKEditor不会导致这种泄漏-例如，所有清除数据和侦听器的方法都被调用，因此奇怪的是您不得不自己调用它们。 - Reinmar