Моя конфигурация 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, на которые я хотел бы взглянуть, я бы тоже хотел это услышать .