Improve Efficiency of Downloading UInt8Arrays in Browser

Help Coding
,
1

I have some code here to, as an example, download Arch Linux in the browser with js-ipfs. It’s currently working.

async function start(event) {

  console.log("Starting IPFS...");
  node = await Ipfs.create();

  for await (const file of node.get('QmQxBX5ZKRY8k6W2UqYTMxhdFTvkmNw8X7GJN3t5UiyBpe')) {
    console.log("Starting");
    var content = [];
    for await (const chunk of file.content) {
      console.log("Gathering");
      content = mergeTypedArrays(content, chunk); // slow
    }
    console.log("Assembling");
    saveFile("arch.iso", "application/octet-stream", content);
    console.log("Done");
  };
}

// https://stackoverflow.com/a/35633935/2700296
function mergeTypedArrays(a, b) {
  // Checks for truthy values on both arrays
  if(!a && !b) throw 'Please specify valid arguments for parameters a and b.';  

  // Checks for truthy values or empty arrays on each argument
  // to avoid the unnecessary construction of a new array and
  // the type comparison
  if(!b || b.length === 0) return a;
  if(!a || a.length === 0) return b;

  // Make sure that both typed arrays are of the same type
  if(Object.prototype.toString.call(a) !== Object.prototype.toString.call(b))
      throw 'The types of the two arguments passed for parameters a and b do not match.';

  var c = new a.constructor(a.length + b.length);
  c.set(a);
  c.set(b, a.length);

  return c;
}

// https://stackoverflow.com/a/36899900/2700296
function saveFile (name, type, data) {
  if (data !== null && navigator.msSaveBlob) {
    return navigator.msSaveBlob(new Blob([data], { type: type }), name);
  }
  var a = document.createElement('a');
  a.style.display = "none";
  var url = window.URL.createObjectURL(new Blob([data], {type: type}));
  a.setAttribute("href", url);
  a.setAttribute("download", name);
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
  a.remove();
}

The trouble is, the current method of assembling the UInt8Array to send to saveFile involves re-creating a new UInt8Array on all ~2600 chunks that are downloaded, which is really slow and inefficient. I’ve tried pushing all of these chunks to an array and combining it afterward, but I can’t figure out how to take an array of ~2600 UInt8Arrays and flatten them down to one UInt8Array. Anyone have any advice for me?

2

Was overthinking it. Just ended up creating a blob directly from an array of the UInt8Arrays.

async function start(event) {

  console.log("Starting IPFS...");
  node = await Ipfs.create();

  for await (const file of node.get('QmQxBX5ZKRY8k6W2UqYTMxhdFTvkmNw8X7GJN3t5UiyBpe')) {
    console.log("Starting");
    var content = [];
    for await (const chunk of file.content) {
      console.log("Gathering");
      content.push(chunk);
    }
    console.log("Assembling");
    saveFile(content, "archlinux-2020.04.01-x86_64.iso");
    console.log("Done");
  };

}

// https://stackoverflow.com/a/36899900/2700296
function saveFile(data, fileName) {
  if (data !== null && navigator.msSaveBlob) {
    return navigator.msSaveBlob(new Blob(data, { "type": "application/octet-stream" }), fileName);
  }
  var a = document.createElement('a');
  a.style.display = "none";
  var url = window.URL.createObjectURL(new Blob(data, {type: "application/octet-stream"}));
  a.setAttribute("href", url);
  a.setAttribute("download", fileName);
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
  a.remove();
}