How can I ensure that a defer script does not block other scripts (or async executes in order)?

Question

I have a web application that provides a feedback form as provided by Jira. Jira provides a snippet of javascript to add so that a popup with a feedback form is generated.

The problem I have is that sometimes Jira is unreachable or very slow, and the result is that my application is made extremely slow to open because of this. The snippet is in this form:

<script type="text/javascript" src="https://url.to.jira/one"></script>
<script type="text/javascript" src="https://url.to.jira/two"></script>

<script type="text/javascript">
window.ATL_JQ_PAGE_PROPS = {
   "triggerFunction": function(showCollectorDialog) {
      ...
   }
}
</script>

Now, my first idea was to add "defer", but my own page has its own bunch of javascript to execute. With "defer", my javascript has to wait until the Jira loading is completed, leaving my page fully rendered, but with my javascript not executed.

With "async", my javascript is loaded and the page is properly displayed even if the Jira code is slow to load, but the order of the Jira scripts is now random. The two scripts are supposed to be loaded and run in order.

How can I ensure that the Jira script does not block my page, and also guarantee that the Jira feedback functionality is reliably available?

CertainPerformance · Accepted Answer · 2021-04-07 14:21:40Z

3

Give the first script the async attribute, watch for its load event, and when that occurs, inject the second Jira script manually, so that Jira loads in order while also letting your own code run as soon as it can without waiting for Jira.

<script async src="https://url.to.jira/one"></script>
<script>
const firstJiraTag = document.currentScript.previousElementSibling;
firstJiraTag.addEventListener('load', () => {
  document.body.appendChild(document.createElement('script')).src = "https://url.to.jira/two";
  // once the above script fires its `load` event, both are loaded
});
// add an `error` listener to firstJiraTag if you want

// put your custom script here
// it will run as soon as this script tag runs,
// without waiting for the Jira above
window.ATL_JQ_PAGE_PROPS = {
   "triggerFunction": function(showCollectorDialog) {
      ...
   }
}
</script>

edited Apr 7, 2021 at 14:21

answered Apr 7, 2021 at 14:07

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stefano Borini Over a year ago

Ok, Jira is dead so I am unable to try it, but at a glance I think you are on the right track. Thanks!

Collectives™ on Stack Overflow

How can I ensure that a defer script does not block other scripts (or async executes in order)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related