jQuery Ajax вызывает очень медленно в IE, но мгновенно в Firefox - PullRequest
Новая
       12

jQuery Ajax вызывает очень медленно в IE, но мгновенно в Firefox

4 голосов
/ 04 апреля 2009

Я выполняю вызов jQuery .ajax(), который возвращает List<string> IP-адресов в указанной подсети. Я использую [WebMethod] на странице .aspx, чтобы вернуть значения. Встроенный в ASP.NET JSON-сериализатор делает все возможное, чтобы вернуть фактический JSON, использованный в моем Javascript.

Я профилировал время на стороне сервера, и для заполнения и возврата списка требуется около 8 мсек, поэтому код на стороне сервера не является проблемой.

Однако, когда инициируется Ajax-вызов, в Internet Explorer может потребоваться до 3 секунд, чтобы заполнить список с небольшим списком возвращенных IP-адресов. В Firefox список по сути заполняется мгновенно.

Я не совсем уверен, где может быть узкое место. Мое лучшее предположение состоит в том, что ошибка связана с движком JavaScript IE6, но даже в этом случае добавление только 255 элементов списка не должно занимать так много времени.

Может ли кто-нибудь указать мне правильное направление относительно того, почему это происходит?

Пример кода 

$.ajax({
          type: "POST",
          url: $("Example.aspx/GetIPsOnNetwork",
          data: "{NetworkID: " + networkID + "}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(data) {
            $('#ipAddresses').empty();
            // Loop through each IP address and add it to the listbox
            $.each(data.d, function(){
                var ip = this.toString();
                $(document.createElement('option')).attr('value', ip).text(ip).appendTo('#ipAddresses');
            });
          },
          error: function(msg) {
            alert('Error: ' + msg);
          }
        });

Ответы [ 4 ]

4 голосов
/ 04 апреля 2009

Это может быть проблема рендеринга. попробуйте это 

      success: function(data) {
        // Loop through each IP address and add it to the listbox
        var list = $("<select />");
        $.each(data.d, function(){
            var ip = this.toString();
            list.append($('<option />').val(ip).text(ip));
        });
        $('#ipAddress').empty().append(list.find('option'));
      },

По сути, вы загружаете опции в фиктивный список, а затем добавляете содержимое в список ipAddresses.

Другая вещь, которую я изменил, была document.createElement(...). Если вы посмотрите на внутренние элементы $('<option />'), он выполнит createElement для вас.

Наконец, я решаю добавить данные в список вместо вызова option.appendTo('#ipAddress'), что должно было бы каждый раз находить элемент ipAddress.

2 голосов
/ 04 апреля 2009

Создание элементов с использованием рекомендованных методов создания DOM происходит очень медленно по сравнению с нестандартным, но вездесущим свойством .innerHTML. Когда-то мне приходилось обновлять таблицу с примерно 100 строками, и, как вы уже видели, чем старше браузер, тем медленнее работа с использованием создания элементов. Если вы можете, создайте фиктивный элемент SELECT и заполните вручную составную строку HTML ваших элементов OPTION, а затем используйте .innerHTML для вашего фиктивного объекта SELECT. Затем вы можете делать с этим элементом все, что захотите (используя .replaceChild и т. Д.).

Хотя это нестандартный способ создания элементов, .innerHTML останется с нами надолго, и это быстро.

2 голосов
/ 04 апреля 2009

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

В этой строке 

$(document.createElement('option')).attr('value', ip).text(ip).appendTo('#ipAddresses');

Вы можете попробовать 

var optionArray = [];
for (var i= 0; i < this.length; i++)
{
      optionArray[i] = $('<option>').val(ip).text(ip);
}
$('#ipAddresses').empty().append(optionArray.join(""));

или это (data.d - это объект, верно?) 

var optionArray = [];
var i = 0;
$.each(data.d, function(key, value)
{
      optionArray[i++] = $('<option>').val(value).text(value);
});
$('#ipAddresses').empty().append(optionArray.join(""));

Вы можете найти эту статью о приложении jQuery () полезной

1 голос
/ 07 июля 2009

Я обнаружил, что добавление в jquery очень медленное по сравнению с innerHTML в IE7. Firefox и Chrome визуализируются с одинаковой скоростью, используя append или innerHTML. Это может иметь какое-то отношение к тому, что Салариман говорил о методах создания DOM.

...