Slow/bad 在 Chrome 上的表现有大量 html

Question

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

Chrome 在 TinyMCE 中渲染一些 HTML 需要大约 20-25 秒，其中包含一些大的 (500kb) 嵌入的 base64 图像。

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

已在 Chrome 上禁用所有插件。我查看了 F12 下的时间线，没有任何阻碍。按照F12的时间线，800ms处理完了，居然还要20秒才出现？

延迟仅在 TinyMCE 包含嵌入的 base64 图像时出现。

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

更新：

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

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

Answer 1

问题是 a) Chrome 在初始化 TinyMCE 编辑器之前尝试将 <textarea> 中的超长数据 URI 呈现为纯文本，并且 b) 它在 Chrome 49 中变得超慢切换到据称更正确的复杂文本呈现。然而，即使在此之前，几兆字节的数据 URI（在 crbug.com/945203 中链接）在 Chrome 48 及更早版本以及当前的 Firefox 中也需要 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 链接的测试用例中加载的过多插件。

Slow/bad 在 Chrome 上的表现有大量 html

Slow/bad performance on Chrome with large amount of html

base64

google-chrome

tinymce

image-processing