Leistungsproblem mit $ .before() auf gestyltem DOM

Question

Ich bin auf ein interessantes Problem gestoßen, das browserbezogen sein kann (bin mir aber nicht sicher). Ich arbeite an einer sehr großen Webseite, die eine App im Word-Prozessor-Stil ist. Ich habe diese Struktur:

<article> 
    <div>...</div> 
    <div>...</div> 
    <div>...</div> 
    ... 5000 more divs ... 
</article> 

Wenn ich zuerst die Seite lade, habe ich eine Funktion, die zwei Dinge tut. Zuerst analysiert den Inhalt jeder html des div regex und wendet eine Klasse auf das div, wenn es eine bestimmte Regex übereinstimmt, was in etwa wie folgt:

<article> 
    <div class="type1">...</div> 
    <div class="type2">...</div> 
    <div class="type3">...</div> 
    ... 5000 more divs ... 
</article> 

Der zweite Teil der Funktion berechnet dann die Höhe jedes Div und fügt es einem Zähler hinzu. Sobald es eine bestimmte Anzahl geht, füge ich ein Stück HTML, das als Seitenumbruch dient, dann spülen und wiederholen:

// Pagination variables 
    var document_current_page_height = 0; 
    var constant_default_page_height = 1000; 
    var page_number = 0; 

    // Iterate over page elements 
    object_range.each(function() 
    {  
     // Check whether page is too long 
     if (document_current_page_height + $(this).outerHeight(true) > constant_default_page_height) 
     { 
      // Create page break 
      $(this).before("<section contenteditable=\"false\"><h3 class=\"page-footer\">" + document_page_footer" + "</h3><figure><hr /><hr /></figure><h1 class=\"page-header\">" + document_page_header + "</h1><h2 class=\"page-number\">" + page_number + "</h2></section>"); 

      // Adjust variables 
      page_number++ 
      document_current_page_height = 0; 
     } 

     // Increment current page height 
     document_current_page_height += $(this).outerHeight(true)); 
    }); 

Dieser Code funktioniert perfekt, aber hier ist das Problem ...

Wenn Lauf Wie es ausgeführt werden soll, dauert es etwa 2 Sekunden. Wenn ich jedoch denselben Code ausführe, aber den ersten Teil des Prozesses überspringe (der den divs Klassen hinzufügt), wird der Code in 0,2 Sekunden ausgeführt.

Ich war weiter in der Lage, das Problem durch Kommentieren der $(this).before Codezeile zu isolieren. Wenn dies gemacht wird, sind beide Geschwindigkeitstests nahezu identisch (innerhalb von 100 ms).

Was ich nicht bekomme, ist, dass die Codezeile $(this).before nicht auf die Höhen/Stile/Klassen der divs verweist, also warum die Verzögerung, wenn die divs eine Klasse haben?

Ist es einfach ein Fall des Browsers, der mit den divs kämpft, wenn sie Klassen haben? Irgendwelche Gedanken? (Ich benutze Safari 9.1).

Danke!

Answer 1

fand ich eine Lösung für mein Problem, obwohl es eigentlich nicht ansprechen, warum der Browser verhält sich anders ...

Statt $(this).before verwenden, landete ich den entsprechenden $(this) zu einer Vanille JS Aufsummierung array und dann Rufen Sie später an:

// Pagination variables 
var document_current_page_height = 0; 
var constant_default_page_height = 1000; 
var page_number = 0; 
var page_break_array = []; 

// Iterate over page elements 
object_range.each(function() 
{  
    // Check whether page is too long 
    if (document_current_page_height + $(this).outerHeight(true) > constant_default_page_height) 
    { 
     // Create page break 
     page_break_array.push([$(this), page_number]); 

     // Adjust variables 
     page_number++ 
     document_current_page_height = 0; 
    } 

    // Increment current page height 
    document_current_page_height += $(this).outerHeight(true)); 
}); 

// Create page breaks (done separately for performance benefit) 
for (var i = 0; i < page_break_array.length; i++) { page_break_array[i][0].before("... HTML content ..."); }