There can be no better way to demonstrate how some ajax examples actually work and how cool they are in terms of improving graphical rendering performance* other than showing them live how it deliver performance boast where it is, chief and foremost, its goal in adding ubiquity to the web browsing experience.
These ajax examples shown live are tailored to address one of the most formidable challenges in html object rendering, that is, the recursive display of tree nodes. Trees are such a pain in terms of resource usage because it requires recursive calls to functions when a child is present in a node.
The demo page defaults to ajax-enabled, which means all the update and query functionality on the nodes are done via transmission of tiny http request to the server and render the portion of the page that need updating. If you’re using Firefox or other browser with similar plugin, you can actually see the size of request and the the corresponding response.
It is worth taking that in these ajax examples, the tiny requests are intentionally displayed on the lower left pane to give a glimpse of the size of the request and response communicated between the browser and the web server. The result is quite astounding taking into account the server piping out minimal data. and the leverage of the host computer’s speed doing the actual rendering of the content.
To see the actual rendering display when ajax is disabled, you may click the button “Disable Ajax Demo” and see for yourself the delay. The tree rendering is done by the server and for each node operation, the server will gather all the nodes plus the fethed static data and do pre-rendering on its side and sending them back every time the user sent a request.
You may find that significant speed improvement of the graphical tree rendering when comparing the ajax-enabled operation and non-ajax or traditional rendering. Please take note that for these ajax examples, the source code can be seen via Browser View Source menu and you will see the node object being used to support ajax functionality.
These ajax examples make-used of the Prototype library but it would be easy to do the implementation using the jQuery or extJS library. The principle remains the same – that is, update only the node area where it simply matters or just the one requiring a server update.
Please take note that there are still quite a number of subtle bugs on tree rendering. However, since this is just a demo, there is no immediate need to fix them as the site is only intended for performance comparison and not for production-grade deployment.
*A case in point for such concern of intensive resource usage of tree views is the Microsoft fairly recent overhaul of their File Explorer where some of the images e.g. the dotted horizontal and vertical image lines are intentionally removed from their traditional File Explorers ostensibly to improve performance. Obviously, File Explorer is heavily used to traverse not only hundreds but thousands of files and directories all stored in a local PC or network.
Related Resources: