什么更有效?用javascript或php生成每个tr

What is more efficient? Generate each tr in javascript or in php?

本文关键字：tr php 有效 javascript 什么      更新时间：2023-09-26

对于"实时搜索功能"，什么更有效？

在有一点延迟的keyup上是一个请求，记录以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结果时，速度会慢一些。

做这件事最好、最快捷的方法是什么？或者还有其他技巧可以做到这一点？

这里可能是对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的body/HTML。你可以，但需要更长的时间。但是，如果你的结果集是10-20轮，那么将生成的HTML直接推送到你的页面会更快。

希望你能理解我的想法。

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

这实际上取决于用例。

我们使用Ajax来减少回发的HTML开销。这意味着您只交换数据（例如使用json）。考虑到这一点，你的拳头是"更好"的一个。

性能是一个非常不同的点。你的服务器有多好？你的客户有多好？数据有多大？我可以肯定的是，如果你在客户端上创建表，你的服务器就不用那么做了（这意味着可以处理更多的请求）。

javaScript方式很好，因为每次用户输入时都必须更改值，因此javaScript将比php 提供更好的用户体验

相关文章：