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

【问题标题】：JavaScript performance while appending a large number of children to a large number of elements将大量子元素附加到大量元素时的 JavaScript 性能
【发布时间】：2012-03-17 01:46:10
【问题描述】：

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

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

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

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

Edit2：我按照 Diodeus 建议的方式生成元素。 However, I load options when the select element is in focus (thanks rlemon).我相信所有答案都非常有帮助，并且可能对任何有类似问题的人都很有价值。谢谢你们。

【问题讨论】：

也许你应该展示你的 JS 代码，这样我们就可以看看它，但通常你可能会改变你的界面并只使用一个选择，从中将值添加到一个（只读）输入字段，而不是有很多大的选择。
也许您应该让您的输入 onfocus 加载选项列表...这样每个输入将加载时间稍长，但整个页面应该很快。跨度>
另一个好点。谢谢你，柠檬。
请记住，向页面添加额外的脚本/插件会增加整体大小，从而减慢页面加载速度。如果您还没有使用 jQuery，我不建议将其用于此目的。有许多轻量级 AJAX 和 XHR 库/对象可供您使用，它们不会带来大约 30-50kb 的额外开销。

标签： javascript jquery performance

【解决方案1】：

在 HTML 上默认加载所有内容比使用 JS 附加数千个元素要快。

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

【讨论】：

无论哪种方式下载 4-5mb 都需要一段时间，一个合适的解决方案是根据用户的关注点动态加载选项。

【解决方案2】：

我建议你使用 ajax。用 3rd 方组合框替换标准输入选择，例如：Jquery UI Combobox。首先加载所有空的组合框。一旦使用单击打开下拉列表，就会加载它的项目。

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

【讨论】：

【解决方案3】：

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

【讨论】：

这也可以通过documentFragment 来实现。文档片段允许您像 DOM 元素一样存储和使用元素，但不会触发重排。一旦你建立了你的树，你可以简单地将 DF 附加到 DOM。
作为旁注，使用数组和push()-ing 所有字符串对旧浏览器（特别是 IE

【解决方案4】：

为什么需要单独追加孩子？只需将整个列表与另一个元素中的选项一起包装并附加该元素。这应该会快得多，因为它只是一个操作而不是 1000 个。

【讨论】：

我将所有选项都放在一个字符串中，并使用 innerHTML 将其放在选择输入中。我应该在我的帖子里说。无论如何，谢谢你这么快的回答:)。