ускорить рендеринг HTML с помощью innerText

Question

У меня есть HTML-файл, который выглядит так:

<code><pre>very long text (3 megabytes)

при загрузке этого файла я сразу вижу текст, без задержки

Следующим шагом для меня было загрузить текст с помощью js. вот так

<code><button type="button" id=set_text>set text </button>
<pre>

var the_long_text // инициализируется с тем же тестом 3 мегабайта document.querySelector ( '# set_text'). OnClick = е => document.querySelector ( 'до'). InnerText = the_long_text

теперь текст загружается намного медленнее - при нажатии кнопки set_text браузер останавливается примерно на 5 секунд, а затем визуализирует текст в пре.

мой вопрос: есть ли способ ускорить версию JS и сделать ее такой же быстрой, как обычный HTML?

edit: я ищу простое решение - точно так же, как решение HTML. это исключает частичную загрузку. Кроме того, это хорошо известная проблема? если да, то как лучше всего это решить?

Answer 1

Здесь текст загружается кусками. Это может занять немного больше времени, чем с одним сетом, как в вашем примере, но без зависания.

<code><button type="button" id=set_text>set text </button>
<pre >

var longText = ".. ваш длинный текст ..."; document.querySelector ('# set_text'). onclick = e => load (''); var chunkSize = 100000; var start = -chunkSize; функция load (текст) { var node = document.createTextNode (text); document.querySelector ( 'предварительно') AppendChild (узел). if (start + chunkSize> = longText.length) { предупреждение ( "Завершено"); вернуть; } start + = chunkSize; chunkSize = Math.min (chunkSize, longText.length - start); setTimeout (load, 0, longText.substr (start, chunkSize)); }

Answer 2

Просто скройте элемент:

<code> <pre id="content" style="display:none">very long text (3 megabytes)

Затем покажите это с помощью:

 document.querySelector("content").style.display = "block";