优化大量内容HTML的性能

Question

我有一个页面，可以读取文本文件，并在运行时将其显示在站点上。我使用jQuery解析文件，并使用以下代码将其追加到页面：

resultArray.forEach(function (val) {
   $('#OutputArea').append(appendText(val.content));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <ol id="OutputArea">
        <li class="someClass"> some content...</li>
        <li class="someClass"> some content...</li>
        <li class="someClass"> some content...</li>
        <li class="someClass"> some content...</li>
        <li class="someClass"> some content...</li>
        <!-- New content will add below -->
    </ol>
</div>

只有几千行是可以的，但是随着页面上附加内容的增加，网站的响应速度将变慢，即滚动时需要较长的渲染时间。

我知道浏览器会因为页面占用大量资源而变慢，但是有没有一种方法可以优化其性能？谢谢。

2018年7月26日更新

我已经做了几件事来加快这一过程：

1。使用DocumentFragment而不是附加诸如<li class="someClass"> some content...</li>这样的html字符串

2。下面的循环确实使jQuery的forEach循环变快了

  var fragment = document.createDocumentFragment();
  for(var i =0 ;i<resultArray.length;i++)
  {
      var val = resultArray[i];
       fragment.appendChild(appendText(val.content, val.id));
  }            
  document.getElementById("LogArea").appendChild(fragment);

1. 向div添加will-change:transform; CSS属性，滚动比以前快了很多。

我还发现，删除counter-increment将使渲染速度更快，几乎提高了70％。我使用以下CSS创建自己的<li>数字样式。 我的猜测是li:before content的计算对渲染工作量很大吗？我不知道如何克服它。

ol { 
    counter-reset: item;
    list-style-type: none;
    padding-left: 10px
}

li {
  display: -webkit-box;
}

li:before { 
    content: counter(item) "  "; 
    counter-increment: item ;
    color: gray;
    display: block;
    text-align: right;
    font-size:14px;
}
li:last-child:before {
    content: "";
}

Answer 1

一些想法

1. 仅追加一次。因此，为您所有清单项目建立一个变种

var text = '';
resultArray.forEach(function (val) {
   text += appendText(val.content);
});
$('#OutputArea').append(text);

1. 整理您的文本文件。因此，最重要的文件首先被加载/解析。
2. 使用分页构建API