如何确保延迟脚本不会阻塞其他脚本（或异步按顺序执行）？

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?

Answer 1

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>