什麼是更有效率？在javascript或php中生成每個tr？

什麼是更有效的'實時搜索功能'？什麼是更有效率？在javascript或php中生成每個tr？

在有一點點延遲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結果時，它會變慢。

什麼是最好的和禁食的方式來做到這一點？或者還有另一個訣竅呢？

來源

2015-12-19 da1lbi3

如果記錄數量很高，第二種方法會使瀏覽器掛起。 – nikhil

很明顯，減少響應的重量是更好的，所以在javascript中這樣做更有意義 – Yaakov

在keyup上？那麼如果用戶使用上下文菜單將文本粘貼到輸入中呢？不要忘記處理它 –

這裏，也許在你的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多長時間才能讀取/解析它。

例如，如果你除了返回結果集有200+項目。它必須解析超過1MB的body/HTML。你可以除了它稍微長一點。但是，如果你的結果集是10-20輪，它可以更快地將生成的HTML直接推送到你的頁面中。

希望你明白我在哪裏去用它。

最近有同樣的問題，因爲我的JavaScript試圖解析5MB的HTML。在調查之後，瀏覽器花費5-10秒來解析響應，而PHP在150-200毫秒內完成。我更改爲JSON並使用JavaScript進行解析，並在1秒內完成（注意：我添加了甚至時髦的轉換以使它看起來很酷且快速）。

來源

2015-12-19 11:59:17

我有100個項目，並且我在php中有一個循環以將一些值附加到數組。所以更好的方法是將它用json發送給客戶端，並在那裏附上它的代碼？ – da1lbi3

是的，爲了保持儘可能小的響應，只有必要的數據來創建你的結果。 –

我測試過你的例子，它閃電般快！謝謝！ – da1lbi3

-2

javaScript的方法是很好的，因爲你必須改變你珍惜每一次用戶輸入所以用JavaScript提供更好的用戶體驗比PHP

來源

2015-12-19 11:35:27

好的，但我的經驗是當我在PHP中生成它的速度比使用JavaScript更快。 – da1lbi3

@ da1lbi3，在服務器端（php）是動態加載數據時比客戶端更快。 – user3040610

@ user3040610我已經在我的用例中添加了一個註釋，而不是最快的方法？生成它在PHP中，因爲已經有一個for循環，或發送json回來，並通過它在JavaScript中循環？ – da1lbi3

它真的取決於用例。

我們使用Ajax來減少回發的HTML開銷。這意味着你只能交換數據（例如使用json）。考慮到這一點，你的拳頭是「更好」的一個。

性能是一個可以非常不同的點。你的服務器有多好？你的客戶有多好？數據有多大？我可以肯定地說，如果你在客戶端上創建表，你的服務器沒有什麼功能（這意味着可以處理更多的請求）。

來源

2015-12-19 11:58:37

什麼是更有效率？在javascript或php中生成每個tr？

回答

相關問題