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

core/template AMD - template in loop results in bad performance (multiple AJAX requests)

XMLWordPrintable

    • MOODLE_31_STABLE, MOODLE_32_STABLE
    • MOODLE_31_STABLE, MOODLE_32_STABLE
    • MDL-57009-master
    • Hide

      See steps to replicate in description

      When the fix is applied you shouldn't see the same template / string requests being made over and over.

      Show
      See steps to replicate in description When the fix is applied you shouldn't see the same template / string requests being made over and over.

      The core/template and core/str AMD modules requires templates / strings to be preloaded if you intend to use them in loops.
      If you don't preload the template or string you can end up with the same AJAX request fired over and over (which is bad for performance).

      Steps to replicate:

      1) Install the attached local plugin which demonstrates this issue 'local_templateissue.zip'
      2) Open your development tools (Chrome or Firefox) and enable the networking tab
      Visit:

      [yourmoodleurl]/local/templateissue

      Observe the crazy number of network requests made to satisfy 1 template + string.
      See attached MDL-57009-crazy-number-of-network-requests.png
      If you inspect the requests you can see that they are all for the template and the string - "core_output_load_template" and "core_get_string"

      3) Reload the page

      Observe that on the second page load this doesn't happen

      4) Open a different browser or clear browser cache (not moodle cache) and repeat steps 2 + 3

      Observe that the crazy number of network requests has happened again

      Conclusion:

      This is a potential performance issue that affects users on their first page load - it can cause blocking so the page takes ages to load and appears unresponsive.
      As first impressions are important, I'd say it's a significant problem.
      Also, imagine how bad it is for the server to be receiving the same requests over and over again when a new cohort of students logs on for the first time using a browser that does not have anything cached!

      Workaround:

      Templates and strings can be preloaded to avoid this issue BUT it would be nice if the template and str AMD module was improved to automatically handle this:

      Before workaround in non-core plugin code:

                  $('.testrow').each(function(idx, el) {
                      var date = $(el).data('date');
       
                      templates.render('local_templateissue/example', {"exampledate" : date})
                          .done(function(result) {
                              $(el).replaceWith(result);
                          });
                  });
      

      After workaround:

          templates.render('local_templateissue/example', {}).done(function() { // Preload template before iterating.
                  $('.testrow').each(function(idx, el) {
                      var date = $(el).data('date');
       
                      templates.render('local_templateissue/example', {"exampledate" : date})
                          .done(function(result) {
                              $(el).replaceWith(result);
                          });
                  });
          });
      

        1. 01-before.png
          01-before.png
          186 kB
        2. 02-after.png
          02-after.png
          58 kB
        3. chrome-local-storage.png
          chrome-local-storage.png
          102 kB
        4. local_templateissue.zip
          6 kB
        5. MDL-57009-crazy-number-of-network-requests.png
          MDL-57009-crazy-number-of-network-requests.png
          293 kB
        6. MessageAjax.ogv
          8.18 MB

            damyon Damyon Wiese
            brudinie guy thomas
            Simey Lameze Simey Lameze
            Dan Poltawski Dan Poltawski
            David Mudrák (@mudrd8mz) David Mudrák (@mudrd8mz)
            Votes:
            6 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.