Response title
This is preview!
DOM Caching behavior - transition vs no transition
in jQuery Mobile
•
6 years ago
I've just noticed a behavioral difference between using data-transition='none' vs using a transition.
From initial load of the document, with data-transition, for example, fade:
Load A -> DOM contains A
link to B -> DOM contains A and B
link to C -> DOM contains A, B, and C
link to D -> DOM contains A, C, and D
With data-transition='none'
Load A -> DOM contains A
link to B -> DOM contains A and B
link to C -> DOM contains A and C
link to D -> DOM contains A and D
(Note: when I say "link" above, actually my code is doing $.mobile.changePage - unsure if the behavior is any different when using a link tag with default behavior.)
So, if you use any transition other than none, the previous page stays in the DOM until the next page change. Of course, it needs to stay in the DOM for the duration of the transition. Once the transition has completed, it could be removed. But it is not. I presume the reasoning was there is no compelling reason to remove it yet, and it is handy to be able to go "back" without having to re-load the page.
Unsure if this has performance implications, though?
If you use none, then the previous page is removed from the DOM immediately.
But this is inconsistent and (as far as I can tell) undocumented behavior. If you are expecting to go "back" to the previous page without re-loading from a server, and you use none, you will have unexpected results.
I observed this in jQuery Mobile 1.2.1. Unsure if this behavior is carried-forward in 1.3 and 1.4.
Interested in others observations and discussion.
From initial load of the document, with data-transition, for example, fade:
Load A -> DOM contains A
link to B -> DOM contains A and B
link to C -> DOM contains A, B, and C
link to D -> DOM contains A, C, and D
With data-transition='none'
Load A -> DOM contains A
link to B -> DOM contains A and B
link to C -> DOM contains A and C
link to D -> DOM contains A and D
(Note: when I say "link" above, actually my code is doing $.mobile.changePage - unsure if the behavior is any different when using a link tag with default behavior.)
So, if you use any transition other than none, the previous page stays in the DOM until the next page change. Of course, it needs to stay in the DOM for the duration of the transition. Once the transition has completed, it could be removed. But it is not. I presume the reasoning was there is no compelling reason to remove it yet, and it is handy to be able to go "back" without having to re-load the page.
Unsure if this has performance implications, though?
If you use none, then the previous page is removed from the DOM immediately.
But this is inconsistent and (as far as I can tell) undocumented behavior. If you are expecting to go "back" to the previous page without re-loading from a server, and you use none, you will have unexpected results.
I observed this in jQuery Mobile 1.2.1. Unsure if this behavior is carried-forward in 1.3 and 1.4.
Interested in others observations and discussion.
1
