什么更有效？在javascript或php中生成每个tr？

Question

什么是"实时搜索功能"更有效？

在有一点延迟的键盘上是一个请求,记录在json中返回并且我以这种方式追加它们:

$.ajax({            
            type: "POST",
            url: "/spares/search/getresults",
            dataType: "json",
            data: "val="+ searchval,
            success: function(response){
                if (response.error == false) {

                        $.each(response.result, function(index, value){
                            $(".choosCred").append("<tr class='productChoose'> <td class='hide'>"+ value.id +"</td> <td class='hide'>"+ prod_id +"</td> <td class='hide'>"+ article +"</td> <td>"+ value.cd_cred +"</td> <td >"+ value.name_org +"</td> <td >"+ value.quality +"</td> <td class='hide'>"+ article_description +"</td> <td>" + '<button type="button" id="add"class="btn-xs btn btn-info add">Add </button>' +"</td> </tr>");         
                        }); 
                }  
            }
        });

但我可以在php中生成完整的表,然后像这样追加它:

 $.ajax({            
            type: "POST",
            url: "/spares/search/getresults/",
            data: "SearchTerm="+ searchValue,
            success: function(response){
                $(".products tbody").html(response).show();
            }
        });

注意:在PHP代码中,我遍历每个结果并为其添加一些值,而不是我在那里生成表,因为我已经有一个for循环.当我追加它时,它是闪电般的.当我用javascript追加记录并循环遍历每个json结果时,它会变慢.

这是最好和最快的方法是什么？或者还有另外一个技巧吗？

Answer 1

这里可能是对你的 javascript 示例的一个小改进：

$.ajax({            
    type: "POST",
    url: "/spares/search/getresults",
    dataType: "json",
    data: "val="+ searchval,
    success: function(response){
        if (response.error == false) {
            var _content = "";
            $.each(response.result, function(index, value){
                _content += "<tr class='productChoose'> <td class='hide'>"+ value.id +"</td> <td class='hide'>"+ prod_id +"</td> <td class='hide'>"+ article +"</td> <td>"+ value.cd_cred +"</td> <td >"+ value.name_org +"</td> <td >"+ value.quality +"</td> <td class='hide'>"+ article_description +"</td> <td>" + '<button type="button" id="add"class="btn-xs btn btn-info add">Add </button>' +"</td> </tr>";         
            }); 

            $(".choosCred").append(_content);
        }  
    }
});

现在 jQuery 不需要查找每一次迭代并注入 HTML。相反，做一次。

我认为你的方法取决于你的结果集是什么，除了多少。因为您在请求中返回的 HTML 数量有多少，JavaScript 读取/解析它需要多长时间。

例如，如果您返回的结果集包含 200 多个项目。它必须解析可能超过 1MB 的正文/HTML。而且你可以排除它需要更长的时间。但是，如果您的结果集约为 10-20，则将生成的 HTML 直接推送到您的页面会更快。

希望你明白我的意思。

最近遇到了同样的问题，因为我的 javascript 试图解析 5MB 的 HTML。经过调查，浏览器需要 5-10 秒来解析响应，而 PHP 在 150-200 毫秒内完成。我更改为 JSON 并使用 javascript 进行解析，并且在 1 秒内完成（注意：我甚至添加了时髦的过渡以使其看起来很酷且快速）。