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

希望這些技巧可以幫到你。