允许网站在执行 document.innerHTML 命令时响应

Question

快速总结一下，我有一个 javascript 文件，它正在将 HTML 注入到 HTML 文件中。用户从日期选择器中选择一个日期并读取 CSV 文件。然后输出包含从日期选择器中选择的日期的每一行，如下所示：

let messageCode = `
     <div class="row msg_container base_sent">
          <div class="col-md-10 col-xs-10">
                <div class="messages msg_sent">
                       <p>${message}</p>
                       <time datetime="2009-11-13T20:00">${user} • ${time}</time>
                </div>
          </div>
    </div>
   `;

container.innerHTML += messageCode;

但是，通常需要输出大约2,000条消息。这导致用户在从日期选择器中选择日期后有时不得不等待 45 秒。

我想知道是否有一种方法可以在允许用户滚动的同时进行 HTML 注入。因此，在注入 HTML 时，用户几乎可以向下滚动页面。

Answer 1

与其每次用户选择日期时从 CSV 文件中获取数据，不如在页面加载时获取文件、缓存它并从缓存中读取数据会更好。

有一些插件可以帮助渲染大数据，但目前我想不出一个，但一旦想到就会通知你。

希望对您有所帮助。

Answer 2

尝试将 CSV 查找任务包装在 async 函数中，并 await 返回结果，然后再注入 DOM。

您的 async 函数之外的任何代码都将执行，并且您的 innerHTML 注入将运行一旦您的 await 查找返回。

允许网站在执行 document.innerHTML 命令时响应

Allow website to be responsive whilst document.innerHTML commands are being executed

html

javascript

innerhtml

document.write