Hi.
I’ve been talking to @Remi about a ‘performance’ issue: when i click a button and push a new page, the app freezes for 3-5 seconds and then the pushed page appears. Remi did the test on the project i sent, and he told me that the app crashed on a galaxy s2 i think.
At first i blame our screens, full of images (50+ small images) but i was checking the issue and making some isolated tests, and the conclusion is that the problem is the router.
This is the scheme of our app:
- MainView
- Router: router
- new game (page1)
- dependency: router
- match (page 1.1)
- result (page 1.2)
- dependency: router
- tutorial (page2)
- results (page3)
- new game (page1)
The problem happens when we’re in page1, and push to page1.1: router.push('newgame', {}, 'match', {})
These are the tests i made:
- replace page 1.1 with a blank screen, to check if the pushed page is image-heavy and therefore freezing the app when loading. Result:freezed app.
- change
dependency: router
for another instance of router, let’s say ‘internalRouter’. Result: it freezes, but apparently by less time. - completely remove the first level of the app, so just one router exists. Result: smooth transition, no freeze at all.
Conclusion: the problem exists when there’s two (or more) levels of routing (and maybe added to that, both active and pushed pages are image-heavy). According to the result of 3, i could assume that our pages aren’t the cause of the issue.
i’ve uploaded an isolated version of the original problem to dropbox (without user registration and additional navigation, in a file called HatTrick - simplified test case), and a test of case 3, where you can see the smooth transition (file: HatTrick - ‘fixed’ test case).
edit: for the tests, please ignore all errors as i stripped a lot of things to make that isolated test. You have to:
- click the red button
- choose a country
- click the blue button
- choose a country
- press OK
- press the yellow button.