JavaScript 更新 textarea 冻结 Chrome,但不冻结 Firefox
Posted
技术标签:
【中文标题】JavaScript 更新 textarea 冻结 Chrome,但不冻结 Firefox【英文标题】:JavaScript update textarea freezes Chrome, but not Firefox 【发布时间】:2018-07-18 10:48:36 【问题描述】:在一个页面上有一个上传按钮,允许用户上传一个文本文件,文件内容被输入到同一页面上的文本区域框中。在 Firefox 中使用此功能测试 3MB 文本文件时,它工作正常。但是当与 Chrome 一起使用时,浏览器会锁定,并且动画加载器会冻结一段时间,然后页面会再次响应。下面是相关的js代码:
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 的情况下进行更新吗?用户将在提交到 DB 之前编辑文件。
我禁用了拼写检查、自动完成等功能。
【问题讨论】:
将 3MB 放入textarea
?我猜浏览器只需要一些时间来完成所有的布局。
【参考方案1】:
这似乎是 Chrome 中的一个问题,即使在粘贴大文本时也是如此。我通过检查文件大小以及是否超过 x 上传而不在浏览器中查看文本来缓解它。
var size = document.getElementById('uploadCorpus').files[0].size;
【讨论】:
以上是关于JavaScript 更新 textarea 冻结 Chrome,但不冻结 Firefox的主要内容,如果未能解决你的问题,请参考以下文章
仅在 IE 中编辑后对 textarea 样式的 Javascript 进行更新