Question

我试图将大数据插入DOM。我使用jquery ajax方法从DB检索数据。我收到的数据是ul和li的列表，它有一个大约6k记录的列表。收到的数据，我需要插入到treeview结构中。下面是我使用ajax方法并尝试使用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)
        }
    }                                             
});

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

Answer 1

如果您可以选择将数据库结构简化为最小化（可能只是一个json格式的id，title和Name字符串），那么它可能会有很大帮助，然后您可以使用本机javascript方法，例如'{{ 3}} and createDocumentFragment`创建并附加列表项（首先是文档片段，然后是整个事物一次到目标父元素。）

那就是说我创建了一个简化版本的数据，取出内联样式，删除不需要的元素，使用CSS设置样式并将点击处理程序附加到js而不是内联：

<强> createElement

随着许多记录追加它自然不会是即时的，但有些事情你可以尝试：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>

Jquery - 追加函数需要花费太多时间

1 个答案: