Minimizing Reflows in an Ajax Application

Reflows in an Ajax application should be minimized as much as possible so that data flow will be controlled and bandwidth will be minimized. Developers have to look out for this type of behavior in their Ajax application since it could happen since the application streams information asynchronously and continuously.

Usually, the server should be able to stream the information once. Since the server streams the information continuously, it is possible that the same information could be streamed and reflow happens. If we are able to minimize reflows, we will be able to build a faster Ajax application because only the bandwidth has been minimal.

The root of reflows is found in DOM Tree. On its original state, the DOM Tree should never cause reflows because it has been customized to perform without any reflows. On the other hand, changes will start to happen on the DOM Tree especially when the application is tweaked to conform to other external languages besides JavaScript. When DOM Tree is changed, there is a possibility that reflow will happen.

Although reflow based on DOM Tree will happen, there different ways of preventing them based on its root cause.

Among those that can control reflow caused by DOM Tree is the browsers. Most browsers today have a built in functionality that stops reflow from an Ajax application. However, their ability to prevent reflow is only based on two causes: when you change the invisible element in the DOM Tree and changing an element to be on “off-DOM” mode. These could trigger reflows but most browsers could easily prevent reflows if the causes were the ones just mentioned.

On the other hand, there are many ways to trigger reflow that this behavior in the application might just happen. The best way to combat this problem is to create changes in conditions in an Ajax application to happen.

Here are some of the steps to combat reflow in an Ajax application.

First is to change cssText value in the application. Reflows will happen when the application stays in the same value when DOM Tree has been changed. CssText might not be able to interpret the command freely and will end-up streaming the information from the server continuously even though the information is already available in the client side. The browser will let this happen since it will just interpret the information streamed as new data.

Another trick is to use setAttribute to change the style value of the application. Unfortunately, setAttribute is only possible in Mozilla based browsers. If you are running in IE, using setAttribute is not possible.

Lastly is to change the class name of the CSS. The good thing about changing the class name is you can make some changes from the root of the CSS instead of changing the entire information. Maintenance is easier since it does not require the developer to look at every line of code.