Устранение неполадок замедления альпака с большим количеством данных - PullRequest
0 голосов
/ 04 апреля 2019

Моя конфигурация AlpacaJS становится довольно непригодной для большого объема данных для рендеринга. Я успешно использовал Alpaca в течение нескольких месяцев в проекте, но в последнее время сталкиваюсь с проблемами с наборами данных, которые больше, чем я ранее бросил в него.

У меня есть вложенная структура данных - массив объектов, который содержит поля, и другой массив объектов, который содержит больше полей и другой массив, и т. Д. По сути, это дерево, которое спускается примерно на 4 уровня глубиной. Первоначально это работает нормально, но как только я сохранил кучу данных, которые медленно просматриваются, например:

  • Альпака занимает много времени для визуализации

  • прокрутка на странице медленная, и на несколько секунд появляется пустой экран до тех пор, пока не появятся экранные элементы / рендер.

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

  • и т.д.

Я установил скрипку, иллюстрирующую проблему (сама скрипта может долго загружаться!): https://jsfiddle.net/DookTibs/q6u25ec3/7/

        // preloadData/schema defined above in jsfiddle; way too much to post here
        $(document).ready(function() {
            $("#form").alpaca({
                "data": preloadData,
                "schema": schema,
                "options": {
                    "form":{
                        "attributes":{
                            "action":"http://httpbin.org/post",
                            "method":"post"
                        },
                        "buttons":{
                            "submit":{
                                "title": "Send Form Data",
                                "click": function() {
                                    var val = this.getValue();
                                    if (this.isValid(true)) {
                                        alert("Valid value: " + JSON.stringify(val, null, "  "));
                                        this.ajaxSubmit().done(function() {
                                            alert("Posted!");
                                        });
                                    } else {
                                        alert("Invalid value: " + JSON.stringify(val, null, "  "));
                                    }
                                }
                            }
                        }
                    }

            });
        });

в этой Fiddle есть (приблизительное количество) 3 элемента верхнего уровня, каждый с 1-2 элементами второго уровня, 50-100 элементами третьего уровня и 0-3 элементами четвертого уровня ... дает примерно 1500 элементов на страница, включая элементы управления Alpaca для взаимодействия с массивами.

Вещи, которые я заметил / попробовал:

  • Я взял сгенерированный html (который составляет почти 100 000 строк) и выбросил его в отдельный файл. Просмотр этого в браузере не имеет проблем, поэтому я не думаю, что это проблема слишком большого количества полей. (Я понятия не имею, является ли это вообще полезной информацией; в этом случае, очевидно, нет никаких слушателей или логики, связанной с элементами, поэтому неудивительно, что она работает быстрее)

  • Я пробовал это в режиме «только для чтения», передав «view»: «web-display» начальному вызову альпаки. Здесь также существует большая часть проблемы - в частности, задержка прокрутки / всплывающее окно, но, очевидно, не задержка ввода, так как нет ввода! Но это говорит о том, что проблема вызвана не просто переполнением слушателей.

  • На случай, если из-за глубины структуры данных возникли проблемы с памятью, я попытался «сплющить» ее - поэтому вместо того, чтобы вкладывать каждый слой объектов друг в друга, я сделал каждый массив на верхнем уровне и просто добавил поля, которые ссылаются на другие элементы. Не было заметной разницы, я все еще видел те же типы проблем.

Мне интересно, есть ли какие-либо предложения для вещей, которые я могу попробовать, например, с точки зрения настройки Alpaca по-другому? Я могу предположить, что там будет крутая кривая обучения, но я рад немного углубиться в код, поэтому, если есть какие-либо предложения относительно мест в кодовой базе Alpaca, на которые я хотел бы взглянуть, я бы тоже хотел это услышать .

...