Improving the speed of loop in javascript for objects So I have a loop that works great, but doing some testing I notice it is a bit slow. I get an average time within the loop of about 0.11 seconds. Include that with some arrays containing a length of over 100 and the time starts making a big difference. So I mainly want to improve the speed of the loop without compromising the functionality it already has (which is taking a JSON object/array and turning it into an html format). Below is the code along with the function that is called within the loop.

let replacements = '';
let ind = 0;
for (let w in obj[key]) {
    if (Array.isArray(obj[key])) {
        if (Array.isArray(obj[key][w])) {
            if (obj[key].length &gt; 10) {
                replacements += "&lt;font color='green'&gt;Array(" + obj[key].length + ")&lt;/font&gt;"
                break
            }
            replacements += ((ind == 0) ? "&lt;font color='green'&gt;Array(" : ", &lt;font color='green'&gt;Array(") + obj[key][w].length + ")&lt;/font&gt;";
        } else {
            if (typeof obj[key][w] === 'object') {
                replacements += ((ind == 0) ? "" : ", ") + "{...}";
            } else {
                replacements += ((ind == 0) ? "" : ", ") + ObjectString(obj[key][w], "preview");
            }
        }
    } else {
        if (Array.isArray(obj[key][w]) || typeof obj[key][w] === 'object') {
            replacements += ((ind == 0) ? "" : ", ") + w + ": " + ((Array.isArray(obj[key][w])) ? "[...]" : "{...}");
        } else {
            replacements += ((ind == 0) ? "" : ", ") + w + ": ";
            replacements += ObjectString(obj[key][w], "preview");
        }
    }
    ind++;
}

function ObjectString(obj, type) { //~0.001-0.003 seconds
    let objString = obj;
    if (typeof objString == "string" &amp;&amp; !objString.match(/&lt;.*?&gt;/g))
        objString = "&lt;font color='red'&gt;\"" + objString + "\"&lt;/font&gt;";
    else if (/&lt;.*?&gt;/g.test(objString))
        objString = ((type == "normal") ? "&lt;pre&gt;" + process(objString).replace(/&lt;/g, '&amp;lt;').replace(/&gt;/g, '&amp;gt;') + "&lt;/pre&gt;" + objString : "&lt;font color='red'&gt;\"...\"&lt;/font&gt;");
    else if (typeof objString == "number" || typeof objString == "boolean")
        objString = "&lt;font color=' #947cf6'&gt;" + objString + "&lt;/font&gt;";

    return objString
}


function process(str) {//~0.001 seconds

    var div = document.createElement('div');
    div.innerHTML = str.trim();

    return format(div, 0).innerHTML;
}


Hopefully this can be optimized to increase its speed, but if it can't then I would at least like some help to clean it up as I am sure this isn't the most effective way to do it. Thanks!

Edit: added the process function that was previous missing. Also for clarification I am using regular JSON arrays and objects that usually exceed 100 objects in the array. If you want an example of what that data could look like https://en.wikipedia.org/wiki/GeoJSON#Example has a good structure of some of the data I am parsing (containing both objects and arrays).
Continuous repetitive string concatenation is bad for performance because each such operation requires re-hashing of the string due to String interning.
Array enumeration using for-in loop is slower than for-of or a standard for loop.
Things like obj[key][subkey] may be slow in a long loop so cache them in a variable.
Do the proper performance measurements using Devtools Timeline profiler to find bottlenecks.




Here's an arguably more readable and hopefully faster example:

const parts = [];
const group = obj[key];

if (Array.isArray(group)) {
  for (const val of group) {
    if (parts.length) parts.push(', ');
    if (Array.isArray(val)) {
      const tooLong = group.length &gt; 10;
      const len = (tooLong ? group : val).length;
      parts.push(`&lt;font color="green"&gt;Array(${len})&lt;/font&gt;`);
      if (tooLong) break;
    } else {
      parts.push(objectPreview(val));
    }
  }
} else {
  for (const [key, val] of Object.entries(group)) {
    parts.push(`${parts.length ? ', ' : ''}${key}: ${
      Array.isArray(val) ? '[...]' : objectPreview(val)
    }`);
  }
}
const replacements = parts.join('');


function objectPreview(obj) {
  let str = obj;
  switch (typeof obj) {
    case 'object':
      str = '{...}';
      break;
    case 'string':
      if (/&lt;.*?&gt;/.test(obj)) {
        str = type === 'normal' ?
          `&lt;pre&gt;${process(obj).replace(/&lt;/g, '&amp;lt;').replace(/&gt;/g, '&amp;gt;')}&lt;/pre&gt;${obj}` :
          '&lt;font color="red"&gt;"..."&lt;/font&gt;';
      } else {
        str = `&lt;font color="red"&gt;"${obj}"&lt;/font&gt;`;
      }
      break;
    case 'number':
    case 'boolean':
      str = `&lt;font color="#947cf6"&gt;${obj}&lt;/font&gt;`;
      break;
  }
  return str;
}