WRM resource loading phases

In Web Resource Manager (WRM) 5 and later versions, you can use four phases to specify at which point during the page lifecycle web-resources or context should be loaded and executed.

Execution orderResource phaseDescription
1sync phaseCode is put inline and runs immediately when the browser parses the page. A product uses this phase to inject any bootstrap code.
2require phase

Code loads and runs immediately when the browser parses the script or link tag. Resources added this way are blocking the rendering.

3defer phaseCode loads asynchronously and runs in order when the page has finished parsing.
4interaction phaseCode loads and runs after the require and defer phase scripts as well as DomContentLoaded (DCL) handlers have been completed.

The defer and interaction are two new phases we've introduced in WRM 5. They are used to minimize the initial load on a user’s browser when downloading, parsing, and executing all assets, which happens before the page content is rendered and the page becomes interactive.

New API methods for resource phases

Since WRM 5, you can also use new methods added to the WRM api.assembler:

Both methods accept a new ResourcePhase parameter that defines the existing WRM resource phases.

You can use these methods to define the loading phase for a requested web-resource, context, page, or data.

Jira is the first product to use new APIs. For guidelines on how to update your app's code on Jira pages, check Preparing for Jira 9.0.

On updated pages that consume new WRM APIs, the defer phase might be a default phase for all the product code. This means that any app that relies on anything from the product must use the defer or later phase to work correctly on those pages.

To detect which pages are using deferred scripts and whether your app’s script is loaded in the defer phase, check <script> tags. In the markup, they have an additional defer attribute (see the HTML specification for details).

Here's an example of a Jira page with the defer attribute:

1
2
<script src="/s/(...)/jira.general,-_super/batch.js" (...) defer></script>

Tips for loading your app's JavaScript and CSS on pages with new resource phases:

  • Load only necessary product and apps bootstrapping and init. code in the require phase.
  • Execute other parts of the “critical path" in the defer phase.
  • Add the remaining code to the interaction phase or lazy-load it.

Rate this page: