スタイルドDOMでの$ .before（）のパフォーマンスの問題

Question

興味深い問題が出てきました。ブラウザーに関連しているかもしれませんが、わかりません。私はワープロスタイルのアプリである非常に大規模なWebページに取り組んでいます。私はこの構造を持っています：

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

私は最初にページを読み込むとき、私は2つのことをする機能を持っています。まず、それは正規表現を使用して、各div要素のHTMLの内容を解析し、それがこのようなもので、その結果、特定の正規表現に一致する場合のdivにクラスを適用します。

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

関数の2番目の部分は、その後の高さを算出し、各divとそれをカウンタに追加します。それが一定数を通過すると、私は改ページとして機能するHTMLの断片を挿入し、その後、すすぎと繰り返し：

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

このコードは完璧に動作しますが、ここで問題です...

実行をそれが実行されるはずであるので、約2秒かかります。しかし、同じコードを実行するが、プロセスの最初の部分（divをクラスに追加する部分）をスキップすると、コードは0.2秒で実行されます。

私はさらに、コード行を$(this).beforeにコメントすることで問題を特定することができました。これが完了すると、両方の速度テストは十分に近い（100ms以内）。

$(this).beforeのコード行はdivの高さ/スタイル/クラスを参照していないので、divがクラスを持つのはなぜですか？

クラスを持っているときにdivと闘うのは単純なケースですか？何かご意見は？ （私はSafari 9.1を使用しています）。

ありがとうございます！

Answer 1

ブラウザは異なる動作をする理由、それは実際には対応していませんが、私は、私の問題への解決策を見つけたが...

代わり$(this).beforeを使用しての

、私はバニラのJSに関連する $(this)を追加することになった array、その後、後で電話する：

// 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 ..."); }