将大量子元素附加到大量元素时的 JavaScript 性能

Question

我在一个页面上有很多选择输入(96 或 384)。每个都有一个广泛的选项列表——几乎 1000 个。因此页面的大小在 4-8MB 之间(压缩后 1-4MB)。我决定通过只放置一次选项列表然后使用 JavaScript 将其添加到每个输入来加快页面加载速度。

不幸的是，浏览器要么需要大量时间来完成任务(在 FF 10 上大约需要 3 分钟)，要么挂起(Chrome 17)。我试图用 jQuery 和纯 JS 来完成任务。完全没有区别。

任务可行吗？要编写快速高效的 JavaScript，我应该知道什么？

编辑:我将所有选项放在一个字符串中，并使用 innerHTML 将其放入选择输入。感谢您的快速回复。

Edit2:我按照 Diodeus 建议的方式生成元素。但是，我在选择元素处于焦点时加载选项(感谢 rlemon)。我相信所有答案都非常有帮助，并且对于遇到类似问题的任何人都可能有值(value)。谢谢你们。

Answer 1

将您的 HTML 构建为字符串或单个对象，然后一次性将其全部注入(inject)该页面。 DOM 重写很慢，因为必须为每次插入计算文档重流。