Что эффективнее? Генерировать каждый tr в javascript или в php?

Question

Что является более эффективным для «живой функции поиска»?

На 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 php jquery

7

da1lbi3 19 Дек 2015 в 14:24

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 элементов. Он должен анализировать, возможно, более 1 МБ тела / HTML. И вы можете, кроме этого, занять немного больше времени. Но если ваши наборы результатов находятся в диапазоне 10-20, то быстрее сгенерировать HTML-код прямо на вашу страницу.

Надеюсь, вы понимаете, куда я иду с этим.

В последнее время возникла та же проблема, потому что мой javascript пытался проанализировать 5 МБ HTML. После анализа браузеру потребовалось 5-10 секунд, чтобы разобрать ответ, в то время как PHP был сделан в течение 150-200 мс. Я изменил на JSON и анализировал с помощью javascript, и это было сделано за 1 секунду (примечание: я добавил даже забавные переходы, чтобы он выглядел круто и быстро).

2

Yoram de Langen 19 Дек 2015 в 12:07

Answer 2

Способ javaScript хорош, потому что вы должны менять значение каждый раз, когда пользователь вводит данные, чтобы javaScript обеспечивал лучший пользовательский опыт, чем php

-2

manoj shukla 19 Дек 2015 в 11:35

Answer 3

Это действительно зависит от варианта использования.

Мы используем Ajax, чтобы уменьшить накладные расходы HTML при обратной передаче. Это означает, что вы обмениваетесь только данными (например, с json). Имея это в виду, вы первый подход "лучше".

Производительность может сильно отличаться. Насколько хорош ваш сервер? Насколько хороши ваши клиенты? Насколько велики данные? Что я могу сказать наверняка, если вы создадите таблицу на клиенте, ваш сервер будет делать меньше (то есть может обрабатывать больше запросов).

2

Christian Gollhardt 19 Дек 2015 в 11:58

Что эффективнее? Генерировать каждый tr в javascript или в php?

3 ответа

Похожие вопросы

Новые вопросы

javascript