Question

我有一个看起来像这样的HTML文件：

self.id

加载此文件时，我会立即看到文本，没有延迟

对我来说，下一步是使用js加载文本。像这样

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

现在，文本的加载要慢得多-单击set_text按钮时，浏览器冻结约5秒钟，然后将文本呈现在pre中。

我的问题是：有什么方法可以加快JS版本并使其与普通html一样快？

edit：我正在寻找一个简单的解决方案-就像HTML解决方案一样。排除了分块加载。另外，这是一个众所周知的问题吗？如果是这样，什么是最佳解决方案？

Answer 1

只需隐藏元素：

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

然后显示：

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

Answer 2

这里，文本是按块加载的。与您的示例中的一套相比，它可能需要更长的时间，但是没有挂起。

<button type="button" id=set_text>set text </button>
<pre ></pre>
<script type="text/javascript">
    var longText = "..your long text...";
    document.querySelector('#set_text').onclick = e => load('');
    var chunkSize = 100000;
    var start = -chunkSize;
    function load(text) {
        var node = document.createTextNode(text);
        document.querySelector('pre').appendChild(node);

        if (start + chunkSize >= longText.length) {
            alert("Completed");
            return;
        }

        start += chunkSize;
        chunkSize = Math.min(chunkSize, longText.length - start);
        setTimeout(load, 0, longText.substr(start, chunkSize));
    }
</script>

使用innerText加速HTML渲染

2 个答案: