28
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Chromeのtextareaに大量の文字が入ると重くなる点の対策

Last updated at Posted at 2014-07-04

Chromeのtextareaに大量の文字が入ると重くなる点の対策

ページ読み込み時、textareaに大量の文字(5,000行程)が入ってると、Chromeでだけ重くなるので、アレコレ試してみた。
(※ Chrome バージョン 35.0.1916.153)

症状

textareaの中に、プレーンなCSSが5,000行程入った状態。
重くなるのは、テキストエリアのスクロールを最下部へ一気にスクロールした場合。
かなり反応が悪くなり、たまにブラウザがクラッシュすることも。
AndroidのChromeだと、アプリが落ちた。。
テキストエリアを下までスクロールしない場合は、何も問題なし。

なぜかChromeだけで、他のブラウザは全て大丈夫。
ローカルに保存したHTMLの場合には発生せず、サーバから読み込んだHTMLの場合にだけ発生しているようす。
CSSやJavaScriptも全てカットして、textareaだけになっても回避できず。

回避策

色々試した結果、フォーカスを当てた後に文字を全てカットし、再度貼り付けた場合には重くならなかったので、JavaScriptで同様の処理を当てると、やっと重くならなくなった。

<textarea id="hoge" name="hoge" rows=50 cols="70">ここに5,000行程の文字</textarea>
<script>
(function () {
    var elem = document.getElementById('hoge');
    var str = elem.value;
    elem.focus();
    elem.value = '';
    elem.value = str;
    elem.blur();
})();
</script>

一旦フォーカスを当てるところがポイントで、フォーカスが当たった状態で切り貼りしないと、この重くなる症状は回避できないようす。
どうもChromeのバグっぽいから、そのうち直りそうな気もするけど、現状の回避方法ということで。

28
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?