All modern browsers support ES5 which means array.forEach will exist. You can use that to replace array.forEach. The overhead of $.each comes from checking if it's an array or object and using the appropriate loop operation.

The same goes for the creation of li and ul. You can simply replace it with document.createElement. The overhead of $() is because it's a multi-purpose function. It can create an element, alias document.ready, wrap an array or object, grab elements from the DOM, an alias to jquery.find if given a context, and more.

You don't really need to go OOP on this one. A simple recursive function is all you need for this to work. Going the OOP route means you're creating instances of an object, in this case, Menu - an unnecessary overhead. If you want structure, the data is already your structure.

Try to batch the render, preferably all at once to the very end of the process. This is because DOM manipulation is slow. In your case, you already appended the list to the container before processing the descendants nodes. This means every time you append a descendant, the browser has to render that in the DOM.

Lastly, that <div> is unnecessary.

Here's a rewritten version using a simple recursive function. It runs 3~6ms depending on the browser's mood.

function createMenu(nodes, container){
  var list = document.createElement('ul');
  
  // Use native array.forEach
  nodes.forEach(function(node){
    var listItem = document.createElement('li');
    listItem.textContent = node.Name;
    list.appendChild(listItem);
   
    // If no children, return early to skip code below.
    if(!node.Children) return;
    
    // Process descendants next.
    var childList = document.createElement('li');
    createMenu(node.Children, childList);
    list.appendChild(childList);
  });
  
  // Only when the list is fully formed do we append it to the parent
  container.appendChild(list);
}

createMenu(children, document.getElementById('container'));

All modern browsers support ES5 which means array.forEach will exist. You can use that to replace $.each. The overhead of $.each comes from checking if it's an array or object and using the appropriate loop operation.

The same goes for the creation of li and ul. You can simply replace it with document.createElement. The overhead of $() is because it's a multi-purpose function. It can create an element, alias document.ready, wrap an array or object, grab elements from the DOM, an alias to jquery.find if given a context, and more.

You don't really need to go OOP on this one. A simple recursive function is all you need for this to work. Going the OOP route means you're creating instances of an object, in this case, Menu - an unnecessary overhead. If you want structure, the data is already your structure.

Try to batch the render, preferably all at once to the very end of the process. This is because DOM manipulation is slow. In your case, you already appended the list to the container before processing the descendants nodes. This means every time you append a descendant, the browser has to render that in the DOM.

Lastly, that <div> is unnecessary.

Here's a rewritten version using a simple recursive function. It runs 3~6ms depending on the browser's mood.

function createMenu(nodes, container){
  var list = document.createElement('ul');
  
  // Use native array.forEach
  nodes.forEach(function(node){
    var listItem = document.createElement('li');
    listItem.textContent = node.Name;
    list.appendChild(listItem);
   
    // If no children, return early to skip code below.
    if(!node.Children) return;
    
    // Process descendants next.
    var childList = document.createElement('li');
    createMenu(node.Children, childList);
    list.appendChild(childList);
  });
  
  // Only when the list is fully formed do we append it to the parent
  container.appendChild(list);
}

createMenu(children, document.getElementById('container'));