如何使我的JavaScript更快且異步運行

Question

我正在嘗試進行擴展，以便在加載頁面時向頁面添加一些HTML。 長話短說，它獲取表中的鏈接列表，加載這些鏈接，並獲取特定的字符串並將其添加到我加載的原始頁面中。

這是代碼：由於網頁的編碼方式，我無法獲得唯一的ID，因為它們不存在，因此請忽略該部分。

var xhr = new XMLHttpRequest();
  for (i = 0; i < length; i++) {
    url = rows[i].getElementsByTagName("td")[0].getElementsByTagName('a')[0].getAttribute('href');
    insert = rows[i].insertCell(-1);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //var Data = JSON.parse(xhr.responseText);
            var htmlString = xhr.responseText
              , parser = new DOMParser()
              , doc = parser.parseFromString(htmlString,"text/html")
              , test = doc.getElementById('page-wrapper').children[1]
              , ip_address = doc.getElementsByClassName('col-md-5')[0].children[5].children[0].children[0].children[10].innerHTML;
            insert.innerHTML = ip_address;
          }

    };
      xhr.open("GET",url,false);
      xhr.send();
    }

當我調用該函數時，它可以正常工作，但是要花很長時間才能加載，並且全部加載到最后，而不是在for循環的每次迭代完成時進行更新。 我想減少加載所需的時間，但要減少很多，並且可能要比在最后立即更新耳排。 我已經嘗試搜索asycn javascript，但是我嘗試的一些代碼並沒有太大幫助。 任何援助將不勝感激。

Answer 1

使用現代Javascript：

 rows.forEach(row => { fetch(row.querySelector('td:first-of-type a:first-of-type').getAttribute('href')) .then(res => res.json()) .then(data => { // do manipulations with DOM }) .catch(console.log) })