时间戳

首页 > 解决方案 > 在 textarea 中交换大型数据集的最快方法

javascript - 在 textarea 中交换大型数据集的最快方法

问题描述

我的 UI 中可能有几十组日志。为了节省资源，它们一次一个，在初始日志之后，我们只接收部分更新，这些更新会附加到预先存在的数据中。它们达到了 9000 行左右的限制，我们预计一次最多 20 行。

通过选择一个选项卡来显示每个日志。UI 在 Bootstrap 中，虽然我们正在使用该tab-nav组件，但我们并没有切换内容区域。我们只是继续重复使用单个文本区域。

我试过了：

  1. value只是在 DOM 中分配textarea
  2. 在更新值之前从 DOM 中分离（参见下面的代码：）
  3. 与上面类似，但更新逻辑作为一个函数被包装在旧的“setTimeout”技巧中以强制异步行为。

来自 #2 尝试的示例代码：

$('#myTab a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var myId = e.target.dataset.tabid; // the "e" is a show.bs.tab event
  var textArea = document.getElementById('logs');
  var par = textArea.parentElement;
  par.removeChild(textArea);
  textArea.value = window.storedData[myId]; // storage for prototyping
  par.appendChild(textArea);
})

归根结底，它们的表现都非常相似，这让我猜测回流不是问题，而且“异步”技巧并没有给我带来任何好处，因为 DOM 更新本身仍然必须在它的在适当的时候穿线。

有没有更好的方法来有效地“交换”大量数据？我的总体目标是在交换发生时不阻塞 UI。

[更新：] 尽管有标题，但我并不完全同意它是一个文本区域。但它是理想的，因为用户可以 CTRL-A 并执行其他纯文本选择操作，这些操作在使用无序列表或表格时有时会出错。

标签： javascript

解决方案

在同事的建议下，我做的最有效的事情是禁用浏览器的内置生产力工具：

<textarea 
  autocomplete="off" 
  autocorrect="off"
  autocapitalize="off" 
  spellcheck="false"
  rows="15"
  class="form-control" 
  id="logs">
</textarea>

我不认为使用“行”属性（而不是 CSS 高度）很重要，但你永远不知道。它主要是禁用自动内容和拼写检查。将插入时间减少了大约三分之一，这使其目前的响应速度可以接受。如果未来的需求不同，将根据 Gabriele 的建议调查 clusterize.js.org。

推荐阅读