在 angular js 中处理更大的数据

Question

我正在从角度服务调用一些预定义的数据。 由于它是巨大的数据（4 MB），在后端（Java）代码中，他们在服务器启动时获取这些数据并将其存储在会话中。 我的问题是当我从任何休息客户端调用该服务时，它需要 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 是很多信息，即使您直接显示它，您也会在角度性能方面遇到一些问题（特别是如果您使用 ng-repeater 指令）。 所以你需要想一个解决方案来避免同时请求整个数据，并且有不同的解决方案。

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

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

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

Answer 2

我还不能发表评论（需要一个更多的声誉），所以我会在这里问对不起。

你也在渲染数据吗？ 您是否在没有渲染的情况下对其进行了测试，只是将调试器放入 then(..) 以查看它何时获取数据？