JQuery:如何缓存DOM？

Question

我使用Firefug来分析我的web应用程序，发现下面的函数被调用，并且需要被调用，实际上每次用户访问都需要调用数百次。所以我想优化它，因为Firebug说它使用最多的资源/时间。

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性能提示。

Answer 1

首先，删除if子句中的死语句。

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

在选择器#parentDiv div.childClass中，您能保证div是#parentDiv的直接后代吗？在这种情况下：

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

和

$('#parentDiv>div.childClass')

你已经有parentDiv了。我猜这是一个DOM对象，因此您可能可以执行以下操作：

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

只需隐藏当前突出显示的DIV：

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

Answer 2

我猜这是最不优化的路线：

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

您应该对其进行分析以确保(在调用之外创建一个date对象，并在每次调用前后输出getTime()值)。

在这里，您要求jQuery迭代与选择器匹配的所有DOM元素，并删除该类。如果有1000行，jQuery将需要对每个行进行互操作，以查看是否需要删除类。呃。在这里，删除了该查找：

// 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
};

希望这能帮上忙！

Answer 3

我更喜欢使用以下方法：

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();
    }
};