在大DOM上使用jQuery.nextUntil的性能

我正在尋求解決我在使用非常大的DOM時遇到的性能問題。實質上，這是一個使用contenteditabledivs的瀏覽器內的文字處理風格的應用程序。在大DOM上使用jQuery.nextUntil的性能

假設我有這樣的結構：

<div class="header">...</div> 
<div class="actor">...</div> 
<div class="director">...</div> 
<div class="producer">...</div> 
<div class="writer">...</div> 
<div class="executive">...</div> 
<div class="studio">...</div> 
<div class="footer">...</div>

我然後有一些代碼，最終返回（例如）：

<div class="writer">...</div>

作爲jQuery對象。然後我需要檢索header和footer之間的所有對象周圍的divs作爲選擇，然後使用例如class進一步過濾該列表。 'actor'。

目前，我有以下的代碼，它工作正常：

// Find header 
var header_object = object.prevUntil(".header").last().prev(); 

// Select all objects between header and footer, and then filter 
var object_list = header_object.nextUntil(".footer", ".actor"); 

// Iterate through object_list 
object_list.each(function() 
{ 
    // Run additional code on the objects 
});

唯一的問題是，由於應用是各種各樣的文字處理器，DOM結構往往是非常大（例如超過5000元素）並執行此代碼會將瀏覽器鎖定一段不可接受的時間（超過10 - 30秒）。

因此，我正在尋找一種方法來定製代碼，使其更有效率/提高性能。

我還應該指出，上面的HTML結構不是(header - 5000 elements - footer)，而是200 x (header - elements - footer)。因此，每個遍歷操作僅包含從頁眉到頁腳的25個元素，但它必須運行很多次。

有什麼建議嗎？非常感謝！

來源

2016-04-21 John1984

_AS jQuery對象。然後我需要在頁眉和頁腳之間檢索所有這個對象的周圍div。你能更好地解釋這個部分嗎？ –

你不能''（「。writer」）。siblings（）。each（function（）{}）;'？ –

將它們放在容器中而不是使用兄弟類名，然後只是迭代該容器的子元素，而不是每次都挖掘一堆元素。 – dandavis

您可以通過不使用jQuery來創建自己的函數來更好地提高性能。

function getClosest(el, klass, dir) { 
    while (el && (!el.classList.contains(klass))) { 
     el = el[dir ? 'previousElementSibling' : 'nextElementSibling']; 
    } 
    return el; 
} 

function getbetween(from, to, filterKlass) { 
    var list = []; 
    while(from && to && from !== to) { 
     if ((from = from.nextElementSibling) !== to) { 
      filterKlass ? (from.classList.contains(filterKlass) ? list.push(from) : Infinity) : list.push(from); 
     } 
    } 
    return list; 
} 

var object = $('.writer'); 
var element = object.get(0); 

var header_object = getClosest(element, 'header', true); 
var footer_object = getClosest(element, 'footer', false); 
var object_list = getbetween(header_object, footer_object, 'actor'); 

object_list.forEach(function(element) { 
    console.log(element); 
});

FIDDLE

遍歷下一個元件直接兄弟，和檢查類別，要快很多比使用nextUntil

來源

2016-04-21 19:09:06 adeneo

在大DOM上使用jQuery.nextUntil的性能

回答

相關問題