google-chrome - 具有大量 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> 中呈现超长数据 URI在初始化 TinyMCE 编辑器之前作为纯文本和 b) 它在 Chrome 49 中变得超慢，它切换到一个据称更正确的复杂文本渲染。然而，即使在此之前，几兆字节的数据 URI(链接在 crbug.com/945203 中)需要 20 秒才能在 Chrome 48 及更早版本以及当前的 Firefox 中打开。

因此，如果您的工作流程允许，您应该简化 textarea 中的 HTML，而是通过直接 DOM 操作来设置它。就像从图像中删除 src 属性并通过 src 设置它们一样JS 中的属性将使初始化几乎是瞬间的:

<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 完全隐藏 textarea应该在 html 本身中设置的属性，以便 Chrome 在解析文件时看到它:

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

请注意，您可能需要应用更多的解决方法，因为这些解决方案已确认仅适用于标准 TinyMCE init，如上所示 - 即没有您在上面 crbug 中链接的测试用例中加载的过多插件。