No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. yamland
    Y
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 4
    • Best 1
    • Groups 0

    yamland

    @yamland

    1
    Reputation
    25
    Profile views
    4
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    yamland Follow

    Best posts made by yamland

    • 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>
      
      
      posted in Help
      Y
      yamland

    Latest posts made by yamland

    • RE: How to speed up page change ?

      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 ?

      posted in Help
      Y
      yamland
    • RE: How to speed up page change ?

      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…

      posted in Help
      Y
      yamland
    • RE: How to speed up page change ?

      // 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,

      posted in Help
      Y
      yamland
    • 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>
      
      
      posted in Help
      Y
      yamland