当文本里面有很多文字时,输入textarea超级慢

lam*_*ler 12 html css dom textarea css3

我在Chrome中试过这个.在内部有大量文本的textarea,最后编辑部分变得非常慢.光标和键盘输入响应进行爬行.

但是,如果我这样做,以便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>
Run Code Online (Sandbox Code Playgroud)

这个html实际上是由后端脚本生成的,它将用几千行文本填充textarea的内容.当用户向下滚动到内容的末尾时,这就是缓慢开始的地方.如果头部区域的css被移除,它将很快.

Joã*_*ulo 17

设置spellcheckfalse:

<textarea spellcheck="false"></textarea>
Run Code Online (Sandbox Code Playgroud)

它可能有所帮助.


根据Augustin的建议,您也可以尝试添加这些人:

<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
Run Code Online (Sandbox Code Playgroud)


小智 5

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


joh*_*agh 2

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

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

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

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

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

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