Question

我的UI中可能有数十套日志。为了节省资源，它们一次只能出现一次，并且在初始日志之后，我们仅收到部分更新，这些更新将附加到预先存在的数据中。它们达到9000行左右的限制，我们预计一次最多可以有20条内存。

通过选择一个选项卡显示每个日志。 UI位于Bootstrap中，尽管我们使用tab-nav组件，但我们并未切换内容区域。我们只是继续重复使用一个文本区域。

我尝试过：

只需将value分配到DOM中的文本区域即可
在更新值之前从DOM分离（请参见下面的代码：）
与上述类似，但将更新逻辑作为函数封装在旧的“ setTimeout”技巧中，以强制执行异步行为。

两次尝试中的示例代码：

$('#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并执行其他使用纯文本选择的东西，而这些东西有时在使用无序列表或表时会显得笨拙。

Answer 1

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

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

我不认为使用“ rows”属性（而不是CSS高度）很重要，但是您永远不会知道。它主要是禁用自动填充和拼写检查。将插入时间减少了大约三分之一，这使它现在处于可接受的响应速度。如果未来的需求有所不同，请按照Gabriele的建议调查clusterize.js.org。

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

1 个答案: