性能问题与$ .before（）风格的DOM

我遇到了一个有趣的问题，这可能是浏览器相关（但我不确定）。我正在研究一个非常大的网页，这是一个文字处理器风格的应用程序。我有这样的结构：

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

当我第一次加载页面时，我有一个函数做两件事。首先，分析使用正则表达式的每个div的HTML的内容和一类适用于DIV是否匹配特定的正则表达式，从而导致这样的事情：

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

功能的第二部分则计算出的高度每个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的高度/样式/类，那么为什么divs有一个类时的延迟？

这仅仅是浏览器在他们有课时挣扎在div上的一个例子吗？有什么想法吗？（我正在使用Safari 9.1）。

谢谢！

来源

2016-04-23 John1984

我找到了解决我的问题，但它并没有真正解决，为什么浏览器的行为不同...

而不是使用$(this).before的，我最终加入相关$(this)到香草JS 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 ..."); }

来源

2016-04-23 16:48:06 John1984

性能问题与$ .before（）风格的DOM

回答

相关问题