当里面有很多文本时，在 textarea 中输入超级慢答案

【问题标题】：typing in textarea super slow when lots of text inside当里面有很多文本时，在 textarea 中输入超级慢
【发布时间】：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 行时，它开始变慢。每行大约几个字。

标签： html css dom textarea

【解决方案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 上禁用拼写检查，如<a href="/default/index/tourl?u=aHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9hLzQ1MjQxNzkvNDQzODMxNA%3D%3D" target="_blank" rel="nofollow">this</a> answer中所述

【讨论】：