Fastest way to create a nested treeview I am trying to create a dynamic Treeview in HTML using jQuery with following code,

Code with data and working example : https://jsfiddle.net/8jt0crv7/

var Menu = function(data) {
    this.data = data; 
};

Menu.prototype.render = function(root) {
    var ul = $("&lt;ul&gt;&lt;/ul&gt;");
    var li = $("&lt;li&gt;&lt;/li&gt;");
    li.append($("&lt;a&gt;&lt;/a&gt;", {
        href: this.data.url,
        text: this.data.title
    })).appendTo(ul);
    ul.appendTo(root);
    if (this.data.menu) {
        Menu.renderMenus(this.data.menu, $("&lt;li&gt;&lt;/li&gt;").appendTo(ul));
    }
};

Menu.renderMenus = function(menus, root) {
    $.each(menus, function(key, val) {
        var m = new Menu(val);
        m.render(root);
    });

console.time("Tree");

Menu.renderMenus(children, $("#container"));

console.timeEnd("Tree");


Some tests I ran on latest Chrome on Windows 10 are followings :

Tree: 129.593ms
Tree: 145.519ms
Tree: 179.777ms
Tree: 146.314ms
Tree: 174.272ms


Is there anyway I could improve performance of this code as I have trimmed it from a very big setup into example code. I am open to not use jQuery or any other plugin to make it faster.
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 &lt;div&gt; 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'));