0

I developed a Node Express Angular (1.2) MariaDb web app.

In a html view I have to load more than 1300 items (it deals famous quotations of some authors) but the whole view is loaded after 6 / 7 sec .... there's too much. Here performace waterfall Here the service code:

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

Here the api: 

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

I inserted a spinner but after about 2 sec it freezes until all data are loaded.

I test with PostMan Postman_result the Restful API invoked by controller to populate the view and the result is get in about 1 sec (I think a good time). The 1300 items are generated by the following "select * from all_testi_view" ....here the view source code :

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`)

According to me there is something wrong in the angularjs process. Any suggestions to reduce loading time? thnks in advance

visineri
  • 1
  • 2
  • What SQL statement(s) does that tool use? – Rick James Jun 05 '20 at 22:33
  • @RickJames the statement is just a select from a view: getAllTesti:function(callback){ return db.query("select * from all_testi_view",callback); } - This function is called by an angular service: AllTesti = function() { return $http.get(__env.apiOptions.server +'rapi_testi/') .then(function(response) { return response; }); } – visineri Jun 06 '20 at 07:52
  • "Load" -- as in `INSERT`? `INSERT...SELECT`? `LOAD TABLE INFILE...`? Some thing else? Please provide `SHOW CREATE TABLE` for each table used. – Rick James Jun 06 '20 at 15:04
  • @RickJames "Load" means "select * from all_testi_view" .. may I send you the source code view, sorry I'm beginner of stackoverflow ? But, to be honest, I think that performance problem is in angularjs ...maybe I was wrong the focus of question.. – visineri Jun 06 '20 at 16:21
  • Take the stackoverflow tutorial; it will tell you how to write a useful Question. I am coming from MySQL -- If I can see the inefficiency in MySQL, then I can point the finger at at something specific in Angularjs. Selecting 1300 doesn't take 6 seconds; was it 1 SELECT or 1300? – Rick James Jun 06 '20 at 17:41
  • @RickJames I hope I’ve been clearer ... I edit again my question and I added the specific code...thnks in advance – visineri Jun 06 '20 at 20:16
  • Thanks. That is better. (Meanwhile, I can't help anymore; I know nothing about angularjs.) – Rick James Jun 06 '20 at 22:15

1 Answers1

0

Ok guys Thanks to this thread I found a solution. I want to share with you my implementation

In ng-repeat I inserted "limitTo" filter:

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

So that, the number of items is limited to totalDisplayed value. In the controller I set:

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

At first page loading only 50 items are showed: the loading process is faster ...less than 2 sec !!

Moreover, I made two button loadMore (to load other 50 items) and loadRest (to load the rest of the list); so in the html view:

<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);
        };

Of course vm.loading is used to show spinner during loading process ... Have a nice developing !

visineri
  • 1
  • 2