Мультиселект jqGrid очень медленный с большими локальными данными и jQueryUI 1.8, jQueryUI 1.7 в порядке

Question

Я использую jqGrid на странице ASP.NET и внедряю данные в блок скриптов на странице, а затем загружаю их оттуда. Для этого одного варианта использования необходимо, чтобы на экране было сразу видно большое количество данных. который включает в себя 300 ~ 500 записей с 30 столбцами в каждой строке. Пейджинг для этого случая не подходит. Пользователь должен иметь возможность сканировать большое количество данных, выбрать 40 ~ 60 строк и затем перейти к другому экрану.

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

Я сузил болевую точку до jQueryUI 1.8. Если я вернусь только к jQueryUI 1.7, этого будет достаточно быстро.

пример jQueryUI 1.7 ~ 17.htm

пример jQueryUI 1.8 ~ 18.htm

примечание: примеры показывают разницу больше всего в FireFox и IE, Chrome выглядит нормально

На обеих страницах используется самая последняя версия jqGrid 3.8 со всеми выбранными параметрами.

загрузка jQuery и jQueryUI из Google CDN

<base href="http://ajax.googleapis.com/" />
<link href="/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" type="text/css"  />
<script src="/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

загрузка jqGrid JS / CSS с моего сервера

<link type="text/css" href="http://mymx.biz/jqGrid/ui.jqgrid.css" />
<script src="http://mymx.biz/jqGrid/grid.locale-en.js" type="text/javascript"></script>
<script src="http://mymx.biz/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>

и мой большой локальный набор данных

<script src="http://mymx.biz/jqGrid/getGridData.js?v=1" type="text/javascript"></script>

пример строки из набора данных

var gridData = [
{id:"1",aa:"aa1",bb:"bb1",cc:"cc1",dd:"dd1",ee:"ee1", ff:"ff1",
  gg:"gg1", hh:"hh1", ii:"ii1", jj:"jj1", kk:"kk1", ll:"ll1", mm:"mm1", nn:"nn1"},
{...}
];

Моя базовая настройка вызовов jqGrid

    $(function () {
      var gridData = getGridData(); // pulls from getGridData.js
      setupGrid(gridData);
    });

    function SelectRow(rowid) {
      // I will be firing AJAX calls here in the future
      console.log("rowid: " + rowid);
    }

    function setupGrid(gridData) {
      $("#testGrid").jqGrid({
        data: gridData,
        height: 'auto',
        rowNum: gridData.length,
        multiselect: true,
        datatype: 'local',
        multiboxonly: false,
        gridview: true, // not sure if this is needed since jqGrid 3.6
        onSelectRow: function (rowid) { SelectRow(rowid); },
        colNames: ['id', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff',
            'gg', 'hh', 'ii', 'jj', 'kk', 'll', 'mm', 'nn'],
        colModel: [
           { name: 'id', width: 40 },
           { name: 'aa', width: 40 },
           { name: 'bb', width: 40 },
           { name: 'cc', width: 40 },
           { name: 'dd', width: 40 },
           { name: 'ee', width: 40 },
           { name: 'ff', width: 40 },
           { name: 'gg', width: 40 },
           { name: 'hh', width: 40 },
           { name: 'ii', width: 40 },
           { name: 'jj', width: 40 },
           { name: 'kk', width: 40 },
           { name: 'll', width: 40 },
           { name: 'mm', width: 40 },
           { name: 'nn', width: 40 }
        ],
       caption: "Test Grid"
      });
    }

Если у кого-то есть понимание, почему сетка такая медленная с jQueryUI 1.8 против jQueryUI 1.7, мы будем очень признательны.

Answer 1

«Приятно» видеть кого-то с такой же проблемой.

Я открыл ваш пример, и щелчок по строкам или флажкам плохо работает с пользовательским интерфейсом 1.8.

Мы (проект php, данные локально хранятся в переменной JSON, обрабатываются локально (сортировка, фильтрация),без подкачки, до 1000 записей одновременно) столкнулись с той же проблемой и пока не нашли решения.Пользовательский интерфейс 1.7 работает хорошо в любом браузере, но с переходом на 1.8 мы заметили некоторые серьезные проблемы с производительностью только с Firefox (3.6, более низкая версия не тестировалась).IE6, наш другой поддерживаемый браузер работает нормально (по крайней мере, на этот раз: -)

Я попытался выяснить корень этой проблемы и использовал firebug для профилирования времени выполнения различных функций, вызываемых после щелчка.Я знаю, что jquery по-разному обрабатывает события для разных браузеров (нормализация), но я не знаю, оказывает ли это какое-либо влияние.

Результат можно найти здесь: profile.png

Может быть, вы увидите что-нибудь заметное в этом списке.

Поскольку мы также не нашли никакого решения для этого, мы понизили UI до 1.7.3 (что связано с другими, но незначительными проблемами).

Кай

edit: Вы сообщали об этой проблеме на форуме jqGrid?Большинство проблем будут, по крайней мере, решены.

edit2: Хорошо, после некоторых дальнейших исследований и некоторых исследований я нашел обходной путь.Как описано здесь (http://www.trirand.com/blog/?page_id=393/bugs/compatibility-bug-with-jquery-ui-1-8-4/), проблему можно (временно) устранить, удалив следующую строку из CSS пользовательского интерфейса:

.ui-widget :active { outline: none; }

Я могу подтвердить, что после удаления этой строки больше не возникает проблем с производительностьюПоскольку это правило не влияет на наш стиль, обходной путь становится для нас исправлением ...: -)

Answer 2

Это общие замечания, которые я сделал в отношении JQGrid и IE> = 7. Я видел примеры страниц, и многие из них не повлияют на вашу конкретную ситуацию.

• IE плохо обрабатывает большой javascript - держите ваш javascript небольшим, и он будет загружать jqgrid быстрее.
• Не передавайте HTML-элементы при загрузке сетки, их построение после загрузки улучшает начальную нагрузку скорость.
• Если вы можете - используйте пейджинг, это улучшит нагрузку скорость и интерактивные состояния.
• Вы можете загружать все данные сетки одновременно, и при этом включать подкачку страниц - не нужно вызывать сервер несколько раз. Это замедлит начальную загрузку, но улучшит скорость подкачки.
• Если можете, добавьте это: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> в заголовок вашего html. Он будет запускать IE 8 в режиме IE 7, который, как я считаю, работает быстрее с JQGrid.
• Распространение событий в jquery, поэтому добавление слушателя события к родителю с дочерними элементами также активирует это событие на дочерних элементах. Помните об этом при взаимодействии с другим объектом DOM. Jquery. Hover предотвращает распространение.
• Это важный момент: в IE 8 зависание медленное и действительно очень медленное!
• Тематический ролик Jquery. В разделе «Состояния взаимодействия» используются: при наведении курсора на теги, а при наведении курсора вставляется фоновое изображение, которое при удалении значительно повышает производительность. Так, например, background: #5d5f69 url(/content/images/ui-bg_flat_75_5d5f69_40x100.png) 50% 50% repeat-x; должно быть background: #5d5f69; Это улучшает интерактивные состояния.

Дайте мне знать, что вы нашли - я все еще ищу способы улучшить скорость моей сетки.