If you want to display a large number of read-only rows, then prefer plain old JavaScript over framework code. This will improve the rendering performance. The code for this would look like the following snippet, which produces the same result as the logic covered in the earlier section. Let's take a look at the code:

<aura:component>
    <aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
     <div aura:id="main">
     </div>
</aura:component>

The controller code uses JavaScript ECMA5 script to draw the DOM via JavaScript:

({
    onRender : function(component, event, helper) {
        var mainBody = component.find("main").getElement();
        for(var i=0 ; i<=100 ; i++){
            var parentDiv = document.createElement("div");
            parentDiv.innerHTML = i;
            mainBody.appendChild(parentDiv);
            for(var j=0 ; j<=100 ; j++){
                var childDiv = document.createElement("div");
                childDiv.innerHTML = j;

                parentDiv.appendChild(childDiv);
            }
        }
    }
})

You should have noticed a couple of things from the preceding code:

• We have used the render event to make sure the DOM is completely loaded before we further manipulate the DOM.
• We use plain old JavaScript to build the DOM elements.

If you test the preceding code, you will see a drastic change in the rendering time of the result set. The following is a screenshot, using the Lightning Inspector plugin (notice that the rendering time, the time taken for the component to render on a browser, is less than in the previous scenario):