Javascript jQuery创建的列表需要很多时间

我有一个JSON数组，它有9000条记录，并使用列表li显示。HTML对象是使用jQuery创建的：

$j.each(DTOList, function(index,obj) {
              var $li = $j("<li/>");
              var $button = $j("<button/>", { type: "button" , onClick:"location.href='playfile.html?messageId="+obj.id+"&operation=play&to="+obj.to+"&from="+obj.from+"'" });
              var $parentDiv = $j("<div/>", { class: "buttonMargin" });
              var $numDiv =  $j("<div/>", { class: "num" ,text:obj.to});
              var $nameDiv =  $j("<div/>", { class: "name" ,text:obj.from});
              var $timeDiv =  $j("<div/>", { class: "time" , text:obj.time});

              $parentDiv.append($numDiv);
              $parentDiv.append($nameDiv);
              $parentDiv.append($timeDiv);
              $parentDiv.append($j("<hr>"));

              $j("#datalist").append($li.append($button.append($parentDiv)));

        });

$j.each（数据列表、函数（索引、对象）{
var$li=$j（“
”）；
var$button=$j（“，{type:”button），onClick:“location.href='playfile.html？messageId=“+obj.id+”&operation=play&to=“+obj.to+”&from=“+obj.from+”””）；
var$parentDiv=$j（“，{class:“buttonMargin”}）；
var$numDiv=$j（“，{class:“num”，text:obj.to}）；
var$nameDiv=$j（“，{class:“name”，text:obj.from}）；
var$timeDiv=$j（“，{class:“time”，text:obj.time}）；
$parentDiv.append（$numDiv）；
$parentDiv.append（$nameDiv）；
$parentDiv.append（$timeDiv）；
$parentDiv.append（$j（“
”）；
$j（“#数据列表”）.append（$li.append（$button.append（$parentDiv））；
});

以下是由上述代码创建的li示例：

<li>
    <button type="button"
        onclick="location.href='playfile.html?messageId=1165484222&amp;operation=play&amp;to=Fax Line&amp;from=abc'">
        <div class="buttonMargin">
            <div class="num">Fax Line</div>
            <div class="name">def</div>
            <div class="time">Jan 04,2018 12:02:44 AM</div>
            <hr>
        </div>
    </button>
<li>

传真线路
def
2018年1月4日12:02:44上午

这里的问题是，上面的代码至少需要1.5分钟才能加载，在此之前，我的HTML页面是空白的。有没有办法改进上述代码以提高性能？

看看性能测试。对循环使用

，而不是
。each（）
函数。
这里的主要问题可能是在这一行中执行的DOM操作

$j("#datalist").append($li.append($button.append($parentDiv)));

触发文档反复回流

因此，作为第一个改进，尝试首先生成所有项（不将其附加到DOM中），然后通过一个操作将其附加

大概是这样的：

var elements = [];

$j.each(DTOList, function(index,obj) {
         .....
         elements.push($li);
});

$j("#datalist").append(elements);

很有趣，但基本上还是无关紧要。OP的循环次数仅为9000次。而且，该微基准的定义非常糟糕？JS引擎甚至可能完全消除该代码——因此时间由循环控制，而不是任何实际的工作。在这个问题上。加载速度慢不是因为循环构造，而是因为循环时进行了相对昂贵的DOM操作（与页面加载一起内联完成）。请参见、、等（基本上，搜索“微基准点的危险”的任何结果）是的，但是，通过以9k ops/s的速度更改@user2864740循环（从该屏幕截图开始），
$可以稍微提高性能。每个
仍然每秒迭代450万个项目（9k/s*500），而OP只需要迭代9000个项目。换句话说，即使使用
$。每一个
（9k次/秒）迭代所有9k（9000）项只需要1/500秒（或0.2毫秒！）。这不是您要查找的蠕虫：}使用分页和/或延迟DOM操作（例如在setInterval中）。应该允许页面很快执行第一次刷新。我想应该使用延迟加载技术。最初添加1000个列表项，然后用户再次滚动1000个，以此类推，这可以减少页面上的负载。是否可以在worker中生成HTML本身并将其附加？目前我正在使用jquery-1.11.3，我将更改代码并让您知道。感谢编辑：如果对OP有疑问，它们应该在问题本身的评论部分（有时在答案的评论部分是有意义的，但问题不应该在答案中，除非它们是修辞性的/回答的…）