AngularJS和大JSON数据
对于使用我一直创建的API中的数据的自定义AngularJS应用程序，我遇到了角双簧管的使用。双簧管是一个帮助将大型JSON文件流到视图的bower包。因此，经过一些尝试和错误之后，我成功地构建了一个像样的双簧管GET方法，它在大约2秒内获得了大约4000个JSON项。但是，当向同一个视图添加更多的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行“产品”行。
{"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"}}}}因此，我面临的真正困难是，从网络选项卡中获取数据大约需要10秒钟。(在“getProducts.php”处有一个API请求)。然后将其解析到视图需要大约30秒的时间。(太长了)。其次，我想缓存getProducts请求，以便在下一次加载视图时直接获得产品。正常的$http.get()和cache: true。它起了作用，但我仍然面临缓慢的捆绑，即使是双簧管。
如果需要更多的信息，请在下面的评论中告诉我。
一如既往，提前谢谢！
回答 1
Stack Overflow用户
发布于 2018-05-18 07:33:16
我们有一个这样的项目，它有太多的API和大量的对象数据。我们使用的一些提示如下：
1-数组而不是对象
通过对这些数据结构进行一些搜索和阅读，您会发现对象占用的内存比数组使用的内存还要多。因此，在服务器端将您的数组对象转换为数组。
2-使用多一个级别的缓存
将数据存储在服务器端缓存中，类似于MongoDb和Redis。使用以下步骤处理请求：
- 检查浏览器缓存。如果数据是可用的和最新的，请使用此数据。
- 如果浏览器中的数据不可用，请将请求发送到服务器。检查服务器端缓存。如果数据是可用的和最新的，将这些数据发送到客户端，并将其存储在缓存中并使用它。
- 如果数据在服务器缓存中不可用，请将请求发送到API并获取数据，将其存储在服务器缓存中，然后将其发送回客户端，并将其存储在缓存中并加以使用。
3-每次客户端所需的最小数据
客户端可能不会停留在页面中并查看所显示的所有数据。准备每个页面和(如果客户端请求)所需的最小数据，并将其他数据带来。
对于您的情况，而不是10,000个产品，只要准备1000，例如，如果客户需要更多，准备更多的数据，附加到您的客户端缓存并显示它。
如果客户需要所有10,000种产品，请在几个请求中做好准备。
阅读更多这里
4-在浏览器中缓存数据，具有良好的模块和正确的方式重新读取数据。
有些模块是为AngularJs准备的。阅读他们，他们的标准和最佳做法。这对于拥有一个好的客户端缓存是非常重要的。
希望这些建议对你有帮助。
https://stackoverflow.com/questions/50325423
复制相似问题
腾讯云开发者
