AngularJS: How to cache a rendered directive?

Question

I have a directive (), it renders a large number (>10000) of items in a table. It is used in one controller's view.

Normally, when I first visit this controller, it will take a long time to render the directive.

When I leave this controller and visit it again, it re-renders again. Is there a way to cache the rendered directive so that it can show instantly in the second visit?

Answer 1

just an idea, take the generated html and store it either in a service or in the local/session storage then you can check its validity using a timestamp or a data version and just reload that existing html into the container element, this would fix dependencies issues and would help you to build a more independent directive since you don't have to rely on the dom position and also this way several directive instances can render the same dataset if you use attributes for configuring your directive.

or you could render DOM in an asynchronous manner using a recursion function with a $timeout call something like

function Draw(data,index){
    if(idx==data.length)
        return;
    //draw element idx
    $timeout(function(){
        Draw(data,index+1);
    })
}

this way the directive will take longer but results will appear faster in the screen and you don't take the risk of blocking your browser

Answer 2

Is the performance hit the actual DOM rendering or some data processing that's done in the directive? If DOM manipulation is the issue, you could try hiding the content with an ng-show/ng-hide when you navigate away from the controller rather than unloading it. A good way to do this (if you're using ui-router) would be to put the directive in a parent view and have the content hidden or shown depending on which child view is active.

If it's data processing that's the issue, you can move the logic to a service. Services aren't unloaded when you change views, so it will be able to process the data once and supply it to the controller whenever is is loaded without additional processing.