ionic-framework: bug: `ion-tabs` routing between tabs is slow

Prerequisites

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

Ionic Framework Version

v4.x
v5.x
v6.x

Current Behavior

Switching between tabs is slow (500ms+) when using my app on my iOS device. This results in a laggy feel which is not desired. It works great on my desktop in both Safari and Chrome.

I have just started with this app so there isn’t a lot going on in the tabs. How can I debug this further to see why it’s taking so long?

Timeline

Expected Behavior

It should feel more snappy.

Steps to Reproduce

Switch between tabs.

Code Reproduction URL

https://github.com/Livijn/lag-tester

Ionic Info

Ionic:

   Ionic CLI       : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.0.0-rc.3

Capacitor:

   Capacitor CLI      : 3.3.2
   @capacitor/android : not installed
   @capacitor/core    : 3.3.2
   @capacitor/ios     : 3.3.2

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run                             : 1.5.0

System:

   NodeJS : v16.1.0 (/usr/local/Cellar/node/16.1.0/bin/node)
   npm    : 7.11.2
   OS     : macOS Monterey

Additional Information

No response

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 18 (7 by maintainers)

Commits related to this issue

perf(many): reduce delay when performing overlay or page transitions (#26189) resolves #24346 — committed to ionic-team/ionic-framework by liamdebeasi 2 years ago

Most upvoted comments

@sean-perkins @Livijn I wanted to chip in here that I an in the process of producing a repo to identify the same issue.

What I have tested is switching routes with a setInterval to remove any possible touch/input delay. Doing so demonstrates that Ionic is capable of rendering the tabbed pages extremely quickly. On an iPhone XR I can toggle between each tab in a few milliseconds.

Changing routes via a tap on the tabs adds a considerable delay. I have also demonstrated the delay is reduced when the change is triggered via an IonButton within the tab content.

On my Android device i can toggle between tabs nearly instantly and alternate between each tab without delay. On an iPhone XR with considerably better JS performance it’s not possible to replicate the same tab switching performance.

Note: My experience relates to Ionic React

hellokingdom on Dec 9, 2021

@Livijn thanks for the added context. Instagram definitely has a more responsive feel with the tab changes.

This issue may relate to another issue (#24337 discussion) I’m currently exploring where the Vue Router implementation for tabs is unmounting the tab when you navigate between tabs, when it shouldn’t.

Regardless, I agree the time/interaction between tab transitions should be just as snappy as Instagram feels.

sean-perkins on Dec 8, 2021

Thanks, @liamdebeasi ! Indeed removing the parts of code you mentioned makes tabs navigation faster.

For those who need it right now, you can use these forks https://www.npmjs.com/package/ionic-lpn-vue https://www.npmjs.com/package/ionic-lpn-vue-router

tarasmelnychuk on Mar 3, 2022

Hi everyone,

I dug into this a bit more and have identified some code that could be causing this:

Unnecessary RAFs

This code was added as a workaround for a quirk in the v5 version of Ionic with lazy loaded components. It resulted in Ionic Vue waiting several milliseconds before proceeding with the transition. v6 does not use lazy loaded components, so this is not needed.

Unnecessary waits

This code was added in the early days of Ionic v4 to work around a quirk in Ionic with lazy loaded components, similar to the workaround above. It causes Ionic to wait for every Ionic component to be ready before proceeding with a transition. This was done even when switching to tabs that have already been initialized, causing more work to be done. v6 does not use lazy loaded components, so this is not needed.

I did a (very unscientific) test of befored an after results on my iPhone 11. This is the process I followed:

Load on Tab 1.
Tap the Tab 2 button. Make note of the time difference between ionViewWillEnter and ionViewDidEnter.
Tap the Tab 3 button.
Tap the Tab 2 button. Make note of the time difference between ionViewWillEnter and ionViewDidEnter.

Pre-Optimization

Test Run	Initial Load (ms)	Subsequent Navigation (ms)
1	101	98
2	93	73
3	81	61
4	106	64
5	108	54
Avg	97.8	70

Post-Optimization

Test Run	Initial Load (ms)	Subsequent Navigation (ms)
1	25	14
2	30	13
3	21	16
4	23	16
5	18	17
Avg	23.4	15.2

There is a significant reduction in processing time post-optimization. Note that I only measured the amount of work that Ionic is doing. There is still processing that Vue and Vue Router are both doing.

Given that these changes impact transitions, a big piece of Ionic, I would prefer to make these changes during an upcoming major release’s beta period. This allows us several months of community testing in order to catch bugs.

I will update this thread when I have more to share regarding this issue. Thanks!

liamdebeasi on Feb 25, 2022