具有大量 html 的 Chrome 性能缓慢/糟糕

Question

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

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

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

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

只有当 TinyMCE 包含嵌入的 base64 图像时才会出现延迟。

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

更新：

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

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

Answer 1

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

因此，如果您的工作流程允许，您应该简化文本区域内的 HTML，并通过直接 DOM 操作来设置它。就像从图像中删除 src 属性并通过srcJS 中的属性设置它们一样，初始化几乎是瞬时的：

<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 init，如上所示 - 即没有您在上面 crbug 中链接的测试用例中加载的过多插件。