JQuery：如何缓存DOM？

我使用Firefug来剖析我的web应用程序，发现以下函数被调用，并且需要被调用，每次用户访问字面上数百次。所以我想优化它，因为Firebug说它使用最多的资源/次数。JQuery：如何缓存DOM？

function highlightChildDiv(parentDiv) { 

    /* find the closest (hlisting) home listing to the middle of the scrollwindow & highlight */  
    var scrollElemPos = parentDiv.offset(); 
    var highlightDiv = $(document.elementFromPoint(
     scrollElemPos.left + parentDiv.width()/2, 
     scrollElemPos.top + parentDiv.height()/2) 
    ).closest('#parentDiv div.childClass'); 

    if (highlightDiv.hasClass("HighlightRow")) { 
     return; // if the div is already highlighted, return 
    } else { 
     $('#parentDiv div.childClass').removeClass("HighlightRow"); 
     highlightDiv.addClass('HighlightRow'); 
    } 
}

在我看来，最未优化的语句之一是.closest('#parentDiv div.childClass');，但我敢肯定有其他的事情，以改善。

问题：有没有人有任何关于如何优化上面的代码的任何JQuery性能提示，因为这个函数每次用户访问几乎执行数百次。

来源

2010-01-29 Allen

只是一个小点名称，例如“父母”和“孩子”可能不会长期可读:) – 2010-01-29 17:10:18

我更改了名称以帮助人们更多地了解我的代码在我的应用程序正在执行的情况下 – Allen 2010-01-29 17:15:51

首先想到的是，消除if子句中的死亡陈述。

if (!highlightDiv.hasClass("HighlightRow")) { 
    $('#parentDiv div.childClass').removeClass("HighlightRow"); 
    highlightDiv.addClass('HighlightRow'); 
}

在选择#parentDiv div.childClass，可以保证该分区将成为#parentDiv的直系后裔？在这种情况下：

.closest('#parentDiv>div.childClass');

和

$('#parentDiv>div.childClass')

你已经有parentDiv。我猜这是一个DOM对象，所以你可以做到以下几点：

$(parentDiv).children("div.childClass")

只是隐藏当前突出的DIV：

$('#parentDiv div.HighlightRow').removeClass("HighlightRow");

来源

2010-01-29 17:08:29

W你的意思是“直系后裔”。如果我的HTML是#parent - > #middle - > #child，会发生什么情况。会使用“#parentDiv> div.childClass”仍然适合并快于“#parentDiv div.childClass” – Allen 2010-01-29 17:25:02

不，我说#parent> #middle比#parent #middle快。您的示例中#parent> #child不起作用。 – 2010-01-29 18:22:45

我的猜测是，这是最未经优化的线路：

$('#parentDiv div.childClass').removeClass("HighlightRow");

你就应该剖析它，以确保（创建呼叫并输出每次通话前，后的getTime（）值以外的日期对象）。

这里您要求jQuery遍历所有匹配该选择器的DOM元素并删除该类。如果有1000行，jQuery将需要对每个行进行intergate查看是否需要删除一个类。啊。这是查找删除：

// namespace scoped cache 
var Hash_$_Cache = { 
    $parentDiv : $('#parentDiv'), 
    $tgt_row : $([]) // empty jq object to start 
}; 

// find the closest (hlisting) home listing to the middle of 
// the scrollwindow and highlight 
//  
var highlightChildDiv = function (parentDiv){ 
    var 
    scrollElemPos = parentDiv.offset(), 
    $tgt_row 
    ; 

    $tgt_row = $(document.elementFromPoint(
    scrollElemPos.left + parentDiv.width()/2, 
    scrollElemPos.top + parentDiv.height()/2) 
).closest('#parentDiv div.childClass') 
    ; 

    // bail if row is already highlighted 
    if ($tgt_row.hasClass('HighlightRow')){ return; } 

    Hash_$_Cache.$tgt_row.removeClass('HighlightRow'); 
    $tgt_row.addClass('HighlightRow'); 

    // save highlighted row for later 
    Hash_$_Cache.$tgt_row = $tgt_row; // store new row in cache 
};

希望帮助！

来源

2010-10-28 07:21:07

我更喜欢使用以下方法：

https://gist.github.com/3841424#file-domcache-js

或者，您可以在此实现的方法替换DOM对象：相对呼叫事情：

var myNS = { 
    myEventHandler: function(event){ 
     this.DOM.$el.doSomething(); 
    }, 
    cacheDOM: function(){ 
     return { 
      $el: $("#matrix") 
     }; 
    }, 
    initialize: function(){ 
     this.DOM = this.cacheDOM(); 
    } 
};

来源

2012-12-22 03:51:31

JQuery：如何缓存DOM？

回答

相关问题