Jquery-append函数花费了太多时间

Jquery - append function takes too much time

本文关键字：太多 时间 函数 Jquery-append      更新时间：2024-04-30

我正在尝试将大数据插入DOM。我使用jquery ajax方法从DB中检索数据。我收到的数据是ul和li的列表，其中有大约6k条记录。收到的数据，我需要插入到树状结构中。下面是我使用ajax方法并尝试使用append函数插入接收到的数据的代码。append函数在插入时会花费大量时间。有办法提高性能吗？

$.ajax({
    type: "POST",
    async: true,
    url: "TreeView.aspx/GetTreeOnDemand",
    data: '{labelTitle: "' + $(load)[0].title + '" }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
        if(result.d) {
            $(that).siblings().remove();
            $(that).closest("li").append(result.d);
            $(that).parent().children('ul').slideToggle('fast');
        } else {
            $(that).parent().removeClass('parent active');
            $(image).insertBefore(that)
        }
    }                                             
});

到目前为止，我已经尝试将接收到的数据推送到数组中，然后附加数组，但没有看到任何改进。请帮助

如果您可以选择将数据库结构简化到最低限度（可能只是一个由id、title和Name组成的json格式字符串），这可能会有很大帮助，然后您可以使用诸如"createDocumentFragment and createElement"之类的本地javascript方法来创建和附加列表项（首先是文档片段，然后是整个内容同时到目标父元素。）

也就是说，我创建了你所附加数据的简化版本，去掉了内联样式，删除了不需要的元素，并用CSS对所有内容进行了样式设置，并在js中而不是内联中附加了点击处理程序：

演示

有了这么多记录，自然不会立即添加，但您可以尝试以下几点：1。首先只追加100条左右的记录，这样我们一开始就可以立即显示一些内容，然后再追加其余内容。2.添加某种"加载"动画，这甚至可以提供一些创造力的机会。3.不要加载所有记录——包括分页或ajax的"加载更多"按钮。

var that = '.test1';
var jsonData = {
    'd': buildVeryLongData()
};
function buildVeryLongData() {
    var str = '<ul class="tree">';
    for (var i = 0; i < 6000; i++) {
        str += '<li id="' + i +'"><label title="ABC/XYZ">Name</label></li>';
    }
    str += '</ul>'
    return str;
}
function HandleClick(el) {
    // Handle Click
    console.log(el);
}
$.ajax({
    type: "POST",
    async: true,
    url: "/echo/json/",
    data : { json: JSON.stringify( jsonData ) },
    dataType: "json",
    success: function (result) {
        if(result.d)
        {
         $(that).siblings().remove();
         $(that).closest("li").append(result.d);
         $(that).parent().children('ul').slideToggle('fast');
         // attach handler here
         $('.tree label').on('dblclick', function () {
             HandleClick(this);
         });
        }
        else
        {
         $(that).parent().removeClass('parent active');
         //$(image).insertBefore(that)
        }
    }                                             
});

CSS：

// example
.tree li:before {
  content: url('../1/ig_treeL.gif');
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
}
// example
.tree label {
  vertical-align: middle;
}

HTML:

<ul>
  <li class="test1"></li>
</ul>
相关文章：