High Performance Real time development Practices &

Patterns
For RIA/Web based Applications
By Reddappa Gowd Bandi
Dated on 25th Sep 2007

Introduction:

One of the most important challenges for today’s enterprise based

applications is designing and developing & managing the high
performance UI. The conventional practices of building the UI based
applications are unable to give a satisfactory answer for all performance
related questions. And hence UI Architects & Practitioners always look for
some innovative ways to overcome these performance hurdles which
intern related to Architectural goals.

Based on my experience I have recollected and collated into this artifact.

Most of the practices today have got the right evidences for why we need
to do in that way. And also support from the technology and community is
making life simpler.

The main guidelines/by-laws for building an exceptional UI are

1. Richness in look and feel

2. Richness in Feature sets
3. Richness in UI reactiveness towards end user
4. Richness in performance related things
5. Richness in pleasing end user to Wow. And also
6. Richness in adopting right high performance development practices
for usability experiences.

Some basic rules to be followed to achieve high engineering UI

performance are as follows.

1. Walk through the architectural requirements correctly and don’t do

anything unnecessary.
2. And also don’t do anything until it becomes important and necessary
to implement.
 3. Apply always the best practices and never let the spirit down in
implementing the same. Never compromise on best practices
implementation.
4. When user feels amount of slowness in the application,
a. They need to be informed about the operation is in progress
through some informatory messages.
b. If the user interface is reactive always, end user never feels
the slowness to one extent.
5. You can cheat end user by first updating the UI and do the work.
a. Need to lock the UI through some opaque surfaces or lock all
part of the UI components.

Handling High performance on Page Load time:

The real time best practices in the area as listed as follows.

1. The page loading life cycle will have three different states. Handling
the data and task handling at different stages makes UI is more
reactive towards user.
a. Load state
b. Rendering state
c. Runtime state
2. Eliminate making multiple page level Http requests.
3. Don’t forget to add an Expires header.
4. Use the request/response paradigm through gzip compression
streams. This will depend on case by case. If the data is more than
20KB go for this option.
5. Build JS components are gzip aware.
6. Put the CSS at the top and move scripts to the bottom.
7. Avoid CSS expressions at most.
8. Make Javascript and CSS external entities.
9. Reduce DNS look ups.
10.Minify the Javascript components using minifying techniques.
11.As for as possible avoid redirects. This has to initiate as a new
request and hence more expensive.
12.Removing duplicate scripts. This potentially minimizes the size of the
Javascript.
13.UI pages should not have any blank spaces between the lines. This
potentially increases the size of the page. This intern affects the load
time.
14.Supply pre-compiled JSP/JSF pages and provides an option for load
on start up.
15.Configure ETags accordingly. This really helps the components are
part of the DOM. And these actions will be performed at loading of
the DOM itself. You need not wait till the page is loaded.
16.Implement appropriate caching mechanisms for read-only data.
17.Suggestible to have HTML Cache at page level not at the global JS
level. This always causes performance drawdown in terms of
backward look ups.
18.Combine CSS and Javascript files and minify the same. In fact
almost all the browsers are supporting this feature. This will save the
bandwidth time as well as load time. This will not stop the processing
stage of the DOM.
19.Optimizing the images using optimizing techniques using tools like
pngOptimizer.
20. Loading and parsing of HTML, CSS and Javascript are costly. And
hence make use of the Javascript libraries and techniques
effectively.
21. Look into the option of splitting large Javascript (any files more than
300KB) files into smaller files. This technique is very useful when the
parsing and interpretation of Javascript takes an expensive time.
22.Load the HTML/CSS/JS on demand which I call it as a lazy loading.
Again this depends on case by case. For example, rather loading JS
files at page load time, load through the scripts on demand.
23.If you look for the packages like Yahoo UI, DOJO Package, JSAN
Import, they work on the concept of lazy loading. These packages
will have direct interfaces to do lazy loading. These are applicable
for both JS and CSS.
24.Redering time best practices are,
a. Be aware of added page weight in terms of more pay load and
heavy utility logic at page level.
b. Event handlers to be attached once DOM is ready. This way
processing of DOM will not be stopped.
c. Close HTML tags explicitly to speed up the parsing. Always
implicit closed tags pose more added cost to the HTML
parsing.
d. Consider flushing the buffer at early stages itself. For
example, download of external CSS files may get a head start.
And hence it will not influence the rendering speed. This is at
rendering state level. Browsers should buffer their inputs
before displaying the same. This is very important.
e. Most DOM Operations can be accomplished before onLoad
event has fired. For example,
Window.event.onDOMReady() {
doActionSpecified();
 }
f. Use Post-load Script loading which makes page load faster
and fully functional. The below snippet will be added before
</body> tag.

<script>

window.onload = function () {
var script = document.createElement("script");
script.src = /uuuu.js;
document.body.appendChild(script);
};

</script>

g. Sometimes preloading of resources like JS/CSS/Images

potentially enhance the user experience. However, I always
feel this will be an Anti-pattern. Because sometimes,
preloading will cause more time and user experience will be
worsen. This will be applied based on case by case.

Javascript level best practices:

1. Don’t have many spaces between the script lines. This

potentially increases the size of the JS content when it is
parsing. This is a regular anti-pattern has been witnessed when
you want to implement various options to test.
2. Couple of real time practices needs to be followed at page
load/rendering time. Refer to the above practices.
3. Suggest to have a inheritance driven JS classes than name
space driven. This potentially helps to reuse the classes and
eliminate most of the duplicate code.
4. Minimize the number of global Java script variables.
5. Use appropriate locale specific JS libraries like QForms for
different locales needs to be supported.
6. Keep JS functions are as generic as possible. And provide
prototype interface to the developers. They will add runtime
behavior where and when necessary by inheritance model.
7. Optimize the initialization of the objects in the javascript. This
potentially causes some memory related costly performance
issues.
function doJob () function doJob () {
{...} this.bar = function () {...};
doJob.prototype.ba }
r = function () {...};
8. Try to make use of some Javascript variables. Stop creating as
many variables within and outside the functions. Rather people
will add the properties to the objects using prototype properties.
9. Eliminate using try and catch blocks as maximum as possible.
10.Reduce amount of symbolic look ups in the inheritance chain of
objects. For example,
Var a=2;
Function f(h)
{
Var b=1;
d= h+b+a;

}
F(10);
Look up is performed every time a variable is accessed. And hence
variables will be resolves backwards from most specific to least
specific.

11.Declare and use variables in the same scope and avoid using
global variables to the reasonable extent.
12.Cache the return values from expensive look ups in the local
variables. For example,
var arr = ...;
var globalVar = 0;
(function () {
var i, l, localVar;
l = arr.length;
localVar = globalVar;
for (i = 0; i < l; i++) {
localVar++;
}
globalVar = localVar;
})();

13.When you use the prototype chain, accessing the members

from primary object (members bound to the primary object) is
about 30 times faster than accessing the members defining in
anyware of the prototype chain. This is something like Depth of
prototype tree does matters. Because longer the prototype
chain, look up will be slow down. For example,

function A () {}
A.prototype.prop1 = ...;
 function B () {
this.prop2 = ...;
} B.prototype = new A();

var b = new B();

14.If you need to create many objects, consider adding members

to the prototype rather than adding individual objects in the
object constructor. This reduces memory consumption.
15. Don’t use eval function. The reason being is, the string which
passed to the eval function needs to be compiled and
interpreted.
16. Never pass a string to the setTimeOut and setInterval
methods. Rather suggestible to have a anonymous function.
For example,

setTimeout(function () {
// do the scheduled one.
}, 100);

17.Never use Function constructor unless it is necessary.

Because it makes it does have some importance in the
performance world.
18.Optimize string concatenation accordingly using Array.join
method. However, I suggest don’t use this for simple
concatenations.

var i, s = “”; var i, s = [];

for (i = 0; i < 10000; i++) { for (i = 0; i < 10000; i++) {
s += “x”; s[i] = “x”;
} }
s = s.join(“”);

19.Optimize your regular expressions if any by not initializing

RegEXp constructor. Rather to use regular expression literals.
20.Use Javascript level cache effectively for a variable many
times read. Use some kind of HTML Cache implementation
and be part of the span tags. And write a simple JS function to
put and get the values from <Span id=”brg”> tag.
21.Use the appropriate function module pattern variation to
implement the cache accordingly. For example,

var fn = (function () {
var b = false, v;
return function () {
if (!b) {
v = ...;
b = true;
}
return v;
};
})();

22.Other Cache pattern is, function store pattern variation to

implement the cache for certain cases. For example,

function fn () {
if (!fn.b) {
fn.v = ...;
fn.b = true;
}
return fn.v;
}

23. Make sure javascript threads which are long running

processes (more than 300ms) will be divided into smaller
tasks and chain them using setTimeOut method. This
practices eliminates the frozen of browser UI. This will
enhance the end user experience.
24.Sometimes primitive operations are faster than function calls.
However, this will depend on case by case.
25.Avoid using try, catch blocks in performance critical areas.
This will depend on the developer’s discretion. For example,

var i; var i;
for (i = 0; i < 100000; i++) { try {
try { for (i = 0; i < 100000;
... i++) {
} catch (e) { ...
... }
} } catch (e) {
} ...
}
26. For any branching condition like if.. else, if the branching
condition does not change, use outside the function rather
using in side of it.

function fn () { var fn;

if (...) { if (...) {
... fn = function () {...};
} else { } else {
... fn = function () {...};
} }
}

27.Use JSON in the place of XML for data exchange because it is

easier, cheaper and less overhead compared to the XML.
28.Be aware of number of Http1.1 connections opened in the
Javascript. This is the issue still needs to be addressed by the
different vendors. This problem is solved only in the Firefox.
29.Programmatically plan the network timeouts when you use the
XMLHttpRequest from Javascript.
30.Avoid using Javascript for layout related. Rather use Pure
CSS instead. This eliminates problems of maintainability. For
example,

Window.onResize is really kills the performance.

31.To send real time notifications to the browser, Use always

push techniques rather than poll techniques from Javascript.
32.Use appropriate performance tools for client side profiling.
JSLex and Task Manager will be reasonably good tools for
mid range projects. And the plan the necessary plan of actions
based on the performance reports.