AngularJS и большие данные JSON
Для пользовательского приложения AngularJS, которое использует данные из API, который я создавал, я сталкивался с использованием Angular oboe. Oboe - это пакет bower, который помогает передавать большие JSON-файлы в представление. После проб и ошибок мне удалось построить приличный гобой GET метод, который получает около 4000 элементов JSON за 2 секунды. Но моя проблема начинается при добавлении больше GET методы к тому же мнению.
Сначала проблем не было, но со временем время загрузки увеличивается. Итак, я попытался использовать гобой Cached: true конфигурации. К сожалению, это не работает вообще. Каждый раз, когда я загружаю страницу, все данные загружаются снова, а не из browser Cache
В моем примере ниже вы можете увидеть структуру одной из моих функций гобоя, которую я пытался кэшировать. Ссылка JSfiddle добавлена ниже также.
Функция и вид
function createProduct(id, name) {
this.id = id;
this.name = name;
}
$scope.products = [];
oboe({
url: 'config/get/getProducts.php',
method: 'GET',
cached: true
}).path('products.product.*', function () {
// we don't have the person's details yet but we know we
// found someone in the json stream. We can eagerly put
// their div to the page and then fill it with whatever
// other data we find:
}).start(function () {
console.log("start");
}).node('products.product.*', function (products) {
// we just found out their name, lets add it
// to their div:
$scope.products.push({
id: products.id,
name: products.name.language
});
$scope.totalItems = $scope.products.length;
return new createProduct(products.id, products.name);
}).done(function () {
console.log( $scope.products );
});
// Refresh data
$scope.refreshData = function() {
cartService.refreshData()
.then(function(response) {
$scope.cartItems = response.cartItems;
$scope.totalCartItems = response;
$scope.selectedCustomer = response;
})
};<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productimg col-lg-4 col-md-4" ng-repeat="product in products | limitTo : limit : (currentPage - 1) * limit track by product.id"
ng-class="{lastItem: $last}" scroll-bottom="event">
<div class="row">
<div class="col-md-12" ng-bind="product.id"></div>
<div class="col-md-12">
<a ng-bind="product.name" href="{{product.id}}.nl"></a>
</div>
</div>
</div>
<div class="col-lg-12 text-center margin-t-30">
<ul uib-pagination
total-items="totalItems"
ng-model="currentPage"
items-per-page="limit">
</ul>
</div>В JSfiddle Вы можете увидеть код. Я не мог заставить JSON работать над JSfiddle, но видел в нем следующую строку, а затем около 10000 строк "product".
{"products":{"product":[{"id":"1240","id_manufacturer":"0","id_supplier":"0","id_category_default":"2","id_tax_rules_group":"8","quantity":"0","id_shop_default":"1","reference":{},"ean13":"0","price":"0.000000","active":"0","date_add":"2014-07-15 12:06:34","date_upd":"2018-04-21 12:22:37","name":{"language":"zie voorschot factuur 03"}},{"id":"1241","id_manufacturer":"0","id_supplier":"0","id_category_default":"2","id_tax_rules_group":"8","quantity":"0","id_shop_default":"1","reference":{},"ean13":"0","price":"0.000000","active":"0","date_add":"2014-07-15 12:06:41","date_upd":"2018-04-21 12:22:37","name":{"language":"zie voorschot factuur 04"}},{"id":"8908","id_manufacturer":"0","id_supplier":"15","id_category_default":"2","id_tax_rules_group":"8","quantity":"0","id_shop_default":"1","reference":"041002","ean13":"5712084210057","price":"45.454545","active":"1","date_add":"2015-11-12 18:03:47","date_upd":"2017-11-18 09:57:27","name":{"language":"Vaavud Sleipnir smartphone wind meter"}}}}
Таким образом, настоящая борьба, с которой я сталкиваюсь, заключается в том, что получение данных из вкладки сети занимает около десяти секунд. (есть запрос API на "getProducts.php"). Затем обработка этого представления занимает около 30 секунд. (слишком долго) Во-вторых, я хотел бы кэшировать запрос getProducts, чтобы продукты были получены непосредственно при следующей загрузке представления. С нормальным $http.get() а также cache: true, Это сработало, но тогда я все еще сталкиваюсь с медленным связыванием, даже с Гобой.
Если вам нужна дополнительная информация, пожалуйста, дайте мне знать в комментариях ниже.
Как всегда, заранее спасибо!
1 ответ
У нас был такой проект, у которого было слишком много API с тяжелыми объектными данными. Вот некоторые советы, которые мы использовали:
1-массивы вместо объектов
Немного поиска и чтения об этих структурах данных, вы обнаружите, что память, используемая объектами, больше, чем память, используемая массивами. Так что конвертируйте ваш массив объектов в массив массивов на стороне сервера.
2-Используйте еще один уровень кеша
Храните данные в кэше на стороне сервера, что-то вроде MongoDb и Redis. Обработайте запросы с помощью этих шагов:
Проверьте кеш браузера. Если данные доступны и актуальны, используйте эти данные.
Если данные недоступны в браузере, отправьте запрос на сервер. Проверьте серверный кеш. Если данные доступны и актуальны, отправьте эти данные клиенту и сохраните их в кеше, а также используйте их.
Если данные недоступны в кэше сервера, отправьте запрос в API и получите данные, сохраните их в кэше сервера, а затем отправьте обратно клиенту и сохраните в кэше, а также используйте его.
3-Отправлять минимальные данные, необходимые клиенту каждый раз
Клиент не может оставаться на странице и видеть все показанные данные. Подготовьте минимум данных, необходимых для каждой страницы, и, если клиент запросит, принесите остальные.
В вашем случае вместо 10000 продуктов просто подготовьте, например, 1000 из них, а если клиенту потребуется больше, подготовьте больше данных, добавьте их в кэш своего клиента и покажите их.
Если все 10000 продуктов требуются клиентом, подготовьте их в несколько запросов.
Узнайте больше здесь
4-кэш данных в браузере с хорошим модулем и правильным способом для чтения данных снова
Для AngularJ подготовлено несколько модулей. Читайте о них, их стандартах и лучших практиках. Это так важно иметь хороший клиентский кеш.
Надеюсь, что эти советы помогут вам.