jquery 提高每个函数选择器的性能答案

【问题标题】：jquery increase performance of each function selectorjquery 提高每个函数选择器的性能
【发布时间】：2017-07-13 09:32:58
【问题描述】：

我有一个函数，它使用 jquery .each() 选择器通过获取具有特定类的每个跨度的 id 来填充表，然后将该 id 传递给 Ajax 函数。

function populate(){
                  $('#thelist span').each(function()
                    {
                        let id = this.id;
                        let url = `importer.php?id=${id}`;
                         $.ajax(
                          {
                            url: url,
                            success: function(result)
                              { 
                                $("#"+id).html(result);
                              }
                          });
                    })
              };

我的问题是如何提高性能。我知道 .each() 导致延迟。有没有更好的方法来写这个？

【问题讨论】：

使用基准测试差异解决方案：jsperf.com/foreach-vs-jquery-each/9
请看这里：stackoverflow.com/questions/11887450/…
编辑您的后端以一次接受所有 ID，并返回适当的内容，然后执行一个 ajax 请求
问题是太多的同时 ajax 请求（如果你的 importer.php 中有一个会话开始，那么你也有这个锁）。尝试将所有请求归为一组并执行一个批量请求（例如 importer.php?ids=1,2,3,4,5）
更好的方法是在 span 上放置一个类 - 目前它必须查找具有 id 的元素，然后查找所有子 span，可能会有所帮助，但作用不大跨度>

标签： javascript jquery

【解决方案1】：

部分解决方案是不为此使用 jQuery。原生循环（for 和 while）的性能令人难以置信，甚至原生的 forEach 也提供了更好的性能。但这并不是故事的全部，您在每个循环上执行一个请求，这在架构上是一个坏主意。这就是问题的症结所在。

我会做并推荐的是循环遍历您的元素，将 ID 存储在队列中（数组即可），然后在完成此操作后，将 ID 序列化并一次性将它们发送到服务器.

function populate() {
    let ids = [];

    $('#thelist span').each(function() {
        let id = this.id;
        ids.push(id);
    });

    $.ajax({
        type: "POST",
        url: "importer.php",
        dataType: "json",
        data: JSON.stringify({ ids: ids }),
        success: function(result) {
            $("#" + result.id).html(result.value);
        }
    });
};

我在这里提出的是架构上的改变。您的进口商应接受我们发送的 ID 的 JSON。然后结果应该返回一个带有id 和value 属性的JSON 对象。 id 属性匹配 DIV 和包含您的 HTML 的 value。

我还认为您可以从切换到本机 for 循环而不是使用 jQuery 的 each 迭代器中受益。您遇到的问题不是 jQuery 的 each 方法的结果，但我会考虑远离它。

【讨论】：

感谢您的建议，我确实切换到了原生 for 循环，并发现我的应用程序的速度大大提高了

【解决方案2】：

each 循环不会导致延迟，但 ajax 调用会，因为它是等待服务器响应的异步调用。您无法避免从服务器加载某些内容的延迟。您可以在加载数据时显示加载器动画或隐藏内容。

【讨论】：

【解决方案3】：

如果控制不当，使用如此多的异步请求会导致延迟甚至令人头疼，如果可能，请尽量避免使用此类请求，因为它们不必按照已完成的顺序返回。

也许你应该考虑而不是迭代 ajax 函数，迭代 ajax 响应，并改变服务器返回数据的方式；而是返回一个特定的 id，返回所有这些，并检查它是否包含在表中以显示它。像这样的：

function popuplate(){
  let url = 'importer.php';
  $.ajax({
    url: url,
    success: function(result){ 
      $.each(result,function(i,r){
        $("#"+r.id).html(r.result);
      });
    }
  });
}

【讨论】：

记住 importer.php?id=${id}

【解决方案4】：

这是我尝试将 .each() 转换为 for 循环：

function populate(){
                  var myID = $('#thelist span'); //collect all spans as array
                  for (var i = 0, len = myID.length; i < len; i++) //for loop
                    {
                        let myid = myID[i].id; //span at count i in array as number
                        let url = `importer.php?id=${myid}`;
                         $.ajax(
                          {
                            url: url,
                            success: function(result)
                              { 
                                $('#'+myid).html(result);
                              }
                          });
                    })
              };

我确实获得了性能的显着提升。

【讨论】：