首页 > 解决方案 > 允许网站在执行 document.innerHTML 命令时做出响应

问题描述

快速总结一下,我有一个将 HTML 注入 HTML 文件的 javascript 文件。用户从日期选择器中选择一个日期并读取一个 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 时,用户几乎可以向下滚动页面。

标签: javascripthtmlinnerhtmldocument.write

解决方案


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

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

希望这可以帮助你。


推荐阅读