具有大量 html 的 Chrome 上的慢/差性能答案

【问题标题】：Slow/bad performance on Chrome with large amount of html具有大量 html 的 Chrome 上的慢/差性能
【发布时间】：2019-03-25 19:46:39
【问题描述】：

在使用 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，整个页面会立即加载。

【问题讨论】：

如果您打开一个具有相同内容的标准 HTML 文件（没有 TinyMCE），Chrome 会突然变得更快吗？如果这是 Chrome 中的 TinyMCE 问题或 Chrome 问题，我会先进行隔离。
Chrome 即使是标准内容也很慢。
问题似乎是 Chrome 而不是 TinyMCE 本身 - 也许更改标题并删除 TinyMCE 标签是有意义的，因为这对编辑器来说不是问题是 Chrome 的问题吗？
我在使用 Chrome 和 TinyMCE 时遇到了类似的问题。我有 8 个内联编辑器，浏览器会在几秒钟后响应滚动。
是的。这也发生在最新的 TinyMCE (v.5.0.3) 中。我已经意识到，当拥有 6MB 或更多的图像/图像时会出现问题。这可以在最新的 Chrome (v75) 和 IE (v11.285) 中重现。这在 Edge 和 Firefox 中运行良好（加载需要时间。但比 Chrome 或 IE 快得多）

标签： google-chrome image-processing tinymce base64

【解决方案1】：

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

因此，如果您的工作流程允许，您应该简化 textarea 内的 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 链接的测试用例中加载的过多插件。

【讨论】：