bug: vue router slow back page

[KarimQaderi]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x

Current Behavior

In some phones like Huawei or Samsung

When I go to a new page and return to it, it is slow, the hardware and software back button is the same.

as you can see in the video

phone honor 8x WebView 110.0.5481.153

https://user-images.githubusercontent.com/32425175/225617600-56b01d0f-60cb-4b80-aeaa-c9ea86ff4b8b.mp4

Expected Behavior

phone samsung a52s 5g WebView 110.0.5481.153

https://user-images.githubusercontent.com/32425175/225618123-9ec262ed-0796-4704-abc2-9911ffeebebd.mp4

Steps to Reproduce

1. home page
2. go to page 2
3. back home page

Code Reproduction URL

No response

Ionic Info

"@capacitor-community/electron": "^4.1.2", "@capacitor/android": "^4.7.0", "@capacitor/app": "^4.1.1", "@capacitor/clipboard": "^4.1.0", "@capacitor/core": "^4.7.0", "@capacitor/device": "^4.1.0", "@capacitor/haptics": "^4.1.0", "@capacitor/keyboard": "^4.1.1", "@capacitor/status-bar": "^4.1.1", "@ionic/vue": "^6.6.2", "@ionic/vue-router": "^6.6.2", "axios": "^0.27.2", "core-js": "^3.29.1", "pinia": "^2.0.33", "swiper": "^8.4.7", "ua-parser-js": "^1.0.33", "vue": "^3.2.47", "vue-router": "^4.1.6"

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[KarimQaderi]

I have identified the problem. Due to the large number of page elements and repeated loading, some devices may experience slow loading of the page. In the video below, you can see that the pages are loaded multiple times.

https://user-images.githubusercontent.com/32425175/225685793-c9e261f5-9518-44c6-9562-26af1ea01773.mp4

https://github.com/KarimQaderi/ionic-test-router

code check reload https://github.com/KarimQaderi/ionic-test-router/blob/master/src/views/Tab1Page.vue

[liamdebeasi]

I'm not able to reproduce the performance issue reported. Pages are intentionally cached in the DOM to make tab switches fast and to support swipe to go back on iOS. Are you able to reproduce the performance issue in the sample repo?

[KarimQaderi]

I repo https://github.com/KarimQaderi/ionic-test-router I got it again and installed it and it still had a problem

https://user-images.githubusercontent.com/32425175/226010569-3fedb5dc-b4f8-4c98-86b8-bbd6197be1e5.mp4

[liamdebeasi]

As I mentioned in https://github.com/ionic-team/ionic-framework/issues/26975#issuecomment-1474301512, the tab views are cached in the DOM so there may be some re-renders when you switch the active view. You noted in https://github.com/ionic-team/ionic-framework/issues/26975#issue-1627390440 that there is some slowness in your app when using the back button. Can you please provide a reproduction for this?

[KarimQaderi]

https://github.com/ionic-team/ionic-framework/issues/26975#issuecomment-1474301512

It's hard I don't have this problem on my phone (samsung a52s 5g) And not all phones have this problem

Can't create a simple repository

[liamdebeasi]

Unfortunately, we are not able to fix the bug if we cannot reproduce it on our end. Can you do some debugging with Chrome Dev Tools on the affected devices? You could try taking a "Performance" recording to see what is causing the slow down. The "Performance monitor" may help here too.

[KarimQaderi]

simple code: https://github.com/KarimQaderi/ionic-test-router

Phone honor 8x

Profile: honor.json.zip

Video:

https://user-images.githubusercontent.com/32425175/226182766-835d4fd4-59da-4bbd-8ffc-90e98581eee6.mp4

Phone samsung a52s 5g

Profile:

sumsung.json.zip

Video:

https://user-images.githubusercontent.com/32425175/226182834-250046ff-15ce-44f5-8a20-ad406ee59df1.mp4

[liamdebeasi]

Thanks for the videos! Could you try this on Ionic v7 and let me know if the performance is any better? We introduced a fix in that version that should speed up tab switches. v7 update guide: https://ionicframework.com/docs/v7/updating/7-0

[KarimQaderi]

https://github.com/KarimQaderi/ionic-test-router/blob/master/package.json

I upgraded to version 7 but nothing changed (honor 8x)

[liamdebeasi]

Thanks for testing. I tried your app on a Motorola G4 and was able to reproduce the issue. However, I did not see anything that would indicate this is an Ionic bug. The performance issues persisted even after I removed all Ionic Framework code from the application.

For example, I swapped <ion-img> out for <img>, and I removed <ion-icon> from ExploreContainer.vue. I also removed ion-router-outlet in favor of router-view.

I believe the issue here is your app is trying to render too much at once in the tab. Tab 1 renders 50 instances of ExploreContainer. This ExploreContainer component renders dozens of elements with conditional logic through v-if. Asking the browser to render all of this in a single frame is difficult to do, especially on less powerful devices.

Instead, I recommend loading the minimum amount of data necessary and then lazily loading content as the user scrolls. This can be achieved through ion-infinite-scroll.

If the performance issues persist, I recommend trying Virtual Scroll in your app.

[KarimQaderi]

Thanks for the guide

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.