AJAX-запрос jQuery с фильтром LinQ и примером tmpl jQuery

Question

Мы использовали этот скрипт, чтобы получить и отфильтровать JSON с 100 000 элементов, чтобы сделать быстрый поиск на стороне пользователя, но, к сожалению, это не достаточно быстро.

Что вы думаете, как я могузаставить этот скрипт работать быстрее?

<script> 
    $(document).ready(function () {
        var data__ = new Array();
        var val__ = new Array();
        var val_sum = 0;


            $.ajax({
                url: 'hotel.php',
                type: 'POST',
                dataType: 'json',
                timeout: 5000,

                beforeSend: function () {

                }, error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.responseText);
                    alert(thrownError);
                    return false;
                },

                success: function (data) 
                {
                    var list = JSLINQ(data)
                       .Where(function(item){ return item.regio == "Afrika"; })
                       .OrderBy(function(item) { return item.name; })
                       .Select(function(item){ return item; });

                    var movies = list['items']

                    var markup = "<tr><td colspan='2'><b>Hotel: </b> ${name}</td><td><b>Régió:</b> ${regio}</td><td><b>Orszag:</b> ${orszag}</td><td><b>Város:</b> ${varos}</td></tr>";

                    /* Compile markup string as a named template */
                    $.template( "movieTemplate", markup );

                    /* Render the named template */
                    $( "#movieList" ).empty();
                    $.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
                }
            });
            return false;
    });
</script> 

Спасибо за помощь.

Answer 1

Я собираюсь предложить некоторые общие улучшения (пункт № 1) и некоторые конкретные (остальные).Вы можете выбрать, какие из них вы хотите пойти с.

1. Скомпилируйте шаблон один раз, а не при каждом вызове success.Переместите их за пределы success.
2. Вместо JSLinq используйте underscoreJS .UnderscoreJS делегирует вызовы собственной реализации браузера, когда это возможно, и, таким образом, является самым большим улучшением производительности.
3. Если вы можете, используйте шаблоны подчеркивания вместо jQuery.Они быстрее, чем jQuery, а также более гибкие (так как они чистые JS в отличие от jQuery, который оборачивает вещи для вас). Примечание: Недавно были разговоры о других шаблонизаторах, но поскольку я не использовал их, я не могу много о них говорить.
4. Если синтаксис подчеркивания беспокоит вас, выможно легко настроить его для использования синтаксиса jQuery (у них есть пример в документации), хотя вы легко привыкнете к нему довольно скоро.

Переписать код с подчеркиванием JS:

<script> 
        $(document).ready(function () {
            var data__ = [];
            var val__ = [];
            var val_sum = 0;
            var markup = "<% _.each(items, function(item) { %><tr><td colspan='2'><b>Hotel: </b> <%= item.name %></td><td><b>Régió:</b> <%= item.regio %></td><td><b>Orszag:</b> <%= item.orszag %></td><td><b>Város:</b> <%= item.varos %></td></tr><% }); %>";
            var compiledTemplate = _.template(markup);


                $.ajax({
                    url: 'hotel.php',
                    type: 'POST',
                    dataType: 'json',
                    timeout: 5000,

                    beforeSend: function () {

                    }, error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.responseText);
                        alert(thrownError);
                        return false;
                    },

                    success: function (data) 
                    {
                        var list = _(data)
                                         .chain()
                                         .select(data, function(item){ return item.regio == "Afrika"; })
                                         .sortBy(function(item) { return item.name; })
                                         .value();

                        var movies = list['items']

                        /* Render the named template */
                        $( "#movieList" ).empty().append(compiledTemplate(movies));

                    }
                });
                return false;
        });
    </script> 

Самое большое улучшение можно увидеть в самом медленном браузере - IE7.Этот код должен быть в 10 раз (приблизительно) быстрее, чем ваш существующий код, но выполните профилирование, чтобы получить точные цифры.

Answer 2

Я думаю, что большую часть времени тратится на выполнение LINQ-запроса.Я бы посоветовал вам запустить код через профилировщик javascript, например Profiles в Google Chrome, чтобы найти громоздкие операции.

Кроме того, === иногда может быть быстрее, чем ==, поскольку первый не выполняет преобразование типов, что может оказаться полезным при обходе больших коллекций.Кроме того, используя профилировщик, посмотрите, есть ли какие-либо преимущества при использовании необработанного кода javascript для выполнения операций:

var result = [];
for (var d in data) { // or regular for (var i = 0; ... 
    if (d.regio === "Afrika") {
        result.push(d); // or result[result.length] = d;
    }
}

result.sort(function(a, b) {
    // sort a.name and b.name
});

Я понимаю, что это минимальное использование ядра jQuery, но это средство для вас, чтобыхотя бы изучите издержки (или оптимизацию), которые предлагает библиотека.

Также попробуйте использовать обычную конкатенацию строк (или объединение массивов в зависимости от того, что лучше для вас работает) через полноценный шаблонизатор.

Answer 3

Конечно, вы хотите применить логику, которую JSLinq выполняет на стороне сервера.

Таким образом, на стороне сервера возвращайте только результаты, где Name='Afrika', и упорядочивайте результаты по name.Тогда у вас не будет издержек на фильтрацию JSLinq и упорядочение всех ваших результатов.

Это приведет к.

• Меньше данных, отправляемых по проводам (так как фильтрация выполняется на стороне сервера)
• Заказ не требуется (данные отправляются в правильном порядке)

Answer 4

Вы возвращаете товары, где регион указывает «Африка». Обратите внимание, что написание «Африка» может быть «Африка», и что вы все равно можете получить много предметов, даже когда у вас будет тайм-аут. В базе данных убедитесь, что таблица правильно проиндексирована, чтобы как можно быстрее и где и упорядочить.