JavaScript性能，同时将大量子元素附加到大量元素中

Question

我在页面上有很多选择输入（96或384）。每个都有一个广泛的选项列表 - 大约1000个。因此页面大小在4-8MB（压缩1-4MB）之间。我决定只使用一次选项列表，然后使用JavaScript将其添加到每个输入，从而加快页面加载速度。

不幸的是，浏览器需要很多时间才能完成任务（在FF 10上约3分钟）或挂起（Chrome 17）。我试图用jQuery和纯JS完成任务。没有任何区别。

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

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

Edit2：我按照Diodeus建议的方式生成元素。但是，当select元素处于焦点时我加载选项（谢谢rlemon）。我相信所有答案都非常有用，对于有类似问题的人来说可能很有价值。谢谢你们。

Answer 1

将HTML构建为字符串或单个对象，将其全部注入该页面。 DOM重写速度很慢，因为必须为每个插入计算文档重新流动。

Answer 2

为什么你需要分开追加孩子？只需将整个列表包含在另一个元素中的选项并附加该元素。这应该快得多，因为它只是一次操作而不是1000次。

Answer 3

我建议你使用ajax。用第三方组合框替换标准输入选项E.g：Jquery UI Combobox。首先加载所有空的组合框。使用点击打开下拉列表后，将立即加载项目。

使用jquery和jquery UI可以轻松完成。

Answer 4

默认情况下，在HTML上加载所有内容比使用JS附加数千个元素更快。

您的服务器可以保证用户计算机无法保证质量/速度。