如何確保延遲腳本不會阻塞其他腳本（或異步按順序執行）？

Question

我有一個 web 應用程序，它提供 Jira 提供的反饋表。 Jira 提供了 javascript 的片段來添加，以便生成帶有反饋表單的彈出窗口。

我遇到的問題是，有時 Jira 無法訪問或非常慢，結果是我的應用程序因此打開非常慢。 片段是這種形式：

<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>

現在，我的第一個想法是添加“延遲”，但我自己的頁面有自己的一堆 javascript 來執行。 使用“延遲”，我的 javascript 必須等到 Jira 加載完成，讓我的頁面完全呈現，但我的 javascript 沒有執行。

使用“異步”，我的 javascript 已加載，即使 Jira 代碼加載緩慢，頁面也能正確顯示，但 Jira 腳本的順序現在是隨機的。 這兩個腳本應該按順序加載和運行。

如何確保 Jira 腳本不會阻止我的頁面，並保證 Jira 反饋功能可靠可用？

Answer 1

為第一個腳本提供async屬性，注意其load事件，當發生這種情況時，手動注入第二個 Jira 腳本，以便 Jira 按順序加載，同時讓您自己的代碼盡快運行，而無需等待 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>