History back is pretty slow sometimes

1

When I go back in history by tapping on the back button in the top left corner the app reacts immediately.
When I use the Android back button, which performs a

app.router.back()

the app is sometimes slower and takes sometimes a second and more, even on the same page.

Is there any way to speed this up?

1 Like
2

Hi DEV,

What is slow? the effect? the process? the execution?

3

I would say it’s the time until the animation of the closing page starts.

1 Like
4

try disable animation

5

Do you have more code in backbutton handler that can cause this?

Also, probably not related but

app.router.back()

must be

app.views.main.router.back()
6

No, this is the only code in the handler.

I just found out that the delay seems to become longer, the more the page is scrolled down.

Let’s say I have a list of 30 items. When I push on the back button at the top of the page, it closes much faster than when I am at the bottom of the page

1 Like
7

And if you do it with usual <a class=“link back”> do you see such regression?

1 Like
8

I checked that for a few pages and even on the very long pages the normal <a class=“link back”> button works very fast.

9

I did some more measurements and the animations seem to be the reason. As soon as I disable them everything is very fast on any page. Are there any ways to speed up the animations?

Edit: No, and there it is back again… so the animation can not be the reason.

10

Which one is faster, whats the default you compare ? IOS ? or the browser ?

11

To be honest I can’t imagine what is happening because usual back link calls same router.back() method. Maybe the issue on Cordova side and it produces the delay of backbutton event? Try to put in backbutton event handler something different instead of router.back, for example, try to call alert there app.dialog.alert and see will it still have that delay?

12

What happens to the events of the closing page? Will they be destroyed automatically?

Logging only the backbutton event seems to be pretty fast as well. It starts slowing down as soon as I use the router.back() call.

13

If you assingned them manually, for example like $(...).on(...) then they won’t be destroyed automatically

14

Good to know, maybe this is somehow related as there are a lot of manually assigned events on these pages. Is there any F7 way to remove all events on a page?

$$('.page').find("*").off();

is throwing an error:

Uncaught TypeError: Cannot read property 'split' of undefined
at Dom7.off (framework7.min.js:12)
15

I have a similiar problem. There is no issue when I move forward through pages. But the problem comes up when I move back through some pages. I attached a screenshot about page async event. There is a timetable that shows async event’s start and end times. Please attention rayon page’s load and back load times. When I click the back button, I wait 4 seconds to see the rayon page.

Here is rayon page’s async event codes:

{
    name: 'rayon',
    path: '/rayon/:mid/',
    async: function (routeTo, routeFrom, resolve, reject) {
        if (!isConnectToInternet()) return;
        var router = this;
        var app = router.app;
        var marketid = routeTo.params.mid;
        var apptoken = user.getAppToken();
        var mobiletoken = user.getMobileToken();
        app.preloader.show();
        console.log("rayon async started at: "+Date());
        app.request({
            url:'http://www.blabla.com/services_v2/init/'+apptoken+'/'+marketid,
            data:{mobiletoken:mobiletoken},
            method:'POST',
            dataType:'json',
            success: function (data, status, xhr){
                app.preloader.hide();
                console.log("rayon async stoped at: "+Date());
                if (data.result=="1"){
                    initializeScreen(data.resultDataOrderCount);            
                    resolve(
                        { componentUrl: './pages/rayon.html' },
                        { context: {data: data} }
                    );
                }
                else
                    ToastMessage(data.resultMessage);
            },
            error: function (xhr, status){
                app.preloader.hide();
                var error_message=status;
                if (statusErrorMap.hasOwnProperty(status)) error_message=statusErrorMap[status];
                ToastMessage(error_message);
            }
        });      
    }

Ads%C4%B1z2
Adsız2.png790×177 17.2 KB

16

Issue apparently in XHR request, check in Network tab, how long takes this request in this case?

17

Here is the related page statistics in network tab. This page includes xhr object that load data via php file. What should I learn from these results? How can I find the thing that causes slowdown?

Ads%C4%B1z3

1 Like
18

It means your server takes a lot of time to respond to request ~ 4.32s, so you need to optimize on server side. Not related to Framework7

1 Like