AngularJs 加载超过 1300 项的视图花费的时间太长

Question

我开发了一个 Node Express Angular (1.2) MariaDb 网络应用程序。

在 html 视图中，我必须加载 1300 多个项目（它涉及一些作者的名言），但整个视图在 6 / 7 秒后加载....太多了。这里 performace waterfall 这里是服务代码：

 AllTesti = function() {
                return $http.get(__env.apiOptions.server +'rapi_testi/')
                .then(function(response) {
                    return response;
                });
            }

这里是api：

getAllTesti:function(callback){ 
        return db.query("select * from all_testi_view",callback);
    }

我插入了一个微调器，但在大约 2 秒后它冻结了，直到所有数据都加载完毕。

我用 PostMan Postman_result 测试了控制器调用的 Restful API 来填充视图，结果是在大约 1 秒内得到（我认为这是一个很好的时间）。 1300 项由以下 "select * from all_testi_view" ....这里查看源代码生成：

create or replace
algorithm = UNDEFINED view `all_testi_view` as (
select
    `all_testi_with_sub_typ`.`TEXT_ID` as `TEXT_ID`,
    `all_testi_with_sub_typ`.`NOME_AUTORE` as `NOME_AUTORE`,
    `all_testi_with_sub_typ`.`TIPOLOGIA` as `TIPOLOGIA`,
    `all_testi_with_sub_typ`.`SUB_TIPOLOGIA` as `SUB_TIPOLOGIA`,
    `all_testi_with_sub_typ`.`TESTO` as `TESTO`,
    `all_testi_with_sub_typ`.`COMMENTO` as `COMMENTO`,
    `all_testi_with_sub_typ`.`DATA_EVENTO` as `DATA_EVENTO`,
    `all_testi_with_sub_typ`.`COUNTER` as `COUNTER`
from
    `all_testi_with_sub_typ`)
union (
select
`all_testi_without_sub_typ`.`TEXT_ID` as `TEXT_ID`,
`all_testi_without_sub_typ`.`NOME_AUTORE` as `NOME_AUTORE`,
`all_testi_without_sub_typ`.`TIPOLOGIA` as `TIPOLOGIA`,
`all_testi_without_sub_typ`.`SUB_TIPOLOGIA` as `SUB_TIPOLOGIA`,
`all_testi_without_sub_typ`.`TESTO` as `TESTO`,
`all_testi_without_sub_typ`.`COMMENTO` as `COMMENTO`,
`all_testi_without_sub_typ`.`DATA_EVENTO` as `DATA_EVENTO`,
`all_testi_without_sub_typ`.`COUNTER` as `COUNTER`
from
`all_testi_without_sub_typ`)

根据我的说法，angularjs 过程有问题。有什么减少加载时间的建议吗？提前致谢

Answer 1

好的伙计们多亏了这个thread 我找到了解决办法。我想和你分享我的实现

在 ng-repeat 中我插入了 "limitTo" 过滤器：

<div ng-repeat="txt in filtered = (vm.datatxts.txts | limitTo:vm.totalDisplayed | filter: textFilter)">

因此，项目的数量限制为 totalDisplayed 值。在我设置的控制器中：

vm.loading = true;
var tobeDisplayed = 50;
vm.totalDisplayed = tobeDisplayed;

在第一个页面加载时只显示 50 个项目：加载过程更快...不到 2 秒！！

此外，我制作了两个按钮 loadMore（加载其他 50 个项目）和 loadRest（加载列表的其余部分）；所以在 html 视图中：

<a ng-click="vm.loadMore()" id="btnLoadMore" class="btn btn-default pull-center" style="margin:5px;">LoadMore</a>
<a ng-click=" vm.loadRest()" id="btnLoadRest" class="btn btn-default pull-center" style="margin:5px;">LoadRest</a>

vm.loadRest = function () {
            //alert("Il numero di messaggi è: " + vm.datatxts.txts.length)   
            vm.loading = true;
            $timeout(function() {
                var tobeDisplayed = vm.datatxts.txts.length - vm.totalDisplayed
                vm.totalDisplayed += tobeDisplayed;  
                vm.loading = false;
            }, 250);
            
        }; 
        vm.loadMore = function () {
            vm.loading = true;
            $timeout(function() {
                vm.totalDisplayed += tobeDisplayed;  
                vm.loading = false;
            }, 250);
        };

当然vm.loading是用来在加载过程中显示spinner ... 祝你发展顺利！

AngularJs 加载超过 1300 项的视图花费的时间太长

AngularJs view takes too long to load more than 1300 items

performance

loading

angularjs

angularjs-ng-repeat