Menu rendering too slowly on page load

6 posts, 0 answers
  1. James
    James avatar
    5 posts
    Member since:
    Jan 2015

    Posted 15 Feb Link to this post

    When the page loads the menu takes anywhere from 0.1 to 5 seconds to load. I have noticed this problem is the worst on Google Chrome with the debug tools open, and least noticeable on Internet Explorer 11 with the debug tools closed. I am unsure what is causing the slow rendering as the PanelBar I have in the same page does not have this problem and is rendered at the same time as the rest of the page. The menu is being created with the json datasource method.

    Please let me know what I can do to speed up the rendering.

     

  2. Nencho
    Admin
    Nencho avatar
    1646 posts

    Posted 17 Feb Link to this post

    Hello James,

    By design, the rendering of the menu should not take such time. This is why, we would need to inspect your implementation, in order to replicate the problem and pin down the reason for it. It would be best, if you could send is a runnable example, demonstrating the problem.

    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. James
    James avatar
    5 posts
    Member since:
    Jan 2015

    Posted 16 May Link to this post

    Hello,

    Sorry for the late reply.

    I have made a Plunkr demo which shows the issue I am having. It seems to be quite intermittent and in some cases took 5-10 refreshes to see, but when it shows it looks as if the kendo style has not been applied (list is vertical), then quickly switches to the correct kendo look. The whole process takes less than a second.

    The Plunkr is available here.

  4. Nencho
    Admin
    Nencho avatar
    1646 posts

    Posted 18 May Link to this post

    Hello James,

    I have tested the behaviour, using the provided plunker example. It seems, however, that the slow rendering observed in plunker is specific for it. I mean that there are probably some resources that the plunker needs in order to visualise the code, which is causing the waiting.

    I have tested the very same implementation, using the same version as you do, but the issue does not appear. Please give it a try at your end:

    http://runner.telerik.io/fullscreen/@nenchef/Imete/2


    If the issue still persists, please send the HTML file, where you use the menu, so we could test the real-life scenario.

    I am looking forward to your reply

    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. James
    James avatar
    5 posts
    Member since:
    Jan 2015

    Posted 18 May in reply to Nencho Link to this post

    Hello Nencho,

    I have tried your example and I am seeing the issue. This issue is the one I am seeing in my production application. I am seeing the page load with just the text "This is a test" then a split second later I see the text move down and the menu appear above. The process was maybe half a second each time I refreshed the page.

    When on my production application this causes the whole page layout to move.

    I am using Google Chrome version 57 if that helps. I do not see the issue in Internet Explorer 11, but I was only rarely able to see it in my application.

    To reproduce the issue I was simply reloading the page.

     

    Regards,

    James

  6. Nencho
    Admin
    Nencho avatar
    1646 posts

    Posted 22 May Link to this post

    Hello James,

    Such time - less than 0.5s is expected because first, the HTML needs to be rendered on the page when the styles and scripts should be applied to that HTML.

    However. in order to avoid the flickering and the initial display of the ul and li elements, I would suggest you the following workaround:

    http://dojo.telerik.com/@nenchef/Imete/16

    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top