This topic contains 9 replies, has 3 voices, and was last updated by Jai Jai 3 months, 1 week ago.

High CPU Usage


  • alper.gunay
    Participant

    Posts: 14
    Member Reply #17277

    Hi,

    We are using metronic demo7 admin theme in our application and we found that theme is using high cpu even if it is idle. When we anlyze deeply the reason of high cpu usage we found that problem at creating scroll for menu.   When we disable <div class=”m-menu__wrapper”> cpu is coming to normal and becoming idle. We are thinking that the problem is coming from the scprints.bundle.js initLeftAside method. I attached a screenhot. Also you can see the problem with openning demo7 template and google task manager together.

    var initLeftAside = function() {

    // init aside left offcanvas

    var asideOffcanvasClass = ($(‘#m_aside_left’).hasClass(‘m-aside-left–offcanvas-default’) ? ‘m-aside-left–offcanvas-default’ : ‘m-aside-left’);

     

    asideMenuOffcanvas = $(‘#m_aside_left’).mOffcanvas({

    class: asideOffcanvasClass,

    overlay: true,

    close: ‘#m_aside_left_close_btn’,

    toggle: {

    target: ‘#m_aside_left_offcanvas_toggle’,

    state: ‘m-brand__toggler–active’

    }

    });

     

    $(‘#m_aside_left’).find(‘.m-menu__item–submenu-fullheight’).each(function() {

    var obj = $(this).find(‘> .m-menu__submenu > .m-menu__wrapper’);

     

    if (mUtil.isInResponsiveRange(‘tablet-and-mobile’)) {

    // destroy if the instance was previously created

    mApp.destroyScroller(obj);

    return;

    }

     

    var height = mUtil.getViewPort().height;

     

    // create/re-create a new instance

    mApp.initScroller(obj, {height: height});

    });

    }

     

    Attachments:
    You must be logged in to view attached files.
    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #17316

    Hi 🙂

    Thanks for your feedback. We will check on this issue further.

    Is this issue only happening for Angular? Or the default HTML also?

    Thanks


    alper.gunay
    Participant

    Posts: 14
    Member Reply #17519

    Hi,

    We are using angular template at development and this issue is very important for us. As far as I see, the problem is exist also at HTML.

    Thanks,

    Best Regards.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #17606

    Hi,

    Please note that Metronic’s default demo comes with a lot of examples(charts, components, plugins) are enabled. For your actual development you will not need them all so you will need to trim and keep only required elements.  Are you able to build custom bundle ? This means you can remove unused plugins from your bundle and compile a new custom bundle. Please refer to the documentation and get familiar with this(you haven’t checked it yet).  If you need any further clarifications please provide us more details(which demo are you using, where do you notice the slowness, have u removed unused components) so we can guide you further.

    Thanks.


    alper.gunay
    Participant

    Posts: 14
    Member Reply #17609

    Hi,

    If you read my first post and look at the screenshot, you will find all the answers you asked me.

    I have posted also the code which you have problem.

    Of course we have cleared all the unused plugins from our prod environment. But still there is high cpu problem at demo7 menu and scroll bar.

    Thanks,

    Best Regards.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #17638

    Hi,

    Sorry, for reasking the theme question. We have checked the issue and the issue was causing by 2 demo features that can be easily disabled in “src\js\demo\demo7\base\layout.js”:

    1)  The notification bar icon dot shaking animation using “setInterval” infinitute call:

        $(‘#m_topbar_notification_icon .m-nav__link-icon’).addClass(‘m-animate-shake’);

    $(‘#m_topbar_notification_icon .m-nav__link-badge’).addClass(‘m-animate-blink’);

    }, 3000);

     

    setInterval(function() {

    $(‘#m_topbar_notification_icon .m-nav__link-icon’).removeClass(‘m-animate-shake’);

    $(‘#m_topbar_notification_icon .m-nav__link-badge’).removeClass(‘m-animate-blink’);

    }, 6000);

    2) And the dashboard chart demo that reloads infinitely by “setInterval” in “src\js\app\custom\dashboard.js”:

    chart.on(‘created’, function() {

    if (window.__anim21278907124) {

    clearTimeout(window.__anim21278907124);

    window.__anim21278907124 = null;

    }

    window.__anim21278907124 = setTimeout(chart.update.bind(chart), 15000);

    });

    This means if you trip unused parts of the theme you will get more light layout without overloaded examples.

    If you need any further clarifications please let us know.

    Thanks.


    alper.gunay
    Participant

    Posts: 14
    Member Reply #18159

    Hi,

    We tried your solution but nothing has changed. We are sure that the problem is related with the scroll bar as I mentioned at my first post.  When we disable  <div class=”m-menu__wrapper”> CPU is returning normal. You have to fix your code at scroll bar.

    Thanks,

    Best Regards.

    • This reply was modified 4 months, 1 week ago by  alper.gunay.
    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18176

    Hi 🙂

    Does it still happen in the version v5.2.1? In the latest code, we have removed old custom scrollbar and use a new scrollbar. If the high CPU issue related to the scrollbar, this issue should be fixed.

    Thanks


    alper.gunay
    Participant

    Posts: 14
    Member Reply #18738

    We made the upgrade and it seems that the problem has been resolved. Thank you!

     

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18765

    Thanks for your feedback

    All the best! 🙂

    Thanks

You must be logged in to reply to this topic.