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のバグっぽいから、そのうち直りそうな気もするけど、現状の回避方法ということで。