彈出數量是否會影響頁面加載速度？

Question

我有一個頁面可能使用引導程序彈出2000.

彈出數量是否會影響頁面速度？我對JavaScript框架知之甚少，無法理解加載10個彈出窗口是否與加載2000相同的效果。這正是我想要理解的。

popovers的內容是通過javascript加載的。

Answer 1

我曾經用來最小化這種事情的影響的一種方法是使用單個彈出窗口/模式/對話框/等等，然後在顯示它之前改變它的內容。通過這種方式，您在DOM中沒有2k額外的元素，其中99％的時間無所事事。

我使用selector選項和委託，通過在父元素上啓用自舉彈窗的例子。看起來他們可能會遇到任何開銷問題。

如果您檢查示例的主體，您會看到一個單獨的popover div，當它顯示時附加到主體，並在隱藏時將其刪除。

$(function() { 
 
    var $table = $('#test'); 
 

 
    for(var i = 0; i < 20; i++) { 
 
    var row = $('<tr />'); 
 
    for(var j = 0; j < 100; j++) { 
 
     var td = $('<td />').attr({id: (i * 100) + j, tabindex: -1}); 
 
     row.append(td); 
 
    } 
 
    $table.append(row); 
 
    } 
 
    
 
    $table.popover({ 
 
    html: true, 
 
    container: 'body', 
 
    trigger: 'focus', 
 
    selector: 'td', 
 
    content: function() { 
 
     return '<p>This is my id: ' + $(this).attr('id') + '</p>'; 
 
    } 
 
    }); 
 
});

td { 
 
    height: 25px; 
 
    width: 25px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<table id="test"> 
 
</table>