There is a legacy Java web app that we keep enhancing and improving for our beloved client. This application obtains various kinds of information from social networks via RESTful APIs and presents that information as timelines.
At the moment with an increase in the amount of info on the page, displayed in dynamically generated tabs, it started to periodically hang and it also took a significant amount of time to get loaded. Needless to say that we were using Knockout.js in there.
So the major problem was to identify the reason why our app is running slow and that reason was in the manipulation specifics of the web page DOM tree. KnockoutJS framework, with every change of variables, removes and creates new HTML code, which depends on these variables. The more things change, the more manipulation is accomplished with DOM tree, and longer the information is updated on the page. It is these manipulations that take most of the load time.
Since the tab keeps all the information about the timeline and all items in them, changing the tab removed all HTML code and created new code for those new tabs. After optimization, the entire HTML is not removed and regenerated, but is simply hidden by using the hide property. This prevented many DOM manipulations and made the web app a lot faster.
Before items were accumulated in the timeline with time and in a few hours there could be more than a thousand of them on the page, which also gave rise to a large number of HTML code and made it virtually impossible to switch tabs. Now, however, the number of items in the timeline is limited and they are not piling up, so if you need to access old items – they are loaded again transparently for a user.
Also, every item has an action panel, that has a dropdown with tags. For every item a new dropdown was originated, that generated a large amount of HTML. Now, however, for every item, a dropdown is generated when you click to open it. This reduced the amount of HTML and manipulations.