AngularJS和大JSON数据

Question

对于使用我一直在创建的API的数据的自定义AngularJS应用程序，我遇到了使用Angular双簧管的问题 。 Oboe是一个bower包，可帮助将大型JSON文件流式传输到视图中。 经过一些试验和错误后，我设法建立了一个体面的双簧管GET方法，在大约2秒内获得大约4000个JSON项目。 但是当我向同一个视图添加更多GET方法时，我的问题就出现了。

起初没有任何问题，但最终，加载时间越来越大。 所以我尝试使用Oboe 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中你可以看到代码。 我无法在JSfiddle上使用JSON，但是将其视为以下行，然后是大约10000个“产品”行。

{"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"}}}}

因此，我面临的真正困难是从网络选项卡获取数据大约需要十秒钟。 （“getProducts.php”中有一个API请求）。 然后将其解析为视图大约需要30秒。 （太长了）。 其次，我想缓存getProducts请求，以便下次加载视图时直接获取产品。 使用普通的$http.get()和cache: true 。 虽然有效，但我仍然面临缓慢的约束，即使是双簧管。

如果需要更多信息，请在下面的评论中告诉我。

一如既往，提前谢谢！

Answer 1

我们有一个像这样的项目，它有太多的API和繁重的对象数据。 我们使用的一些提示是：

1阵列而不是对象

通过对这些数据结构的一些搜索和读取，您会发现对象消耗的内存大于Arrays使用的内存。 因此，将对象数组转换为服务器端的数组数组。

2 - 使用一个更多级别的缓存

将数据存储在服务器端缓存中，例如MongoDb和Redis。 使用以下步骤处理请求：

1. 检查浏览器缓存。 如果数据可用且是最新的，请使用此数据。

2. 如果浏览器中没有数据，请向服务器发送请求。 检查服务器端缓存。 如果数据可用且是最新的，请将此数据发送到客户端并将其存储在缓存中并使用它。

3. 如果数据在服务器缓存中不可用，请向API发送请求并获取数据，将其存储在服务器缓存中，然后将其发送回客户端并将其存储在缓存中并使用它。

3 - 每次发送客户所需的最低数据

客户端可能不会停留在页面中并查看显示的所有数据。 准备每个页面所需的最少数据， 如果客户要求，请带上其他页面。

对于您的情况，而不是10,000个产品，只需准备1000个产品，如果客户需要更多，准备更多数据，附加到您的客户端缓存并显示它。

如果客户需要所有10,000种产品，请在多个请求中准备它们。

在这里阅读更多

浏览器中的4-Cache数据具有良好的模块和正确的再次读取数据的方式

为AngularJs准备了一些模块。 阅读它们，它们的标准和最佳实践。 这对于拥有良好的客户端缓存非常重要。

ngStorage

希望这些技巧可以帮到你。