Question

使用TinyMCE 4测试所有浏览器时，Chrome速度非常慢。（我尝试从TinyMCE中删除所有插件，但没有任何区别。）

Chrome需要大约20-25秒才能在TinyMCE中呈现包含一些大型（500kb）嵌入式base64图像的HTML。

Internet Explorer和Firefox大约需要1秒钟，而Edge是即时的。（Edge非常快！）

Chrome上已禁用所有插件。我看过F12下的时间表，没有什么能阻止它。根据F12时间表，一切都在800毫秒内处理 - 但它仍然需要20秒才能显示出来？

仅当TinyMCE包含嵌入式base64图像时才会出现延迟。

有没有人经历过类似的行为？

更新

我注意到即使我在Chrome中打开大型文档，其加载速度也比其他浏览器慢很多。当Chrome加载文档时，您可以实际观看滚动条越来越小。

在其他浏览器中，例如Edge，整个页面会立即加载。

Answer 1

问题在于：a）Chrome尝试在初始化TinyMCE编辑器之前将<textarea>内的超长数据URI渲染为纯文本，并且b）在Chrome 49中它变得超慢，后者切换到了据说更正确的复杂文本渲染。但是，即使在此之前，要在Chrome 48及更低版本以及当前的Firefox中打开几兆字节的数据URI（在crbug.com/945203中链接），也需要20秒才能打开。

因此，如果您的工作流允许，则应简化文本区域内的HTML，而应通过直接DOM操作对其进行设置。就像从图像中删除src属性，而是通过JS中的src属性进行设置一样，初始化几乎是瞬时的：

<textarea>
  <img id=img1 title="SampleJPGImage_5mbmb.jpg" src="" alt="" width="700" height="933">
</textarea>

tinymce.init({
  selector: 'textarea',
  init_instance_callback(e) {
    e.contentDocument.getElementById('img1').src = 'data:image/jpeg;base64,............';
  },
});

或者，您可以通过内联hidden属性完全隐藏文本区域，该属性应在html本身中设置，以便Chrome浏览器在解析文件时可以看到它：

<textarea hidden>
  <img title="SampleJPGImage_5mbmb.jpg" src="data:image/jpeg;base64,...........">
</textarea>

请注意，您可能必须应用更多的变通办法，因为这些解决方案被确认只能在如上所述的标准TinyMCE初始化上工作，而没有在上述crbug中链接到测试用例中加载的过多插件。

具有大量html

1 个答案: