Оптимизация datatables jQuery в IE, 96,7% времени, проведенного в offsetWidth

У меня довольно большая таблица с использованием datatables.net 1.9.4 и jQuery. Я вытягиваю данные асинхронно, а затем устанавливаю aaData и aoColumns в инициализации данных. Хотя он отображается почти мгновенно в Chrome, в IE9 для отображения требуется 6 минут.

Профилятор IE говорит, что 96,7% времени тратится на функцию offsetWidth. Где offsetWidth и когда он называется? Я не могу найти функцию с таким именем.

Вот мои параметры инициализации:

            aaData: data.Values,
            aoColumns: data.Headers,
            bProcessing: true,
            bDeferRender: true,
            bDestroy: true,
            bFilter: false,
            bPaginate: false,
            bSort: false,
            sScrollY: fnCalcDataTableHeight(690),
            sScrollX: "100%",
            bScrollCollapse: true,
            bInfo: false,

У меня также есть только aoColumnDefs.

Спасибо.

Ответ 1

offsetWidth - это значение только для чтения ширины макета элемента, которое включает в себя ширину элемента, горизонтальное заполнение, горизонтальные границы и полосу прокрутки (если есть). JQuery outerwidth() дает то же самое.

Каждый раз, когда вы добавляете/удаляете какой-либо элемент в/из DOM, дерево рендеринга необходимо отрегулировать. Когда вы добавите новый элемент, произойдет перепланирование и перерисовка, чтобы вычислить новый макет документа с вашим новым элементом и перекрасить его в браузере новыми стилями, если таковые имеются.

Современные браузеры пытаются сделать некоторую оптимизацию, поставив в очередь эти изменения и сразу промыв их, пытаясь минимизировать эти дорогостоящие операции. Но когда ваш script запрашивает некоторые значения, такие как offsetWidth, эти оптимизации не могут применяться, поскольку поскольку это значение макета, все изменения макета, ожидающие очереди, должны быть сброшены, а затем окончательное значение возвращается для offsetWidth быть точным. Поэтому мы должны попытаться свести к минимуму его использование. Вот интересный, прочитанный по этой теме. Chrome по-прежнему пытается сделать некоторые оптимизации даже в худшем случае, но не в IE.

Подойдя к вашему вопросу, плагин datatables может использовать его внутри. Вместо попытки и изменения плагина вы можете использовать другой подход.

Используйте DocumentFragment, сгенерируйте все свои строки таблицы сами, добавьте их в таблицу, а затем примените виджет datatables на нем. Если ваши строки и столбцы слишком сложны, попробуйте использовать механизм шаблонов. Выберите здесь

В прошлый раз, когда я столкнулся с этой проблемой, у нас была сложная таблица и количество строк было ограничено до 500 и использовалось разбиение на страницы. Если ваша таблица проста, порог может быть большим, но не большим, учитывая IE:)