Forum Stats

  • 3,733,968 Users
  • 2,246,850 Discussions
  • 7,856,955 Comments

Discussions

Load events seen on Chrome timeline

2996482
2996482 Member Posts: 15
edited December 2016 in Oracle JET

Hello,

I'm performance profiling our JET based page and using Chrome timeline to investigate the performance bottlenecks. When I check the timeline I see a couple of load events triggered by require.js . I drilled into the stack trace on the timeline to track the source of these load events but could mostly find framework related code (requirejs, KO, ojModule). I was unable to trace it to a particular module in our source code.  These events take atleast 200 msec on the main thread. Please refer timeline snapshot attached. Does anyone know why do we see these Load events?

Thanks,

Amruta

Message was edited by: 2996482

Answers

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,546 Employee
    edited November 2016

    Hi Amruta,

    I'm told by our architects that Require.js uses load events to get notified when the script is loaded. It then invokes module load callbacks including the application code.

    Does that help?

    --jb

  • 2996482
    2996482 Member Posts: 15
    edited November 2016

    Is the load event only indicate the load handler for the requireJs script ? Why do we see multiple load events? How can I get rid of these load events? Are these events caused because of the framework behavior or the application source code?

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,546 Employee
    edited November 2016

    A couple more points that may be helpful.

    Using a profiler like Firebug which provides it's "own time" feature may give you better understanding of what is going on.  https://getfirebug.com/wiki/index.php/Profiler

    The load events themselves should be very cheap, but the callbacks could contain anything.

    While we don't think this is your use case, it is possible that a requirejs load event could be somewhat expensive if used with CommonJS code because would scan the entire file looking for a require() call.  Again, I doubt that is your situation, but it's worth pointing out just in case.

    2996482
  • 2996482
    2996482 Member Posts: 15
    edited November 2016

    I will try Firebug and see if I find anything related to our source code which is causing this issue.

    "The load events themselves should be very cheap, but the callbacks could contain anything." - This would be an issue with requireJS, right?

    You're right, we aren't using CommonJS module loading in our JS modules. There is only 1 top level require call which is declaring all the module dependencies.

  • 2996482
    2996482 Member Posts: 15
    edited November 2016

    The Chrome timeline also gives the stack trace of the functions called and the time it took for every function execution in every file contributing to the Load event. I only see framework related code. Any idea what the JET framework or ojModule is doing which is causing these load events ?

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,546 Employee
    edited November 2016

    " - This would be an issue with requireJS, right?"

    Remember what RequireJS is doing.  It allows for the lazy loading of your JavaScript libraries.  It also manages the dependency chain and load order of your libraries.

    The load events are RequireJS.  What is in those callbacks would be the libraries that your application is using at some point.  That time is going to be spent either when those libraries get loaded on their own, or via the RequireJS manager.

    You could look into using something like r.js to build "bundles" of your most commonly used JavaScript libraries and loading those if you find there is to much time being spent doing multiple library calls.  This bundling process is more of an art than a science as each app needs certain libraries at different stages of their user or app flow.

    --jb

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,546 Employee
    edited November 2016

    ojModule is going to load an html and js file that are combined to form the module.  That module is an AMD module so it does have it's own "define" block which loads any dependencies that the ojModule has.

  • 2996482
    2996482 Member Posts: 15
    edited November 2016

    I think there is some confusion between our understanding here. Let me explain our problem more clearly.

    We have dashboard.js ojmodule which is defined as follows:

    define(['ojs/ojcore',

        'knockout',

        'jquery',

        'generalApp',

        'modules/helpers',

        'modules/facade/meteringRestFacade',

        'modules/facade/tasRestFacade',

        'modules/facade/configRestFacade',

        'modules/models/serviceModel',

        'modules/models/messageModel',

        'modules/models/metricModel',

        'modules/list/dashboardListRecord',

        'modules/utils/cacheManager',

        'modules/models/accountPromotionModel',

        'ojs/ojchart',

        'ojs/ojmasonrylayout',

        'ojs/ojmenu',

        'ojs/ojbutton',

        'ojs/ojfilmstrip',

        'ojs/ojselectcombobox',

        'ojs/ojdialog',

        'ojs/ojlistview',

        'ojs/ojcheckboxset',

        'ojs/ojpagingcontrol',

        'ojs/ojarraytabledatasource',

        'ojs/ojarraypagingdatasource',

        'ojs/ojpagingcontrol',

        'ojs/ojselectcombobox',

        'ojs/ojtable'

       ], function(oj, ko, $, app, helpers, meteringRestFacade, tasRestFacade, configRestFacade, ServiceModel, Message, MetricModel, DashboardListRecord, cache, AccountPromotionModel) {

      

       // Handle dashboard loading

       return new DashboardModel();   

    });

    So by callback do you mean the anonymous function mentioned above which handles the dashboard loading or something else ?

    Yes, we are using r.js in our production code to bundle all the dependencies of dashboard.js in 1 single file. This doesn't solve the problem. Instead I see even bigger load events taking about 500 msec on the main thread. Which is precisely the reason why we're investigating the un-concatenated version to see what's up with these load events.

  • 2996482
    2996482 Member Posts: 15
    edited November 2016

    Also does this mean that this is the time the framework is spending to load the module dependencies ?

  • Mstarets-Oracle
    Mstarets-Oracle Member Posts: 16
    edited November 2016

    Hello,

    When require.js loads a module, it adds a <script> element to the <head> of the page. It also adds a load listener, so it knows when the modules is available. Once the load callback is invoked by the browser, Require will invoke application code waiting for that module, etc. I doubt that the load callback on is own is the problem. If you have performance issues in your app, you need to use a profiler to figure out where the expensive code is, and not whet the function at the very bottom of the stack is.

    Max

  • 2996482
    2996482 Member Posts: 15
    edited November 2016

    Thanks Max. The JS profiler in FF helped me in gaining some insight over what might be causing a performance bottleneck. ojModule.init function has an average execution time of 1656 msec. That includes the time spent in 1 call to the function (including the time to execute the nested functions). Does ojModule.init function also call the application code ?

  • Mstarets-Oracle
    Mstarets-Oracle Member Posts: 16
    edited December 2016

    ojModule.init should not be calling any application code synchronously, but it will load the ViewModel provided by the application. Once the ViewModel is loaded, the application code from the ViewModel will be executed too. The ViewModel bay be fetching data and may be potentially telling ojModule to wait until it is done.

    The only thing ojModule.init() will do synchronously is asking Require.js to load the View (html) and the ViewModel.

    Max

Sign In or Register to comment.