如何使我的JavaScript更快且异步运行

Question

I'm trying to make an extension that adds some HTML to a page as it's loaded. Long story short, it gets a list of links in a table, loads those links, and grabs a specific string and adds it to the original page I loaded.

Here is the code: due to the way the webpage was coded, i couldn't get the unique ids because they didn't exist so ignore that part.

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();
    }

when i call the function, it works fine, however it takes a really long time to load and it all loads at the end rather than updating as each iteration of the for loop completes. I'd like to decrease the time it takes to load but a significant amount, and possibly have ear row update instantly vs at the end. I've tried searching asycn javascript but the bit of code I tried didn't help me much. Any assistance would be appreciated.

Answer 1

Using modern 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) })