DOM caching without AJAX
In my present company we are having huge enterprise java web app for our client. In the web UI of this app. we have provided them a good “OO Javascript†for their dropdown navigation.
Dropdown navigation system was written in such a way so that it can fetch navigational data from database after implementation of proper access control.
And after 2 years the navigation data are huge (over 5 level deep with so many children). And as a result for each request and response phase it has to re render all the elements dynamically and thus slowing down page rendering process.
We had very few option at this point of the project life cycle. We were caching the menu tree at server-side (session) but no other option to cache the rendering process.
We were looking for some technique to cache the rendering process ( DOM creation) in rendering the response phase except using frame based navigation. But for a Dropdown navigation system we have developed non-frame based navigation.
So options may be Flash based menu or Ajax call to server. Flash option was not a good solution because anyway we had to re-render the thing on every page refresh.
So the option remains is Ajax. But we were not in a position to take the risk of changing server side code and for security reason unable to introduce DWR for enabling Ajax.
So finally an old trick paid off. Frame is there as “top bar†for other notification system and so.
So I have started exploring the code and found that after first rendering menu code is generating elements which is cacheable (container.innerHTML) but the problem is when you attach events dynamically to an object it is not going to have any foot-print in your rendered DOM.
So we have just cached the DOM tree in the top frame and used it next time onwards with few “dynamic event attachment†codes with it.
if(!top.topFrame.menubarcache.length){ // check for first time rendering from server }else { createMenuBarAndChildrenContainer(); // create the containers var obj1= document.getElementById(''s1''); var obj2= document.getElementById(''menuChildren''); obj1 = top.topFrame.menubarcache; // storing from cache obj2 = top.topFrame.menuchildrencache; //stroing from cache attachevents(obj1); // attach events dynamicaaly attachevents(obj2); // attach events dynamicaaly }