我应该关心这种优化 - jQuery - DOM 更改

发布于 2024-11-26 11:28:12 字数 649 浏览 2 评论 0原文

我有一个简单的问题，即使在循环之外（for循环，..）是否值得“缓存”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 中）

谢谢

原文

I have simple question if worths to "cache" DOM changes even outside if the loop (for cycle,..) In case I have e.g. 1000 upcoming changes it makes huge performance boost (as I have heard, not measured myself), but what if I only replacing content like this?

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

I can do this

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

It would be propably faster, but I need than rebind all of my events, and so on..
Is it really better approach to cache DOM in this case? I dont think so, but I'd like to make the page as quick as possible(especially in older IEs)

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长伴 2024-12-03 11:28:12

从那以后你的第二个代码甚至没有成功。

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

我想你的意思是

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

那么这个line:

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"); 如果您使用相当复杂的 DOM 在 IE 中运行这样的行 1000 次与缓存一次和使用缓存 999 次相比，您可以获得明显的速度差异。

Your second code doesn't even make since.

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

I think you meant

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

Then this line:

jQuery(cachedDOM) is relatively slow

You are effectively cloning the entire HTML of you web page on that line, so you can search through it like a normal DOM. It would be a lot faster to use your first method. I think the kind of caching you're looking for, which does give a variable speed boost is something like:

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

The speed boost depends on how complicated the selector is. For example, since most versions of IE do not have a document.getElementsByClassName() function for jQuery to take advantage of, a selector with a lot of classes would be quite slow and a good idea to cache the result. An example of this is: jQuery("div.left-column.highlighted li.link-list a.active"); If you run a line like that 1000 times in IE with a fairly complicated DOM compared to caching it once and using the cache 999 times you can get a noticeable speed difference.

回复收藏 0 原文