Comparision of String and JavaScript/jQuery based Dom Element Creation Result and Conclusion

Please read
Part no.1 and

Part no.2 and

Part no.3
and

Part no.4
before reading this Part no.4

Result:

Time Spent to generate 100 tables in Minute : Seconds : MilliSeconds

	Firefox 3.6.13	Chrome 8.0.552.237	IE 9.0.79	Memory (Chrome) in KB
Test no.1	0:6:38	0:3:283	0:10:730	31,384
Test no.2	0:1:31	0:0:533	0:2:521	34,860
Test no.3	0:8:60	0:6:969	0:14:520	49,164
Test no.4	0:2:81	0:1:992	0:3:445	35,140

Now as test result are in, there are more perspective to compare both techniques in terms of
1- Time to Response
2- Memory Management
3- Extendibility
4- Readability
5- Modifiability
6- Object Oriented

Response Time:

Responsiveness could be seen easily in test no.2 and jQuery beats the string based object creation with a long distance.

Memory Management:

Even though test no.1 has better memory management but as we move to test no.3, there is a very noticeable memory consumption change. This is due to the fact that strings are immutable and with addition of strings, it will consume more memory and will not free any of it. Test no.2 and 4 were more or less common in memory consumption due to the fact that objects will get destroyed if they are not in use and will not occupy the memory.

Extendibility:

Extending to OnRow_Bounded in test no.2 proved to be better as we were doing the object processing and it was easy to update a td inside tr object and specially jQuery selector helped.

Readibility/Modifiability:

jQuery based technique has better readability. Strings will get hard as we have more things to add where as jQuery based dom creation has better techniques of handling adding attribute and events binding.

Object Oriented:

Dom creation based on string is not appreciated usually and jQuery based technique is object oriented.

Conclusion:

By comparing different perspective, it is clear that using jQuery or even javascript object based technique is always better in term of performance and realiability where as string based looked like better approach in small operations but lacks serious performance and memory management along with other perspective comparison.

Where to go from here:

Next time I will try to convert this program into a jQuery plugin that will convert the JSON object into a table or will try to come up with a better technique for displaying data using templates. That will help in understanding jQuery plug in creation.

I hope this will help in understanding of choosing right way when working with client applications that requires alot of data displaying and manipulation.

Download link for source code and documentation