javascript - Ajax/Json 数据的大量 Jquery 附加的替代方案

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)
              )
            )

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 条，如果可能的话，您可能希望研究服务器端的某种分页或过滤。让您的服务器端代码来完成繁重的工作!