html - 当有一个包含太多 dom 元素的列表时，页面会因选项卡而卡住

Question

我有一个包含两列的网页，一个带有导航栏的页眉和一个页脚。

左栏用于列出三个不同选项卡中的元素。每个选项卡都包含其元素的类型。

右侧包含一张或多张 map 以显示元素。

选择包含太多元素的选项卡时会出现问题。

它卡住了交互(高亮、添加/删除 DOM 和动画)，破坏了它的响应能力。

即使它不是与所选选项卡的交互(即鼠标悬停在导航栏链接上)。

但当所选选项卡的元素较少时，页面的响应性很好。

我创建了一个 spike solution告诉你我在说什么。

请记住，这是我的问题的一个简单得多的版本。这只是一个展示我的案例的虚拟示例。

$('#nav-tabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
});

$('#addBox').on('click', function () {
  $("#content").append("<div class='box pull-left'></div>");
});

$('#newPapper').on('click', function () {
  $("#content").empty();
});


$('#addOne').on('click', function () {
  $("#home div.panel-default").append(createContactDom());
});

$('#addThousand').on('click', function () {
  var dom = "";
  for(var i = 5000; i > 0; i--){
    dom+=createContactDom();
  }
  $("#home div.panel-default").append(dom);
});

$('#clean').on('click', function () {
  $("#home div.panel-default").empty();
});

function createContactDom(){

  var age = Math.round(Math.random()*100);
  var birthday = moment().subtract(age, 'years');
  var isFemale = Math.random() > 0.4;
  var nameIndex = Math.floor(Math.random() * names[isFemale ? "female" : "male"].length);
  var surnameIndex = Math.floor(Math.random() * surnames.length)
  var name = names[isFemale ? "female" : "male"][nameIndex] + " " + surnames[surnameIndex];
  
  var html = '<div id="p' + birthday.format("X") + '" class="panel-heading">';
  html += '<span class="fa-stack fa-lg custom-stack pull-left font-grey-gallery" >';
  html += '<i class="fa fa-square-o fa-stack-2x"></i>';
  html += '<i class="fa fa-user fa-stack-1x"></i>';
  html += '</span>';
  html += '<div class="pull-left">';
  html += '<div class="title">';
  html += '<span >' + name + '</span> ';
  html += '</div>';
  html += '<div class="sub-title">';
  html += '<span title="' + (isFemale ? 'She': 'He') + ' was born on a ' + birthday.format('dddd') + ' at ' + birthday.format('HH:MM a') + '" class="badge pull-left" >' + birthday.format("YYYY/MM/DD") +'</span>';
  html += '<span title="It is a ' + (isFemale ? 'female' : 'male') + '" class="badge pull-left ' + (isFemale ? 'female' : 'male') + '" >' + (isFemale ? 'Female' : 'Male') + '</span>';
  html += '<div class="clearfix"></div>';
  html += '</div>';
  html += '</div>';
  html += '<div class="pull-right actions">';
  html += '<a id="d' + birthday.format("X") + '" title="Delete contact" class="fa fa-times fa-times-close"  style="color: rgb(87, 142, 190);" onclick="deleteContact(this)"></a>';
  html += '</div>';
  html += '<div class="clearfix"></div>';
  html += '</div>';
  
	return html;                      
}


deleteContact = function(e){
  $("#" + e.id.replace("d", "p")).remove();
}

var names = {
  female: ["Maria","Leonor","Matilde","Beatriz","Carolina","Mariana","Ana","Inês","Margarida","Sofia"],
  male: ["João", "Martim", "Rodrigo", "Santiago", "Francisco", "Afonso", "Tomás", "Miguel", "Guilherme", "Gabriel"]
}
var surnames = ["Silva", "Santos", "Ferreira", "Pereira", "Oliveira", "Costa", "Rodrigues", "Martins", "Jesus", "Sousa", "Fernandes", "Gonçalves", "Gomes", "Lopes", "Marques", "Alves", "Almeida", "Ribeiro", "Pinto", "Carvalho"]

.row{
  height: 600px;
}

.col-sm-5,
.col-sm-7{
  height: inherit;
}

.tab-content{
  height: inherit;
  overflow-y: auto;  
}

button{
  margin-top: 5px;
}
span.badge{
  margin-right: 5px;
}

.badge{
   background-color: #999 !important;
}
.badge.female{
   background-color: pink !important;
}
.badge.male{
   background-color: #1c90f3 !important;
}

#content{
  height: inherit;
  overflow-y: auto;  
  padding-top: 5px;
}

#content .box{
  width: 100px;
  height: 100px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-5">
    <ul class="nav nav-tabs" id="myTabs" role="tablist"> 
      <li role="presentation" class="active">
        <a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Contacts</a>
      </li> 
      <li role="presentation" class="">
        <a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">Problem?</a>
      </li> 
      <li>
        <button type="button" id="addOne" class="btn btn-sm">+</button>
        <button type="button" id="addThousand" class="btn btn-sm btn-primary">+5k</button>
        <button type="button" id="clean" class="btn btn-sm">clean</button>
      </li>
    </ul>

    <div class="tab-content" id="myTabContent"> 
      <div class="tab-pane fade active in" role="tabpanel" id="home" aria-labelledby="home-tab">
        <div class="panel panel-default" style="border-left: 3px solid rgb(87, 142, 190);" >
        </div> 
      </div> 
         
      <div class="tab-pane fade" role="tabpanel" id="profile" aria-labelledby="profile-tab"> 
        <h1>Problems to solve:</h1>
        <ul>
          <li>Adding 5k new contacts blocks the browser's page</li>
          <li>Switching between the two tabs blocks the browser's page</li>
          <li>Painting freezes when adding 5k new contacts</li>
        </ul> 
        <p>Note: The problems get worse as may contacts you add...</p>
      </div>
    </div>
  </div>

  <div class="col-sm-7">
    <button tyoe="button" id="addBox" class="btn btn-sm btn-primary">Paint</button>
    <button tyoe="button" id="newPapper" class="btn btn-sm">New papper</button>
    <div id="content"></div>
  </div>
  
</div>

---

我已经在使用 chrome 开发人员工具来捕捉时间线的 Action 。据我所知，问题是 jquery 布局渲染中的一些回流。

这是我时间​​线的截图:

如何优化我的 DOM 操作以避免页面卡住？我可以告诉浏览器在我说之前不要重绘左栏吗？

Answer 1

为什么不对这么大的表使用虚拟滚动或无限滚动或分页，而是在启动时创建它？

例子很多: https://www.sitepoint.com/jquery-infinite-scrolling-demos/

在一行中放置 5k 个对象太多了，imo。

在您的情况下，您需要为堆栈/事件循环中的其他内容拆分/中断 dom 操作循环。

$('#addThousand').on('click', function () {
  for(var i = 5000; i > 0; i--){
  setTimeout( function() {
    var dom=createContactDom();
    $("#home div.panel-default").append(dom);
    }, 0);
  }

});

或事件:

$('#addThousand').on('click', function () {
  for(var i = 5000; i > 0; i--){
  setTimeout( function() {
    var dom=createContactDom();
    $("#home div.panel-default").append(dom);
    }, i);
  }

});