问题

Question

我有一个问题我无法解决，很难解释，但我会尽我所能。

基本上我已经创建了一个Web应用程序（在 CodeIgniter 中），它接受来自 json编码的数组的一些数据，并使用<成功函数中的strong> jQuery .prependTo（）方法。

表格的每一行都包含数据库中的不同元素（来自json），具体取决于 i 计数器的值。

代码如下（我删除了关于<tr>和<td>内容的部分，它只是造型）

$.ajax({
type: "get",
async: false,
....
....
success: function(data) {


                    var i;
                    var item_cost = new Array();
                    var item_name = new Array();
                    var item_code = new Array();
                    var item_interno = new Array();

                    for(i = 0; i < data.length; i++) {
                       item_cost[i] = data[i].cost;
                       item_name[i] = data[i].name;
                       item_code[i] = data[i].code;
                       item_interno[i] = data[i].codiceinterno;


                       var newTr = // creates the <tr>
                       newTr.html('//creates the <td>')
                       newTr.prependTo("#myTable");
                    }
},

我很抱歉，如果有点不清楚，如果你需要我更新代码，因为我错过了一些重要的事情让我知道，我会这样做，但这个代码本身应该解释我的问题。

如果在数据库中只有少量行（例如，i = 300），则应用程序可以很好地工作。它们被正确显示和呈现，并且我没有得到任何浏览器减速过程。但是当我使用i = 4000行时，浏览器开始表现得很慢，就像Javascript代码太重而无法呈现，我得到了＆＃34;滞后＆＃34;尝试向下滚动html表，或在表格内的输入框中输入一些值（稍后通过单击按钮更新它）。这是我的问题：我非常确定我做错了会加载太多内存，因为我在非常强大的计算机上测试了这一点。即使完全禁用我的CSS也不会做到这一点。

感谢你能给我的任何帮助，我们将非常感激。

Answer 1

问题

你在循环中使用了很多函数调用。这需要很多果汁，你拥有的物品越多，它就越慢。

要解决这个问题，我们需要减少函数调用次数。

我的建议

使用本机JavaScript可以节省性能。所以我建议你使用字符串连接而不是jQuery的DOM操作方法。

让你重复循环。由于您希望数据以后代顺序排列，我们需要反转循环：

for(i = data.length; i >= 0; i--)

然后使用简单的字符串连接来构建tr。为此，你需要在循环之外使用var：

var myHTML = ''; //That's the one!
var i;
var item_cost = new Array();
var item_name = new Array();
var item_code = new Array();
var item_interno = new Array();

使用tr构建+=。虽然，使用单行会使它更快，但可读性更低：

for(i = data.length; i >= 0; i--) {
    item_cost[i] = data[i].cost;
    item_name[i] = data[i].name;
    item_code[i] = data[i].code;
    item_interno[i] = data[i].codiceinterno;


    myHTML += '<tr>';
    myHTML += '<td>'+yourData+'</td>';//add those data here
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '</tr>';
}

然后，将其添加到您的表格中：

var myHTML = '';
var i;
var item_cost = new Array();
var item_name = new Array();
var item_code = new Array();
var item_interno = new Array();

for(i = data.length; i >= 0; i--) {
    item_cost[i] = data[i].cost;
    item_name[i] = data[i].name;
    item_code[i] = data[i].code;
    item_interno[i] = data[i].codiceinterno;


    myHTML += '<tr>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '</tr>';
}

$('#myTable').prepend(myHTML);

限制

从我的测试中，字符串长度可以是2^28，但不能是2^29。这使得最大长度约为。 268,435,456 （约可能不是最好的词，因为它在 268,435,456 和 536,870,912 之间。

如果你的数据字符数高于那个数字（但是让我们感觉很好，那就是很多数据），你可能需要将字符串拆分为2个变量。

Answer 2

我知道这不是你问题的真实答案，但是......

jQuery肯定会导致延迟 - 难怪。但是 - 无论你选择jQuery来构建表还是只是连接HTML - 让我们同意：4000行肯定是很多数据。数据太多了？我会说：200已经是。如果我们成千上万，问题突然出现：为什么？是否有任何与应用程序相关的原因，您确实需要立即检索如此大量的记录？其中一些可能永远不会被阅读。

为什么不尝试基于ajax的延迟加载方法？每次加载50个记录部分看起来会更加强大IMO，肯定会是一个更好的用户体验。

Answer 3

我的两分钱：为什么不检索服务器组成的行而不是让客户端工作来复合它？你甚至可以缓存它。唯一的问题是你会有更多的流量，但在浏览器中它会变得更顺畅

更新

要实现它，您可以使用方法区分ajax输入与否，并仅显示$tbody，或根据它显示整个表格。它会是这样的：

$tbody = $this->load->view( 'view_with_oly_tbody', $data, true );
if ( $this->input->is_ajax_request() ) {
    return $tbody;
} else {
    $data['tbody'] = $tbody;
    $this->load->view('your_view_with_table_with_tbody_as_var', $data);
}

注意：上面的代码会根据你的观点，控制器，你的AJAX中是否有json，在其他部分写回报等等而有所不同。上面的代码只是为了澄清我对CI的观点。

啊！并且您必须在客户端中管理答案以附加/替换/替换表格的正文。

jQuery .prependTo（）创建了一个表，导致浏览器延迟＆＃34;滞后＆＃34;

3 个答案:

问题

我的建议

限制

更新