AngularJS 和大 JSON 数据

Question

对于使用来自 API 我一直在创建的数据的自定义 AngularJS 应用程序，我遇到了 Angular oboe 的使用。 Oboe 是一个 bower 包，有助于将大型 JSON 文件流式传输到视图。因此，经过反复试验，我设法构建了一个不错的双簧管 GET 方法，该方法在大约 2 秒内获得了大约 4000 JSON 项。但是当向同一视图添加更多 GET 方法时，我的问题就开始了。

起初没有任何问题，但最终加载时间越来越长。所以我尝试使用双簧管 Cached: true 配置。可悲的是它根本不起作用。每次我加载页面时，所有数据都会再次加载，而不是从 browser Cache

中获取

在下面的示例中，您可以看到我一直试图缓存的其中一个双簧管函数的结构。下面还添加了一个 JSfiddle link。

函数和视图

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

所以我面临的真正困难是从网络选项卡获取数据大约需要十秒钟。（在 "getProducts.php" 处有一个 API 请求）。然后将其解析到视图花费大约 30 秒。（太长了）。其次，我想缓存getProducts请求，以便下次加载视图时直接获取产品。使用正常的 $http.get() 和 cache: true。它奏效了，但我仍然面临装订缓慢的问题，即使是使用双簧管也是如此。

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

一如既往，提前致谢！

Answer 1

我们有一个这样的项目，其中有太多 API 重对象数据。我们使用的一些技巧是：

1-数组而不是对象

通过稍微搜索和阅读这些数据结构，您会发现对象消耗的内存比数组使用的内存多。因此，将您的对象数组转换为服务器端的数组数组。

2-多使用一级缓存

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

检查浏览器缓存。如果数据可用且是最新的，请使用此数据。
如果数据在浏览器中不可用，请向服务器发送请求。检查服务器端缓存。如果数据可用且是最新的，则将此数据发送到客户端并将其存储在缓存中并使用它。
如果服务器缓存中没有数据，发送请求到API并获取数据，将其存储在服务器缓存中，然后将其发送回客户端并将其存储在缓存中，也用它。

3-客户端每次发送最少需要的数据

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

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

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

4-在具有良好模块的浏览器中以正确的方式缓存数据以便再次读取数据

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

ngStorage

希望这些提示对您有所帮助。

AngularJS 和大 JSON 数据

AngularJS and big JSON data

html

javascript

json

angularjs

oboe.js