jQuery .prependTo() 创建表导致浏览器“滞后”

Question

我有一个无法解决的问题，很难解释，但我会尽力而为。

基本上我已经创建了一个 Web 应用程序（在 CodeIgniter 中），它获取来自 json 编码 的数组的一些数据，并通过使用 成功函数中的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 代码太重而无法呈现一样，并且在尝试向下滚动 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，并且肯定会是更好的 UX。

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 的观点。

啊！并且您必须在客户端管理答案以附加/前置/替换表的主体。