Question

我正在创建一个包含大量Ajax和Javascript的数据量很大的应用程序。

选择返回大量数据的值时，真的开始挣扎。

这更像是一个讨论而不是一个问题，但有人会知道更有效的方法吗？它也处于循环中，可以被调用多达5000次，因为你可以想象这是非常浏览器的重量。

           .append($('<li></li>')
              .addClass('wo')
              .append($('<h2></h2>')
                  .text(item.WorksOrderNumber + '/A-' + item.OperationNumber)
              )
            )
            .append($('<li></li>')
              .addClass('handle')
              .append($('<span></span>')
                .addClass('icon-move')
              )
            )
            .append($('<li></li>')
              .addClass('partno')
              .append($('<span></span>')
                  .addClass('secondary radius label')
                  .text(item.PartDescription)
              )
            )
            .append($('<li></li>')
              .addClass('quantity show-for-medium-up')
              .append($('<span></span>')
                  .addClass('secondary radius label')
                  .text('x' + item.PlannedQuantity)
              )
            )
            .append($('<li></li>')
              .addClass('date')
              .append($('<span></span>')
                  .addClass('secondary radius label')
                  .append($('<span></span>')
                    .addClass('icon-clock')
                    .text(' ')
                  )
                  .text(item.PlannedStartDate)
              )
            )
            .append($('<li></li>')
              .addClass('status')
              .append($('<span></span>')
                  .addClass('secondary radius label')
                  .text(item.WorksOrderOperationStatus)
              )
            )
            .append($('<li></li>')
              .addClass('colour colour-' + item.Colour)
            )
            .append($('<li></li>')
              .addClass('preceding')
              .append($('<span></span>')
                .addClass('secondary radius label')
                .text('Preceding: ' + item.Preceding)
              )
            )

Example of the presentation etc

Answer 1

就附加元素的前端性能而言，构建jQuery对象数组然后批量追加会更快。 jQuery可以处理数组，它在幕后做了一些事情，比单个.append()调用快得多：

使用数组

var works = [];

迭代您的数据，每次迭代添加到数组。例如：

works.push( $('<li></li>')
          .addClass('wo')
          .append($('<h2></h2>')
              .text(item.WorksOrderNumber + '/A-' + item.OperationNumber)
          )
        ) );

这可能比这更快，但需要调查。结果将是相同的：

works.push( $('<li class="wo"><h2>' + item.WorksOrderNumber + '/A-' + item.OperationNumber + '</h2></li>');

一旦你的阵列准备就绪，你的容器就会.append(works)。

这是一个jsperf测试证明这更快：http://jsperf.com/jquery-append-one-by-one-vs-bulk。

更快的方法是使用jsperf测试中片段示例中显示的片段，您可能希望在采用该方法之前读取片段。

另外，你提到有关循环被调用达5000次。假设这些记录是您所指的5000条记录，如果可能的话，您可能需要调查服务器端的某种分页或过滤。让你的服务器端代码做繁重的工作！

替代许多Jquery附加Ajax / Json数据

1 个答案: