How to speed up page change ?



  • I’m making a SPA which have Twitter like UI.
    Now, using <q-tabs>, <q-route-tab> for page change and navigation. (vue router is history mode.)

    Problem is slow page change. It takes 1 or 2 seconds. Code is like below.

    Second time page change is very fast. because using <keep-alive>. (about 0.5s, including fade transition)
    But first time page chage is very slow. ( test local, network enough fast, not use lazy loading)

    I think the cause is each page code size are big. Heavy code makes first-time page change rendering slower.
    Imagine page change on Twitter app, from time-line page to any user’s page.
    Twitter is simple but those code is maybe very heavy because of very rich UI.

    If heavy code cause page change slower, What can I do for speed up page change?

    Now, I searching the way to pre-rendering other router page on client side. But I can’t find the way yet.
    ( For example, when you see user’s page, I want to do pre-rendering time-line page in background on client side, like after <keep-alive> . )

    Please give me your advice.

    // router part
     <keep-alive>
       <router-view />
     </keep-alive>
    
    // tab part
     <q-footer>
       <q-tabs
       >
         <q-route-tab :to="{ name: 'timeline' }" icon="a" />
         <q-route-tab :to="{ name: 'user' }"     icon="b" />
         <q-route-tab :to="{ name: 'message' }"  icon="c" />
       </q-tabs>
     </q-footer>
    
    


  • // Postscript
    I thoght about not using vue router and only use <q-tab>.
    Maybe It is pre-rendering other tab ?But that way, cons are can’t use router.
    So User can’t use URL link lile "twitter.com/user/abc "
    So I Search the way can use with <q-route-tab> and router,



  • @yamland

    I’m also trying to preserve the state of q-route-tabs without reloading them but no luck with vue keep-alive
    How do you exactly use the keep-alive. I’m trying to use them inside App.vue which is like this.

    <template>
      <div id="q-app">
        <keep-alive>
          <router-view />
        </keep-alive>
      </div>
    </template>
    


  • @mseremet @yamland keep-alive does work with q-router-tab https://codesandbox.io/s/q306jwnjx6. Click “Home” ->click one of the routes-> change some data ->change route -> go back to some route (states were kept).



  • Hi, @mseremet

    I used <q-footer> outside of <keep-alive>.

    <my-custom-footer-with-q-footer/>
    <keep-alive>
      <router-view />
    </keep-alive>
    

    And, I have not find the way to make first time page change faster. (Second time page change is enough fast thanks of keep-alive)
    Only Way I know is make code lighter…



  • Hi, @metalsadman

    Thank your reply!!
    Sorry to confuse you because my first post describe is wrong.
    I used q-router-tab outside of keep-alive. So footer works well.

    Problem is very slow page change at first time page change from page A to Page B.
    Second time page change is enough fast thanks to keep-alive.
    So, I searching the way to pre-rendering other router page on client side. But I can’t find the way yet.
    ( For example, when you see user’s page, I want to do pre-rendering time-line page in background on client side, like after <keep-alive> . )

    But this is not quasar specific problem? So better to ask at stack overflow ?


Log in to reply