Как вывести большую таблицу HTML в программе Perl CGI без зависания браузера?

Question

У меня есть эта программа Perl CGI, и я разрешаю пользователю выбирать количество данных для просмотра в этой таблице HTML. Я прохожу foreach ... foreach ... и печатаю каждую строку.

Существует проблема со скриптом Perl CGI, когда он печатает более 3000 строк данных, и мое окно Firefox перестает отвечать на запросы. Я также связываю dataTable jquery.

Какие подходы можно предпринять, чтобы предотвратить зависание окна браузера?

Answer 1

Скорее всего, окно браузера зависает из-за потребления ресурсов браузером при отображении большой таблицы; и не имеет никакого отношения к вашему внутреннему коду Perl CGI.

Самый простой способ подтвердить это - добавить оператор печати журнала (например, print в STDERR) в самый конец скрипта CGI и распечатать метку времени; затем вы запускаете скрипт и просматриваете журналы вашего веб-сервера, чтобы увидеть, когда скрипт завершится. Почти наверняка вы обнаружите, что все закончилось очень быстро.

Еще один (хотя и менее надежный) показатель того, что узким местом является браузер, отслеживает израсходованную память и ЦП в вашей любимой программе управления процессами в вашей ОС (TaskManager / ProcessExplorer / ps / top)

Теперь, что касается проблем с отображением браузера, Вриккен дал несколько хороших предложений. Если вы можете избежать сложной обработки событий (включая jQuery) на очень больших таблицах, это хорошая идея; по возможности используйте классы вместо идентификаторов.

Некоторые другие будут:

• Использовать предопределенную ширину в пикселях для всех столбцов (и в идеале все строки для сделки). Браузеры работают намного быстрее при рендеринге таблицы, когда им не нужно вычислять это на лету для каждой строки.

• Рассмотрите возможность переключения на таблицу на основе DIV вместо TABLE. Честно говоря, я не знаю, поможет ли это в скорости или нет - это будет хороший вопрос SO или лучше, попробуйте и сравните. Это может быть не философски чистое решение для представления табличных данных.

• Как сказал Вриккен, пагинат. Ни один пользователь не может эффективно обработать таблицу из 3000 строк, даже если она печатает ослепительно быстро, поэтому на самом деле рисовать ее довольно бесполезно, если только она не может быть отфильтрована / спрятана под реальными электронными таблицами.

---

Есть небольшая другая возможность - часть задержки, ЕСЛИ таблица очень большая, насколько чистый объем HTML-текста, который производится; и ЕСЛИ подключение к сети не быстрое - возможно, из-за необходимости загружать это.

Если это так, то ОЧЕНЬ легко проверить: заключите всю таблицу в тег комментария (<!-- <TABLE> ... </TABLE> -->, если в вашей таблице нет тегов комментариев). Напечатайте небольшой текст вместо этого. после закрытия тега комментария.

Затем перезапустите страницу.

Если небольшой текст отображается в вашем браузере очень быстро, это означает, что загрузка таблицы НЕ была виновником (а также еще одним подтверждением того, что CGI-скрипт не является узким местом); поскольку вы будете генерировать и загружать один и тот же файл больших таблиц, но не будете отображать реальную таблицу в браузере.

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

Answer 2

Очевидно, что разбиение на страницы является лучшим решением здесь. Но для решения такого рода проблем можно сделать ряд вещей:

• Проверьте, включено ли сжатие на вашем веб-сервере. Большинство современных браузеров (IE и FF) отправляют заголовки в режиме дефлирования, поэтому, если на веб-сервере включено сжатие, вы получите сильно сжатый ответ. Для моего случая ответ 1 Мб был до 87 Кб.

• Вы можете установить firebug еще не выполненного и отслеживать все детали вашего скрипта, например, сколько времени было потрачено на генерацию ответа, сколько времени заняло загрузка ответа, сколько времени заняло рендринг и клиент скрипты. То же самое доступно в «вкладке Net».

• Я протестировал, и таблицы на основе DIV здесь не являются решением. Используйте Div только для разметки и таблиц для представлений и т. Д. Иногда мы используем разметку таблицы на основе Div, так как в IE она может отображаться сразу после получения вместо отображаемых таблиц принимается только закрывающий табличный тег (это поведение по умолчанию по сравнению с FF, где используется прогрессивная визуализация)

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

• Если вы просто хотите отобразить простую таблицу без особых сложностей, используйте perl printf, чтобы передать данные клиенту (браузеру), которые уже отформатированы в виде таблицы, и отобразить их под тегом PRE. Я показываю, где 4800 строк с 9 столбцами и браузер остаются отзывчивыми.

• Здесь я отправляю данные порциями по 500 строк, чтобы ответ начинался как можно скорее, и он казался плавным.

Answer 3

Возможные ответы (в порядке личных предпочтений):

1. разбиение на страницы результатов
2. без использования событий jQuery на такой большой таблице (или очень экономно)
3. создать лучший браузер.