Slow/bad performance on Chrome with large amount of html

Question

When testing all the browsers with TinyMCE 4, Chrome is horribly slow. (I tried removing all the plugins from TinyMCE but it makes no difference.)

Chrome takes about 20-25 seconds to render some HTML in TinyMCE that contains a few large-ish (500kb) embedded base64 images.

Internet Explorer and Firefox take about 1 second and Edge is instant. (Edge is pretty damn fast!)

All plugins have been disabled on Chrome. I have looked at the timeline under F12 and nothing is holding it up. According to the F12 timeline, everything was processed in 800ms - Yet it still takes 20 seconds to show up?

The delay is only when TinyMCE contains embedded base64 images.

Has anyone experienced similar behavior?

Update:

I have noticed that even when I open large documents in Chrome, its loads a lot slower than the other browsers. You can actually watch as the scrolling bar gets smaller and smaller as Chrome loads the document.

In other browsers, such as Edge, the whole page is loaded instantly.

Answer 1

The problem is that a) Chrome tries to render the superlong data URI inside <textarea> as plain text before initializing TinyMCE editor and b) it became superslow in Chrome 49 which switched to a supposedly more correct complex text rendering. However even before that, a few megabyte data URI (linked in crbug.com/945203) would take 20 seconds to open in Chrome 48 and older as well as in current Firefox.

So if your workflow allows, you should simplify the HTML inside the textarea and instead set it via direct DOM manipulation. Like removing src attributes from the images and instead setting them via src property in JS would make the initialization almost instantaneous:

<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,............';
  },
});

Alternatively you can hide the textarea entirely via an inline hidden attribute which should be set in the html itself so Chrome sees it while parsing the file:

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

Note, you may have to apply more workarounds as these solutions were confirmed to work only on the standard TinyMCE init as shown above - that is without the plethora of plugins that you load in your test case linked in crbug above.