Ckeditor5: Editor Hangs When Loading Large Document

Created on 24 May 2018 · 7Comments · Source: ckeditor/ckeditor5

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

Classic editor : ckeditor5/10.0.1 (from the demo page through CDN)

Obtained from : https://docs.ckeditor.com/ckeditor5/latest/builds/guides/quick-start.html

📋 Steps to reproduce

Copy the source from the link above
Change the to be a <div\></li> <li>Add 3500+ "<divs\><p\>TEXT CONTENT</p></div>" to the root <div\></li> <li>Load this page in Chrome (latest) or Firefox(Quantum, latest), the page will hang. It seems to run into an infinite loop (scripting, possibly from conversion). It also kills the debugger, context menu, and scrollbar in Chrome.</li> </ol> <h2>✅ Expected result</h2> <p>Page should load within at least a few minutes (a few seconds really...).</p> <h2>❎ Actual result</h2> <p>Page does not fully load, it seems stuck on scripting (confirmed via task manager in Chrome and profiler).</p> <h2>📃 Other details that might be useful</h2> <p>This does not happen if you keep the amount of nodes relatively low, say a few hundred. Also, this issue is not present with the CK4 demo. I've attached a sample file to reproduce the issue.</p> </div> <div> <span class="badge badge-primary">bug</span> <div class="float-right"> <a class="text-muted" href="https://www.github.com/ckeditor/ckeditor5/issues/1041" rel="nofollow noreferrer" target="_blank" onclick="dataLayer.push({'event': 'GAEvent', 'eventCategory': 'click', 'eventAction': 'source_bottom', 'eventLabel': 'Source Bottom', 'eventValue': undefined});">Source</a> </div> </div> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/32982692?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>bagelparser</strong> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div id="ph-above-best-comment"> </div> </div> <div class="col-12 mb-4 best-comment"> <div> <h2 class="mb-3"><i class="fas fa-check mr-2"></i>Most helpful comment</h2> </div> <div class="card card-custom border-lg-success mb-4"> <div class="card-body pt-3 pb-3 markdown"> <blockquote> <p>We have considered per-chapter editing, but this greatly removes from the user experience (no global search, find & replace, multiple tabs, etc...)</p> </blockquote> <p>This problem has been already solved by many IDEs (features such as "Find in files", "Replace in files" etc.) - it is possible to guarantee proper UX allowing people to split content into smaller chunks (files in this example).</p> <p>When someone works on a specific chapter and make use of "replace" he may be presented just an additional option "Replace in all chapters" etc.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars3.githubusercontent.com/u/545175?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>wwalc</strong> <span class="text-muted ml-1">on 12 Jun 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">2</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="9295564578" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="col-12 d-flex align-items-center mb-4"> <h2>All 7 comments</h2> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@Mgsy</strong> Could you check if there's some breaking point at which this fails? Or is it happening gradually?</p> <p>Also, does it happen if there are no <code><div></code>s inside the content? The thing is that <code><div></code>s are not supported by any of the features so they get rejected. There's a chance that the algorithm handling unhandled nodes has some issues.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/156149?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Reinmar picture"> <strong>Reinmar</strong> <span class="text-muted ml-1">on 25 May 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I've checked this case and here are my observations: </p> <ul> <li>The editor hangs on loading, but after some amount of time it loads the content (remember that 3500 elements must be handled)</li> <li>The editor loads much faster when there are no <code><div></code> elements inside the content.</li> </ul> <p>Some stats:</p> <p><strong>With <code><div></code> in the content:</strong><br /> Fast machine - loading time: 29s<br /> Slow machine - loading time 1m08s</p> <p><strong>Without <code><div></code> in the content:</strong><br /> Fast machine - loading time: 9s<br /> Slow machine - loading time: 28s</p> <p>Generally, the loading time increases with raising amount of elements.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars3.githubusercontent.com/u/20988892?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Mgsy picture"> <strong>Mgsy</strong> <span class="text-muted ml-1">on 28 May 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Thanks!</p> <p>9s is still not a great time, but 3500 paragraphs is a lot of content. Actually, I'm curious when in real life people are editing such a long text. <strong>@bagelparser</strong>, did you encounter this when testing performance on purpose or do you really work with such a long text? Did you consider splitting this into multiple editors (e.g. so you edit one chapter of a book at once)?</p> <p>As for what to do next – this issue requires profiling. But I don't think that exceeding 300 paragraphs happens often so optimising editor performance for 3500 nodes is not going to be high on our priority list (at least at this stage).</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/156149?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Reinmar picture"> <strong>Reinmar</strong> <span class="text-muted ml-1">on 29 May 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Note to myself – I just checked that my longest article ever (or rather – "so far") exceeded 100 paragraphs and it was 14 pages long. Google Docs start to lag at around 90+ pages so that would be theoretically 900 paragraphs . Just to put that 3500 nodes into a perspective :)</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/156149?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Reinmar picture"> <strong>Reinmar</strong> <span class="text-muted ml-1">on 29 May 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>We routinely have documents that have more than 3500 elements in them. Real-life examples that came up in our testing (for CK4 mind you) can be comparable to War and Peace by Leo Tolstoi, which stands at around 16000 HTML elements on Gutenberg. Another one : "Great Expectations", Charles Dickens on Gutenberg (~4800 elements).</p> <p>We have some more complicated examples with tables, figures, etc... These can sometimes be up to 500 pages long (in PDF preview).</p> <p>We have considered per-chapter editting, but this greatly removes from the user experience (no global search, find & replace, multiple tabs, etc...).</p> <p>Currently, these performance issues are preventing us from porting over to CKEditor 5 from CKEditor 4.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/32982692?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="bagelparser picture"> <strong>bagelparser</strong> <span class="text-muted ml-1">on 29 May 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I'm sure we could find even longer novels. That wasn't my point that I wrote the longest article ever :D The point was – such a long content doesn't have to necessarily be edited at once. Also, if we'd ever make the editor able to handle such a long content, you can always find N times longer things (e.g. HTML5 living spec which soon will be the longest text ever created by men).</p> <p>CKEditor 5 has a much richer data model and much more logic that controls and renders it than CKEditor 4 (which did everything in-place, in the DOM, so only the browser was a real limitation). This approach must, by definition, be slower than what CKEditor 4 offers. We can spend time optimizing it, but we'll never reach the same level of performance. Nor will any other application which wasn't designed with this requirement in mind. It's a tradeoff one needs to make.</p> <p>Anyway, I'm quite sure there's a lot that we could optimise in the current implementation. Performance, simply, wasn't our goal yet. If you'd like to discuss this option, please contact us at <a rel="nofollow noopener" target="_blank" href="https://ckeditor.com/contact/.">https://ckeditor.com/contact/.</a></p> <p>But at the same time, I recommend considering a bit different approach to handling such a long content.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/156149?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Reinmar picture"> <strong>Reinmar</strong> <span class="text-muted ml-1">on 29 May 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <blockquote> <p>We have considered per-chapter editing, but this greatly removes from the user experience (no global search, find & replace, multiple tabs, etc...)</p> </blockquote> <p>This problem has been already solved by many IDEs (features such as "Find in files", "Replace in files" etc.) - it is possible to guarantee proper UX allowing people to split content into smaller chunks (files in this example).</p> <p>When someone works on a specific chapter and make use of "replace" he may be presented just an additional option "Replace in all chapters" etc.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars3.githubusercontent.com/u/545175?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="wwalc picture"> <strong>wwalc</strong> <span class="text-muted ml-1">on 12 Jun 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">2</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(326198359, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(326198359, 1);" onclick="rate(326198359, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(326198359, 2);" onclick="rate(326198359, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(326198359, 3);" onclick="rate(326198359, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(326198359, 4);" onclick="rate(326198359, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(326198359, 5);" onclick="rate(326198359, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/ckeditor5/153956100/gulp-watch-tasks-fails-on-temporary-files-created-by-ide">Gulp watch tasks fails on temporary files created by IDE</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/247363?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="jodator picture"> <strong class="pr-1" dir="ltr">jodator</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ckeditor5/386159288/invalid-links-in-documentation">Invalid links in documentation</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars2.githubusercontent.com/u/9017322?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="msamsel picture"> <strong class="pr-1" dir="ltr">msamsel</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ckeditor5/483995868/placeholder-is-still-shown-if-editor-isreadonly">Placeholder is still shown if editor isReadOnly</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars1.githubusercontent.com/u/4604206?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="MCMicS picture"> <strong class="pr-1" dir="ltr">MCMicS</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ckeditor5/268808462/research-css-flex-box-layout-in-the-ui">Research CSS flex box layout in the UI</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars1.githubusercontent.com/u/1099479?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="oleq picture"> <strong class="pr-1" dir="ltr">oleq</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ckeditor5/457252910/audio-player-not-stored-for-editing-again">Audio player not stored for editing again</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/40589021?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="hybridpicker picture"> <strong class="pr-1" dir="ltr">hybridpicker</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/ckeditor/ckeditor5/issues/1041" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>