Які технології доступні для інтерактивної сітки даних на стороні клієнта, як користувальницькі інтерфейси користувача?

В даний час я працюю над проектом, для якого ми створили дуже інтерактивний контроль сітків даних, використовуючи HTML, CSS та JavaScript (звичні та jQuery). Все це, здається, добре для машин високого класу, але наш клієнт скаржиться, що веб-переглядачі забирають дуже багато часу для надання отриманих даних.

Ми помітили, що зазвичай завантаження сторінки відбувається через 1-2 секунди практично у всіх основних поточних браузерах, що працюють на сервері win2k3, з 3 Gig RAM та одним 3 ГГц процесором, але наш клієнт має розрахунки, що тривають до 25 секунд.

Мої питання полягають в основному в тому, які варіанти доступні, якщо ми хочемо використовувати деякі інші технології для прискорення відображення сторінок з такими інтерактивними сітки даних, де користувач може динамічно вибирати доступні стовпці в таблиці даних і може передавати події на стороні клієнта (javascript дзвінки) на інший вміст спалаху на тій же сторінці. Заздалегідь спасибі.

1
Чи повільно це через надто багато даних (повільне з'єднання) або забагато логіки (повільний комп'ютер)?
додано Автор SLaks, джерело
Ви можете оптимізувати свій Javascript і зробити його трохи швидше. Наприклад, ви дуже часто аналізуєте цей комплексний селектор.
додано Автор SLaks, джерело
@SLaks відтворює отримані дані , тому я припускаю b.
додано Автор Andrew, джерело
@SLaks так, здається, це логіка JavaScript. Найчастіше для циклу, який приховує кілька стовпців за допомогою селектора jQuery для атрибута, тобто для (c в стовпцях) {var selectorClass = "selector_" + columns [c]; $ ("[colClass = 'class_header_" + стовпці [c] + "") "). hide (); $ ("[colClass = 'class_data_" + columns [c] + "") "). hide (); } Дайте мені знати, якщо така річ можливо за допомогою будь-якої іншої більш швидкої технології, ніж JavaScript, без використання інших сторонніх плагінів для браузерів.
додано Автор SalmanQ, джерело

2 Відповіді

Для цього я використовую DataTables , але я повинен визнати, що більша частина переваг роботи полягає в делегуванні важких завдань (сортування, фільтрація ) до серверної сторони, яка має базу даних MySQL для обробки даних. Клієнтська сторона отримує лише X записів (200 або менше) одночасно, що є тривіальною сумою для більшості машин для обробки.

Все, що потрібно сказати, я не знаю, яка її продуктивність, як і тисячі записів на сторінці, але на основі повідомлень форуму на своєму сайті, схоже, що вони обробляють щонайменше сотні записів без миготіння.

Які, на мою думку, виникає ще одне питання: чи є у вас повний набір даних на стороні клієнта та виконує сорти/фільтри на ньому в клієнті? З або без DataTables, ви, мабуть, захочете, щоб сервер виконував важкий підйом. Завдяки існуючому плагіну або власному користувальницькому коду, полегшить використання Ajax та формат обміну даними (JSON - очевидний вибір).

Not ready for primetime yet, but worth keeping an eye on jQuery UI Grid. Recent blog post from the team: http://blog.jqueryui.com/2011/10/state-of-the-jquery-ui-grid/

1
додано
Це невелика кількість даних! Я навіть не міг навіть здогадатися про те, що може бути (якщо такі є), але 25 секунд обробки мене шокує, навіть на старій машині. Успішне тестування інших варіантів; може бути, jqGrid з DataTables надасть те, що вам потрібно!
додано Автор Greg Pettit, джерело
@SalmanQ, спробуйте використовувати нативний CSS, щоб показати/сховати невідповідні записи (наприклад, додаючи css-клас), це повинно значно прискорити процес. Також спробуйте синхронізувати процес показу/приховування з animationFrame браузера (наприклад, використовуючи requestAnimationFrame або sth similar).
додано Автор Nikos M., джерело
Дякую за вашу відповідь Грег. По суті, ці динамічні датагриди показують (і повинні показати) лише кілька рядків 5-12 з 40-45 стовпцями. Всі стовпці завантажуються в таблицю на сервері, а потім за допомогою JavaScript ми ховаємо більшість з них на стороні клієнта і показуємо лише деякі з найбільш релевантних. Ця прихована активність, здається, займає більшу частину часу під час рендеринга на повільних машинах.
додано Автор SalmanQ, джерело

jqGrid is my goto for this. The developer has spent a lot of time optimizing it for huge datasets.

1
додано