Điều gì hiệu quả hơn? Tạo mỗi tr trong javascript hoặc trong php?

Question

Điều gì hiệu quả hơn cho 'chức năng tìm kiếm trực tiếp'?

On KeyUp với một sự chậm trễ chút là một yêu cầu thực hiện, các hồ sơ trở lại trong json và tôi thêm những người trên theo cách này:

$.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>");   
         }); 
       } 
      } 
     }); 

Nhưng tôi có thể tạo ra các bảng đầy đủ trong php và sau đó thêm nó như này:

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

LƯU Ý: Trong mã php tôi lặp qua mỗi kết quả và thêm một số giá trị vào nó, tôi tạo bảng đó vì tôi đã có vòng lặp for. Khi tôi nối nó thì nó nhanh như chớp. Khi tôi nối các bản ghi với javascript và lặp qua mỗi kết quả json thì nó sẽ chậm hơn.

Cách tốt nhất và nhịn ăn để làm điều đó là gì? Hoặc là có một thủ thuật để làm điều này?

Answer 1

Đây có thể là một cải tiến nhỏ trên ví dụ javascript của bạn:

$.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); 
     } 
    } 
}); 

Bây giờ jQuery không cần phải tra cứu mỗi lần lặp đơn và tiêm HTML. Thay vào đó hãy làm điều đó một lần.

Tôi nghĩ rằng cách tiếp cận của bạn tùy thuộc vào kết quả mà bạn ngoại trừ là bao nhiêu. Bởi vì làm thế nào nhiều HTML trở lại trong yêu cầu của bạn phải mất bao lâu để javascript đọc nó/phân tích nó.

Ví dụ: nếu bạn ngoại trừ việc trả lại tập kết quả thành 200+ mục. Nó phải phân tích cú pháp có thể hơn 1MB nội dung/HTML. Và bạn có thể ngoại trừ nó lâu hơn một chút. Nhưng nếu tập hợp kết quả của bạn nhanh hơn 10-20 để đẩy HTML được tạo trực tiếp vào trang của bạn.

Hy vọng bạn hiểu nơi Im sẽ đi với nó.

Có vấn đề tương tự gần đây, vì javascript của tôi đã cố phân tích 5MB HTML. Sau khi điều tra nó đã mất 5-10 giây trình duyệt để phân tích cú pháp phản ứng, trong khi PHP được thực hiện trong vòng 150-200ms. Tôi đã thay đổi thành JSON và phân tích cú pháp bằng javascript và nó đã được thực hiện dưới 1 giây (lưu ý: và tôi đã thêm vào các hiệu ứng chuyển tiếp sôi nổi để làm cho nó trông thật tuyệt và nhanh).

Answer 2

JavaScript cách là tốt bởi vì bạn phải thay đổi bạn đánh giá cao tất cả các đầu vào người sử dụng thời gian để JavaScript sẽ cung cấp kinh nghiệm người dùng tốt hơn so với php

Answer 3

Nó được thực sự phụ thuộc vào các usecase.

Chúng tôi sử dụng Ajax để giảm chi phí HTML từ một lần đăng lại. Điều này có nghĩa là bạn chỉ trao đổi dữ liệu (với json chẳng hạn). Với điều này trong tâm trí, bạn nắm tay aproach là "tốt hơn" một.

Hiệu suất là một điểm có thể rất khác nhau. Máy chủ của bạn tốt đến mức nào? Khách hàng của bạn tốt đến mức nào? Dữ liệu lớn đến mức nào? Những gì tôi có thể nói chắc chắn, nếu bạn tạo bảng trên máy khách, máy chủ của bạn có ít hơn để làm (có nghĩa là có thể xử lý nhiều yêu cầu hơn).