Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-36100

Improve the way that yui_module requires JS modules to reduce number of calls

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Duplicate
    • Affects Version/s: 2.3.2
    • Fix Version/s: None
    • Component/s: JavaScript
    • Labels:

      Description

      We're now beginning to adds more and more YUI modules to moodle.
      At present, each call to yui_module means that we add something like:

      Y.use('moodle-course-modchooser', function(Y) {
        M.course.init_chooser({"courseid":"6"});
      });

      The way that the YUI loader works what then happens is:

      1. the Y.use() is processed by the browser
      2. the YUI (JS) loader then loads the JS for the specified modules (moodle-course-modchooser) and issues a call for the JS (/theme/yui_combo.php?moodle/-1/course/yui/modchooser/modchooser.js)
      3. the newly downloaded JS is parsed and its list of dependencies is read
      4. The list of dependencies is now downloaded (base, overlay, moodle-core-chooserdialogue, transition)
      5. The list of dependencies for moodle-core-chooserdialogue is now read and they are downloaded

      As a result, for the modchooser we've now made:

      • 1 call for modchooser.js
      • 1 call for modchooser's dependencies
      • 1 call for the dependencies of the dependencies
      • possibly more calls for yet more dependencies.

      That's at least three browser fetches.

      The way that the core YUI side of things gets around this is to preseed its list of dependencies somehow. We should really look at putting some way of doing this in place to reduce the amount of unnecessary page calls.

      Additionally, we should look at combining the list of YUI modules that we're using into a single Y.use(), for example:

      Y.use('moodle-course-modchooser', 'moodle-course-toolboxes', 'moodle-core-blocks', 'moodle-course-dragdrop', function(Y) {
        M.course.init_resource_toolbox({"courseid":"6","ajaxurl":"\/course\/rest.php","config":{"resourceurl":"\/course\/rest.php","sectionurl":"\/course\/rest.php","pageparams":[]}});
        M.course.init_section_toolbox({"courseid":"6","format":"topics","ajaxurl":"\/course\/rest.php","config":{"resourceurl":"\/course\/rest.php","sectionurl":"\/course\/rest.php","pageparams":[]}});
        M.course.init_section_dragdrop({"courseid":"6","ajaxurl":"\/course\/rest.php","config":{"resourceurl":"\/course\/rest.php","sectionurl":"\/course\/rest.php","pageparams":[]}});
        M.course.init_resource_dragdrop({"courseid":"6","ajaxurl":"\/course\/rest.php","config":{"resourceurl":"\/course\/rest.php","sectionurl":"\/course\/rest.php","pageparams":[]}});
        M.core_blocks.init_dragdrop({"courseid":"6","pagetype":"course-view-topics","pagelayout":"course","regions":["side-pre","side-post"]});
      });

      This would mean that we combine all of the modules into one page load, those are all evaluated at once, and their dependences loaded once. This should reduce page load count.

      I've put a quick proof-of-concept together.

      On a course editing page, with the fix for MDL-36099 included, the number of requests related to JS reduces from 23 to 18.
      Adding in some of the module dependencies reduces this further to 15.
      If the file drag/drop were rewritten as a YUI module this would reduce further to 14.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              dobedobedoh Andrew Nicols
              Reporter:
              dobedobedoh Andrew Nicols
              Participants:
              Component watchers:
              Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: