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？

回答

相關問題