什么更有效率?用javascript或php生成每个tr?
对于“实时搜索功能”,什么更有效 在keyup上,有一个请求被发出,记录以json的形式返回,我以这种方式附加这些记录:什么更有效率?用javascript或php生成每个tr?,javascript,php,jquery,Javascript,Php,Jquery,对于“实时搜索功能”,什么更有效 在keyup上,有一个请求被发出,记录以json的形式返回,我以这种方式附加这些记录: $.ajax({ type: "POST", url: "/spares/search/getresults", dataType: "json", data: "val="+ searchval, success: function
$.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代码中,我循环遍历每个结果并向其中添加一些值,然后在那里生成表,因为我已经有一个for循环。当我附加这个时,它是闪电般的快。当我用javascript附加记录并循环遍历每个json结果时,速度会变慢
什么是最好的、最快的方法?还是有其他的技巧可以做到这一点 javaScript方法很好,因为每次用户输入时都必须更改值,这样javaScript将提供比php更好的用户体验,这实际上取决于用例 我们使用Ajax来减少回发的HTML开销。这意味着您只能交换数据(例如,使用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);
}
}
});
$.ajax({
类型:“POST”,
url:“/spares/search/getresults”,
数据类型:“json”,
数据:“val=”+searchval,
成功:功能(响应){
如果(response.error==false){
var_content=“”;
$.each(response.result、函数(索引、值){
_内容+=“”+value.id+“”+prod\u id+“”+article+“”+value.cd\u cred+“”+value.name\u org+“”+value.quality+“”+article\u description+“”+++“添加”+“”;
});
$(“.choosCred”).append(_内容);
}
}
});
现在jQuery不需要查找每个迭代并注入HTML。相反,只做一次
我认为你的方法取决于结果,除了多少。因为请求中返回的HTML越多,javascript读取/解析它所需的时间就越长
例如,如果您将结果集返回为有200多个项目。它必须解析可能超过1MB的body/HTML。你可以把它延长一点。
但是如果结果集是10-20轮,那么直接将生成的HTML推送到页面中会更快
希望你能理解我的想法
最近也有同样的问题,因为我的javascript试图解析5MB的HTML。在调查之后,浏览器花了5-10秒来解析响应,而PHP在150-200毫秒内完成。我改为JSON并使用javascript进行解析,只需1秒即可完成(注意:我甚至添加了时髦的转换,以使其看起来既酷又快)。第二种方法将使您的浏览器在有大量记录的情况下挂起。显然,最好降低响应权重,因此在javascript中这样做会更明智吗?那个么,若用户使用上下文菜单将文本粘贴到输入中怎么办?!别忘了处理它too@A.Wolff是的,在keyup上,在搜索框中粘贴内容不是问题。不要将字符串作为数据传递。改为传递
{val:searchval}
对象。否则,您需要注意正确地对值进行URL编码。好的,但我的经验是,在php中生成值的速度比javascript快。@da1lbi3,是的,在服务器端(php)中动态加载数据的速度比客户端快。@user3040610我在我的用例中添加了一个注释。最快的方法是什么?在php中生成它,因为已经有for循环,或者在javascript?@da1lbi3中发送json并通过它进行循环,以便在php中生成更快的加载。您在本地计算机上遇到过这种情况,但当您将文件托管在服务器上时,javascript将比php代码执行得更好。我有100项,我在php中有一个循环,将一些值附加到数组中。因此,更好的方法是将它以json格式发送到客户端,然后在客户端附加代码?是的,为了使响应尽可能小,只需要创建结果所需的数据。我已经测试了您的示例,速度非常快!非常感谢。
$.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);
}
}
});