Что является более эффективным для «живой функции поиска»?
На 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, это медленнее.
Какой самый лучший и быстрый способ сделать это? Или есть другой трюк для этого?
3 ответа
Вот, может быть, небольшое улучшение вашего примера 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 секунду (примечание: я добавил даже забавные переходы, чтобы он выглядел круто и быстро).
Способ javaScript хорош, потому что вы должны менять значение каждый раз, когда пользователь вводит данные, чтобы javaScript обеспечивал лучший пользовательский опыт, чем php
Это действительно зависит от варианта использования.
Мы используем Ajax, чтобы уменьшить накладные расходы HTML при обратной передаче. Это означает, что вы обмениваетесь только данными (например, с json). Имея это в виду, вы первый подход "лучше".
Производительность может сильно отличаться. Насколько хорош ваш сервер? Насколько хороши ваши клиенты? Насколько велики данные? Что я могу сказать наверняка, если вы создадите таблицу на клиенте, ваш сервер будет делать меньше (то есть может обрабатывать больше запросов).
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.