Slow/bad performance on Chrome with large amount of html

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.