Создайте объект javascript без замораживания

Question

В настоящее время я разрабатываю панель администратора для добавления и удаления вершин из графика. У меня есть три больших «сетевых» -графа с примерно 500 узлами, которые я загружаю и строю без проблем. Теперь только один графически показан в HTML5. Создание всех объектов HTML5 для графика занимает довольно много времени (около 5 секунд или что-то еще). Графики могут расти в будущем, и это время может увеличиться. При построении графического пользовательского интерфейса веб-сайт не реагирует, и я пытаюсь решить эту проблему. Я использовал 'setTimeout', но не с ожидаемыми результатами.

Мне было интересно, можно ли создать javascript-объект во внешнем файле, который затем можно вызвать с помощью ajax? Обратите внимание, что мой объект для сборки - это функция javascript и HTML5!

спасибо.

Answer 1

Вы можете запустить процессорный код на сервере с помощью nodejs и вернуть только результат JSON с помощью простого вызова ajax.

Без какого-либо кода трудно дать более подробную информацию о том, как вы это реализуете. Но если объект уже строится в JS, его не должно быть сложно разгрузить на узел.

Может быть, посмотреть на этот ответ для того, как создать простой ответ сервера с узлом: Basic Ajax send/receive with node.js

Answer 2

Мои предположения по этому вопросу такова: 1) Вы получаете данные без каких-либо проблем 2) Это рендеринг в HTML, вызывающий замедление.

DOM - не самая отзывчивая вещь в мире. Это звучит странно, но на самом деле довольно быстро построить огромную строку HTML, а затем установить это в один конец с вызовом div.innerHTML или $ ('# graph'). Html().

Причина в том, что после того, как строка построена, сложная обработка строк и операции DOM происходят в браузере, который написан на высоко оптимизированном C или C++, а не на javascript-движке.

Другой вариант - разделить рендеринг на разделы и попытаться «уступить» другим событиям, используя setTimeout.

С помощью этого вы можете выполнить итерацию по 500 узлам 50 за раз и вызвать setTimeout (next, 0), чтобы продолжить следующие 50 узлов. Это позволит обрабатывать другие события, прежде чем делать слишком много работы.

Одним из побочных эффектов может быть то, что график показан поэтапно, так как setTimeout позволит DOM отображать эту часть перед продолжением.