Question

我有一个简单的问题是否值得“缓存”DOM更改，即使在循环外（如周期，...）如果我有例如1000个即将发生的变化会带来巨大的性能提升（正如我所听到的，不是自己衡量的），但如果我只更换这样的内容怎么办？

jQuery("#subMenu").html( jQuery( html ).find( "#subMenu" ).html() );
jQuery("#pageMain").html( jQuery( html ).find( "#pageMain" ).html());
jQuery("#text").html( jQuery( html ).find( "#text" ).html());

我可以这样做

var cachedDOM = jQuery("body").html(); //edited
jQuery(cachedDOM).find("#pageMain").html( jQuery( html ).find( "#pageMain" ).html());
jQuery("body").html(cachedDOM);

它会更快，但我需要重新绑定我的所有事件，等等...... 在这种情况下缓存DOM真的更好吗？我不这么认为，但我想尽可能快地制作页面（特别是在较旧的IE中）

由于

Answer 1

你的第二段代码甚至都没有。

$var cachedDOM = jQuery("body").html();

我认为你的意思是

var $cachedDOM = jQuery("body").html();

然后这一行：

jQuery(cachedDOM)相对慢

您实际上是在该行上克隆了整个网页的HTML，因此您可以像普通的DOM一样搜索它。使用第一种方法会快得多。我认为你正在寻找的那种缓存，它确实提供了可变速度提升，例如：

var $body = jQuery("body");
$body.find("#pageMain").html($body.find("#pageMain").html());

速度提升取决于选择器的复杂程度。例如，由于IE的大多数版本都没有jQuery可以利用的document.getElementsByClassName()函数，因此具有大量类的选择器会非常慢并且是缓存结果的好主意。这方面的一个例子是：jQuery("div.left-column.highlighted li.link-list a.active");如果你在IE中使用相当复杂的DOM运行1000次这样的行，而缓存它一次并使用缓存999次就可以获得明显的速度差异。

Answer 2

始终使用JQuery的内置选择器与尝试“缓存”并遍历变量。无论如何，从身体开始遍历都是违反直觉的。

证明选择器的速度比伪缓存快得多：http://jsperf.com/pseudo-dom-cache

我应该关心这种优化--jQuery - DOM的变化

2 个答案: