Firefox DOMContentLoaded 和加载事件在 textarea 中的大型内容上非常慢答案

【问题标题】：Firefox DOMContentLoaded and load events are very slow on large content in textareaFirefox DOMContentLoaded 和加载事件在 textarea 中的大型内容上非常慢
【发布时间】：2011-03-27 18:00:47
【问题描述】：

我正在尝试在 textarea 中加载一个大（几兆）文档。

忽略网络加载时间（当我重新加载它时它实际上是最小的，因为它得到 304），在 Firebug 中它告诉我 DOMContentLoaded 和加载事件需要将近 20 秒才能触发。

如果我将 textarea 更改为 div，它会将时间减少到 5 秒，即使它必须实际渲染整个内容！

没有加载任何 javascript 库——卸载它们是我尝试的第一件事。我确实加载了许多 CSS 文件。

关于是什么让它如此缓慢，或者更好的是，如何加快速度的任何想法？一次加载一个块的内容？有点难看，但至少它为用户提供了一些可以查看的内容，而不是锁定的浏览器和潜在的“此脚本执行时间过长”警告。

这是 Ubuntu 上的 Firefox 3.6.15。

【问题讨论】：

在其他浏览器中测试过？以及什么样的文件？可能是慢 IO？
在 Chrome 中速度更快。我不指望奇迹——毕竟这是一个大文件——但奇怪的是我不认为它是 IO：当我得到 304 时它同样慢，如果我使用 div 会显着加速（它必须将整个内容呈现为 HTML！）而不是 textarea。
在过去的几年里，HTML 渲染器在任何浏览器中都受到了很多人的喜爱。关于为什么文本字段较慢，我唯一能想到的是因为转义`\`解析？我认为这可能没有看到任何优化。表单元素通常也是浏览器重用的操作系统组件，也可能超出 HTML 渲染的范围。无论如何，有趣的发现。

标签： javascript firefox textarea

【解决方案1】：

David，在 Firefox 3.6 和更早版本中，内容很长的 textarea 非常慢，因为编辑器代码会重新格式化 textarea 内的 DOM：它每行创建一个 textnode 和一个 <br>。这比仅渲染 <div> 的单个 textnode 子节点要多得多。

你应该试试 Firefox 4，它直接编辑文本节点（或者更确切地说是它的克隆）；我怀疑它在您的页面上会更快。

至于为用户加快速度……你对旧 Firefox 版本的唯一真正选择是在文本区域中没有那么多文本，不幸的是。

【讨论】：

我经常想知道为什么包含大量文本的文本区域在 Firefox 中如此缓慢。这就解释了。谢谢。