当里面有很多文本时，在 textarea 中输入超级慢
Posted
技术标签:
【中文标题】当里面有很多文本时，在 textarea 中输入超级慢【英文标题】：typing in textarea super slow when lots of text inside 【发布时间】：2013-05-20 03:03:38 【问题描述】：我在 Chrome 中试过这个。有一个里面有很多文本的文本区域，最后编辑部分变得超级慢。光标和键盘输入响应开始爬行。
但是，如果我将 CSS 链接从 <head> 移动到 </body> 之后，它就不会再变慢了。任何想法为什么会存在这种现象？
使用的代码：
<!DOCTYPE html>
<html>
<head>
<style>textarea width: 400px; height: 400px;</style>
<link href="1.css" rel="stylesheet" type="text/css">
</head>
<body>
<textarea name="content"></textarea>
</body>
</html>
这个html实际上是由后端脚本生成的，它将用数千行文本填充textarea的内容。当用户向下滚动到内容的末尾时，这就是缓慢开始的地方。如果头部区域的css去掉，会很快。
【问题讨论】：
多少文本是“大量文本”？此外，CSS 应始终包含在文档的head 标记中以用于呈现目的。
@JamesDonnelly 请查看已编辑的问题。
手数是多少？ 1000000000000 个字符？
@DiederikEEn 看起来更像行号。在 textarea 中大约 5000 行时，它开始变慢。每行大约几个字。
【参考方案1】：
将spellcheck 设置为false：
<textarea spellcheck="false"></textarea>
这可能会有所帮助。
根据奥古斯丁的建议，您也可以尝试添加这些人：
<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
【讨论】：
感谢我添加了 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" 并解决了我的性能问题。谢谢！【参考方案2】：我也偶然发现了这个问题，在我的情况下，只有铬浏览器受到影响。 -> https://code.google.com/p/chromium/issues/detail?id=237433
【讨论】：
来自 Chromium 问题 237433：“...它对关闭拼写更正（通过右键单击该字段）有很大帮助（想想 100 倍）。”,但是在最近的 Chrome 版本中，在 textarea 的右键上下文菜单中没有更多选项可以关闭拼写。【参考方案3】：我遇到了同样的问题，但我用下一个属性ng-model-options=" updateOn: 'blur' "解决了它
试试
<textarea ng-model-options=" updateOn: 'blur' "></textarea>
【讨论】：
【参考方案4】：没有看到一个活生生的例子，很难说。但有几个可能的原因：
您在 textarea 中使用自定义字体（font-face？SIFr？），由于需要额外的开销，这会降低浏览器的速度。 尤其是如果您使用的是 SIFr 之类的东西！ 验证问题：您的 HTML/CSS 是否有效？尝试通过 W3 验证运行它：(HTML, CSS)。 您是否在页面上使用 javascript？使用 textarea 可能会触发一些验证或其他过程？我的直觉是，它是上述最后两点之一，尝试帮助解决问题，尝试：
通过验证器运行您的标记并解决提出的任何问题。它仍然这样做吗？ 禁用 JavaScript 并加载页面。它仍然这样做吗？我希望你能很快缩小原因。
PS：不要把 CSS 放在任何地方，而是放在头上 - 这会导致你各种其他问题！
【讨论】：
【参考方案5】：如果问题仅出现在 Chrome 中，则可能是拼写检查器。
根据@PapaKai 提供的链接，禁用拼写检查器可能会有所帮助。 （最近建议）
您可以使用
【讨论】：
以上是关于当里面有很多文本时，在 textarea 中输入超级慢的主要内容，如果未能解决你的问题，请参考以下文章
当 <textarea> 中的文本不在开始和结束标记之间时，它在哪里？