Можно ли ускорить асинхронную загрузку этой страницы?

Question

Я загружаю результат поиска в таблицу с JQuery ниже:

$("#searchForm").submit(function (event) {
    event.preventDefault();
    $.post($(this).attr('action'), $(this).serialize(),
    function (data) {
        if ($("#addResult").is(':checked')) {
            $("#myTable tbody").append(data);
        } else {
            $("#myTable tbody").html(data);
        }
        $("#myTable").trigger("update");
    });
});  

Данные, которые я возвращаю, представляют собой различное количество строк: <tr></tr>...<tr></tr>.

Firefox, конечно, намного быстрее, чем IE.Если я загружаю <1k строк, это довольно быстро в обоих браузерах.Но когда я возвращаю ~ 9k строк, IE зависает примерно на 5 секунд, прежде чем представить данные.Также очень медленно прокручивать все строки в IE.Я не использую пейджинг, но я хочу знать, есть ли способ обойти это, прежде чем начать пейджинг результатов? </p>

Я также получаю сообщение об ошибке в IE, когда я нажимаю на любую ссылку, чтобы отойти от страницы поискао медленно работающем скрипте.Но почему я получаю это, когда ухожу со страницы?У меня нет сценариев, которые должны запускаться в этот момент?Или IE делает что-то негласное при просмотре большого результата поиска?

Answer 1

Вставка такого количества элементов будет непростой задачей для браузеров. Возможно, вам следует изменить свой подход. Может быть, вы могли бы разбить на несколько пунктов, что обеспечивает удобство использования и производительность. Скажи 1000? Тогда вы вставляете только 1000 за раз.

DOM - медленное существо. Лучше не совать его такой большой палкой, если вы можете избежать этого.

Answer 2

jquery .append () и .html () - чрезвычайно медленно, в целом в таблицах.

вы можете использовать чистый javascript object.innerHTML = ... вместо этого или, по крайней мерепопробуйте это в comapre.

$("#searchForm").submit(function (event) {
    event.preventDefault();
    $.post($(this).attr('action'), $(this).serialize(),
    function (data) {
        var elm = $("#myTable tbody").get(0);
        if ($("#addResult").is(':checked')) {
            elm.innerHTML += data;
        } else {
            elm.innerHTML = data;           
        }
        $("#myTable").trigger("update");
    });
});

вот что я использую в производстве:

url = "yata.php";
    $('#waitMessage').show();
    console.log('start');
    console.time('load');
    $.get(url, function(data) {
        console.timeEnd('load');
        // 11 seconds to load all rows (14.8 megs)

        console.time('append');
        $('tbody').append(data);
        console.timeEnd('append');
        // 7 seconds

        /*
        console.time('appendChild');
        bod = $('tbody').get(0);
        bod.innerHTML += data;
        console.timeEnd('appendChild');
        */
        // 9 secondes

        $('#waitMessage').hide();

    });

herrr, ну, кажется, все изменилось ^^ '

Answer 3

Похоже, вы получаете данные HTML. Если бы вы могли заставить сервер возвращать объект JSON вместо HTML, вы могли бы сэкономить на пропускной способности. JSON намного меньше, чем XML или HTML. Смотри также http://www.json.org/xml.html.

Таблицы могут быть созданы с использованием Javascript на клиенте (в браузере).