JavaScript更新textarea冻结Chrome，但不冻结Firefox [英] JavaScript update textarea freezes Chrome, but not Firefox

问题描述

在页面上有一个上传按钮，允许用户上传文本文件，并且文件内容被输入到同一页面上的文本区域框中.在Firefox中使用此功能使用3MB文本文件进行测试时，它可以正常工作.但是，当与Chrome一起使用时，浏览器会锁定，动画加载器会冻结一段时间，然后页面会再次响应.这是相关的js代码:

On a page there is an upload button that allows a user to upload a text file and the file contents are input into a textarea box on the same page. When testing with a 3MB text file using this function in Firefox, it works fine. But when using with Chrome, the browser locks up and the animation loader freezes for a bit and then the page becomes responsive again. Here is the relevant js code:

function getFile(event) {
  const input = event.target
  if ('files' in input && input.files.length > 0) {
    placeFileContent(document.getElementById('corpus'), input.files[0]);
    setTimeout(function() {
      $('#characters').text($('#corpus').val().length.toLocaleString());
      $('#words').text($('#corpus').val().trim().split(/\s+/).length.toLocaleString());
    }, 10);
  }
}

function placeFileContent(target, file) {
  readFileContent(file).then(content => {
    target.value = content;
  }).catch(error => console.log(error))
}

function readFileContent(file) {
  const reader = new FileReader()
  return new Promise((resolve, reject) => {
    reader.onload = event => resolve(event.target.result)
    reader.onerror = error => reject(error)
    reader.readAsText(file)
  })
};

上传按钮代码:

$('#uploadCorpus').on('change', function(event) {
  $("#corpus").LoadingOverlay("show");
  setTimeout(function() {
    getFile(event);
  }, 1000);
  $("#corpus").LoadingOverlay("hide", true);
})

我删除了动画，并没有对字/字符进行计数，问题仍然存在.使用Chrome开发工具，在阅读文本后，布局操作就会出现滞后.当我只是将内容放入var中时，浏览器中没有滞后.除了更新textarea值之外，还有其他方法可以在不锁定UI的情况下进行更新?用户将在提交给数据库之前编辑文件.

I removed the animation, abd the counting of words/characters and the problem still persists. Using Chrome dev tools, the lag is in the layout action afte the text has been read. When I just put the content into a var, there is no lag in the browser. Instead of updating the textarea value, is there some other way of updating without locking the UI? The user will edit the file before submitting to DB.

我禁用了拼写检查，自动填充等功能.

I disabled spellcheck, autocomplete, etc.

推荐答案

即使粘贴大文本，这在Chrome中似乎也是一个问题.我通过检查文件大小以及是否在x上载而不在浏览器中查看文本来缓解这种情况.

This seems to be an issue in Chrome even when pasting large text. I mitigated it by checking file size and if over x upload without viewing text in browser.

var size = document.getElementById('uploadCorpus').files[0].size;

这篇关于JavaScript更新textarea冻结Chrome，但不冻结Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！