javascript - 在angularjs中处理大数据

Question

我正在从 Angular 服务中调用一些预定义的数据。由于它是巨大的数据(4 MB)，在后端(Java)代码中，他们在服务器启动时获取这些数据并将其存储在 session 中。我的问题是当我从任何休息客户端调用该服务时需要 5 秒。但是当我从 UI 调用它时需要 50 到 60 秒。

当我查看“网络”选项卡时，状态仅显示为待处理，但我看到了响应。

这个问题不会出现在本地。仅当我们在服务器中部署时出现此问题。

我在这里做错了什么。如何在从 angular js 调用时处理如此庞大的数据。

我正在调用服务。

使用表中的数据..

我一次获取所有下拉列表数据而不是多次调用

              <tr ng-repeat="list in teamsFilterData" >
                <td ng-show="odsObj.teamsFilterData.supportedAttributesList[$index].filter">{{odsObj.teamsFilterData.supportedAttributesList[$index].filter}}</td>
                <td ng-show="odsObj.teamsFilterData.supportedAttributesList[$index].filter">:</td>                      
                <td ng-show="teamsFilterData.supportedAttributesList[$index].filter">
                    <div class="dropdown">
                                <button class="btn btn-default dropdown-toggle supported-products-default" type="button" data-toggle="dropdown" aria-expanded="true">
                                    Select {{teamsFilterData[$index].filter.split('Supported')[1]}}<span class="caret caret-postion"></span>
                                </button>
                                <ul class="dropdown-menu supported-products-default" role="menu">
                                    <div class="input-group col-md-12">
                                                                                                                                        <span class=" glyphicon glyphicon-search"></span>
                                                </button>
                                            </span>
                                    </div>
                                    <li  style="margin-left: 10px;" ng-repeat="product in odsObj.teamsFilterData[odsObj.teamsFilterData.supportedAttributesList[$index].name] | filter:searchText | limitTo:10" >
                                    <input ng-attr-name="{{product.id}}" type="checkbox" ng-checked="product.added" >
                                    <label>{{product.filter}}</label>
                                    </li>
                                    </li>
                                </ul>
                    </div>
                </td>
              </tr>

Answer 1

由于 4Mbs 是很多信息，即使您直接显示它，您也会遇到一些 Angular 性能问题(尤其是如果您使用 ng-repeater 指令)。所以你需要考虑一个解决方案来避免同时请求整个数据，并且有不同的解决方案。

首先，你需要思考这个问题。您需要所有数据吗？通常答案是否定的，所以在这种情况下，您应该采用以下解决方案之一:

1. 在服务器端使用分页，因此您只需要用户正在查看的那部分数据。
2. 另一方面，关于您的应用程序设计，您可以使用无限滚动，它或多或少与分页相同，但使用滚动。这是我通常使用的组件:https://sroze.github.io/ngInfiniteScroll/

即使您需要所有数据，实现缓存 服务并且只请求一次数据也是个好主意。将数据存储在浏览器本地存储中(我使用的组件 https://github.com/pamelafox/lscache )，但要注意最大大小(在大多数浏览器中约为 5Mbs)。