2013-05-24 19 views
7

私はこれを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は、実際にテキストの行数千人とテキストエリアの内容を記入しますバックエンドスクリプトによって生成されます。ユーザーがコンテンツの最後までスクロールすると、それが遅さが始まる場所です。頭の部分のCSSが削除されていると、速くなります。

+0

「テキストがたくさんありますか?」また、レンダリングの目的で、常にドキュメントの 'head'タグにCSSを含める必要があります。 –

+0

@JamesDonnelly編集した質問をご覧ください。 –

+0

どれくらいですか? 1000000000000文字ですか? – DiederikEEn

答えて

1

ライブの例は表示されませんが、言うことは難しいです。しかし、いくつかの理由が考えられます:

  • 余分なオーバーヘッドが発生するため、ブラウザが遅くなっているテキストエリア(font-face?SIFr?)でカスタムフォントを使用しています。 特に SIFrのようなものを使用している場合は!
  • 検証の問題:HTML/CSSは有効ですか? W3検証:(HTMLCSS)を実行してみてください。
  • ページでJavaScriptを使用していますか?おそらく、テキストエリアを使用してトリガされる可能性のある検証やその他のプロセスですか?

    • バリデータを通して、あなたのマークアップを実行して発生したすべての問題を解決:

    私の腸の期待はしてみてください、試してみて、トラブルシュートを助けるために、それは上記の最後の2点の一つだということでしょう。まだそれをしていますか?

  • JavaScriptを無効にしてページを読み込みます。まだそれをしていますか?

私はあなたが非常に迅速にその理由を絞り込むことができると期待しています。

PS:CSSを頭の中に入れてはいけませんが、それはあなたにあらゆる種類の問題を引き起こします。

+0

JavaScriptは使用されていません。 –

2

私の場合はクロムブラウザのみがこの問題に遭遇しました。 - >https://code.google.com/p/chromium/issues/detail?id=237433

+0

Chromiumの問題237433:「_...これは、(フィールドを右クリックして)スペルチェックを無効にするのに大いに役立ちました(100倍だと思っています)。しかし、最近のバージョンのChromeでは、テキストエリアの右クリックコンテキストメニューでスペルをオフにします。 – osgx

0

問題がChromeでのみ発生する場合は、スペルチェッカーになる可能性があります。

@PapaKaiのリンクによれば、スペルチェッカーを無効にすると役立つ可能性があります。 (最近提案)

あなたはfalsethis答え

10

設定spellcheckで説明したように> = "false" を<テキストエリアのスペルチェックとちょうどテキストエリアの上のスペルチェック無効にすることができます

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

それが役立つかもしれません。

てみてください
<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> 
+1

私はautocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false"を追加して、パフォーマンスの問題を解決したことを確認していただきありがとうございます。ありがとう! –

1

が、私は同じ問題を抱えていたが、私は ng-model-options="{ updateOn: 'blur' }"

次の属性とそれを解決:

オーギュ提案することで

、あなたはまた、これらの人を追加しようとすることができます

関連する問題