XST from Server-Side Code Generated to jQuery
This article was written to emphasize some of advantages and disadvantages of using jQuery.
What is jQuery?
jQuery is a small JavaScript library that includes support for manipulating the DOM, supports AJAX and it provides some basic graphical effects. The functionality can be enhanced with plugins. Compared with other toolkits, jQuery aims to change the way that web developers think about creating rich functionality in their pages. Minimal knowledges of Cascading Style Sheets (CSS), Extensible Hypertext Markup Language (XHTML), XML Path Language (XPath) and JavaScript are sufficient for manipulating page elements with jQuery.(For more details about jQuery visit http://jquery.com/)
jQuery in action
XST or XmlSmartTree is a custom ASP control, similar to DataGrid, which has as primary objective to display his data source as a tree. Beside that the control allow multiple skins on rows, contains search functionality and expend or collapse functionality for rows that have children. All Html code it’s generated on server-side, thus the control is represented in Html as an table with tr elements for each data source row. Every generated tr element is bound to JavaScript events like onmouseover, onmouseout, onclick etc. .
I used the XST control with a large data source (about 800 rows) and I noticed that the bound events didn’t work very quickly, in addition the web page size has reached almost 350 kilobytes. As a solution for this issues I started to replace the JavaScript events code with jQuery code.
Sample of jQuery code for click, mouseover and mouseout events:
jQuery('select all tr elements').hover(OverAndOut,OverAndOut).bind('click',ClickFunction); function OverAndOut(event){ jQuery(this).toggleclass('overclassname');} function ClickFunction(event){ jQuery(this).addclass('clickclassname')}
Conclusions:
After I replaced the JavaScript code, all events bound to the html code were removed and the page size was reduced to 240 kilobytes, but about execution speed I can not say that there are visible improvements.
Tags: .NET javascript jQuery
Posted in: Microsoft.NET
August 31, 2009
| 
Tiberiu Cojocariu | 
2 Comments
2 Responses
September 1, 2009 1
What browser did you used? The execution speed is different when using different javascript engines… How did you measure the execution speed on the 2 implementation? Can you provide some graphics, before and after?
September 8, 2009 2
I used IE (7 and 8). The main purpose of this replacement between JavaScript and jQuery was to reduce page size and page loading, that why I can not say that the execution speed was measured. Since the only result obtained is the decrease of the page with 33%, I think that graphics are not useful.
Leave a Reply