当里面有很多文本时，在文本区域中输入速度非常慢

问题描述 投票：0回答：5

我在 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去掉就快了

html css dom textarea
5个回答
31
投票

将 

spellcheck
设置为 
false
:

<textarea spellcheck="false"></textarea>

可能会有帮助。

根据 Augustin 的建议，你也可以尝试添加这些人：

<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
5
投票

我也偶然发现了这个问题，在我的例子中只有 chromium 浏览器受到影响。 -> https://code.google.com/p/chromium/issues/detail?id=237433

3
投票

我有同样的问题，但我用下一个属性解决了它

ng-model-options="{ updateOn: 'blur' }"

尝试使用

<textarea ng-model-options="{ updateOn: 'blur' }"></textarea>

2
投票

没有看到活生生的例子，很难说。 但有几个可能的原因：

  • 您在文本区域中使用自定义字体（font-face？SIFr？），由于需要额外的开销，这会减慢浏览器的速度。 特别是如果您使用的是 SIFr 之类的东西！
  • 验证问题：您的 HTML/CSS 有效吗？ 尝试通过 W3 验证运行它：（HTML，CSS）。
  • 您在页面上使用 JavaScript 吗？ 也许使用文本区域可能会触发一些验证或其他过程？

我的直觉期望是，这是上面最后两点之一，为了尝试帮助解决问题，请尝试：

  • 通过验证器运行您的标记并解决提出的任何问题。 现在还这样吗
  • 禁用 JavaScript 并加载页面。 现在还这样吗

我希望您能够很快缩小原因范围。

PS：不要把 CSS 放在头部以外的任何地方 - 这会导致你出现各种其他问题！

1
投票

如果问题仅出现在 Chrome 中，则可能是拼写检查器的问题。

根据@PapaKai 提供的链接，禁用拼写检查器可能会有所帮助。 （最近建议）

您可以使用

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.