更好的性能、空元素还是使用 Javascript 创建和销毁？答案

【问题标题】：Better Performance, Empty Elements Or Create And Destroy With Javascript?更好的性能、空元素还是使用 Javascript 创建和销毁？
【发布时间】：2011-05-20 16:03:30
【问题描述】：

如果页面上有许多隐藏元素，或者根据请求使用 javascript 需要时创建和销毁它们，什么会更好地提高性能。例如，当单击某物时，首先创建元素然后显示。当它关闭时，它会被销毁。这会比将隐藏元素分散在页面中更好吗？

【问题讨论】：

我建议创建几个 html 页面来自己测试；尽管我会对人们可能提供的任何经过客观验证的答案感兴趣。
Yahoo 最好的网络性能提示之一说，最好少用 dom 元素 ///developer.yahoo.com/performance/rules.html，但除非你有一些内存泄漏，否则很少元素并不重要。
@gov：没有什么比“总是”更好的了。您必须确定较大的 DOM 是否值得通过不动态创建 DOM 元素来节省时间（这在大多数浏览器中仍然很慢）。

标签： javascript jquery html performance

【解决方案1】：

我想这部分取决于元素的复杂程度，部分取决于您所说的“性能”。元素越复杂，创建它需要运行的代码越多，创建所需的时间就越长。因此，将元素隐藏在页面中可能会使其显示更快，但代价是页面更大（以及需要筛选的更多 DOM），这可能会降低整体速度。 p>

【讨论】：

我认为这会在增加 page-load 时间和增加，嗯，action-time (?)
这就是我的观点：在使用现有元素的速度与在页面中嵌入该元素往往会产生额外的加载/解析/搜索时间之间需要权衡。这部分是关于你可以在哪里/什么时候放慢一点，以便让其他东西更快。

【解决方案2】：

您通常只需显示/隐藏元素即可获得最佳的点击性能，但这是以更大的初始页面加载为代价的。如果您使用的是 jQuery，您还可以使用 detach() 从 DOM 图中删除一个元素而不破坏它，因此您可以在其他地方重新附加它，这比破坏/创建更便宜。

一般来说，按照性能从好到坏的顺序排列：

显示现有的隐藏元素
innerHTML 来自数组 + 连接
字符串连接的innerHTML
分离 + 附加现有 DOM 节点
DOM 节点的克隆
创建新的 DOM 节点

如果您需要即时生成复杂的内容，您可以查看像 handlebars.js 这样的 Javascript 模板工具 - 它可以让您定义模板，然后从这些模板 + 一些传入的对象创建标记，然后您可以通过innerHTML 分配。它为管理动态客户端内容提供了一种非常快速且非常有效的方式。

【讨论】：

【解决方案3】：

创建和销毁 DOM 元素是 JavaScript 中最慢的操作，尤其是在 IE 中。拥有许多隐藏元素会占用更多内存，并且最初加载可能需要更长的时间，但可以将其视为缓存：您正在缓存这些元素以供以后使用，并在需要时重新使用它们，而不是创建并在飞行中摧毁它们。

但是，如果您不是在非常大的范围内（数百/数千个元素）执行此操作，则可能无关紧要。创建或销毁单个 DOM 元素所需的时间可以忽略不计，因此，如果这是您的情况，请做任何对您来说更容易的事情。

【讨论】：

【解决方案4】：

恕我直言，您应该做另一种考虑，因为显然页面加载速度受其大小（以 kb 为单位）的影响。

如何计算网页大小？
- HTML 文档文件大小（DOM 元素）；
- 文件大小图形 - 包括任何背景图像；
- 包含的任何内容（JavaScript (.js)、外部表格 (.css)、SSI、PHP 文件等) 文件大小；
- 图像等预加载数据的文件大小；
- 任何多媒体内容的大小，例如声音，嵌入网页的视频、Flash 文件等；

最大尺寸是多少？
- 每个网页不应超过 50kb。这将保证网页在几秒钟内加载。
- iPhone 不会缓存大于 25K 的组件。

所以，你的问题是没有正确的 dom 元素的数量，你有很多事情要做之前照顾隐藏元素的数量！ ;) 希望这会有所帮助

参考：

工具

Page Speed, the Web Performance Tool

【讨论】：