DOM Performance
From RuntimeWiki
Contents |
Title
HTML DOM Operation Performance
Detailed write-up
Description
All HTML DOM related JavaScript calls are significantly more expensive than most other operations across all browsers. On Safari, DOM calls cost from a few hundred percent to a few thousand percent comparing to other JavaScript operations. On Internet Explorer, DOM calls can cost as high as tens of thousands of percent. Given that DOM operation is essential to almost every browser-based application, improvement in this area can significantly broaden the applicability of Ajax applications.
The table below shows the performance of DOM operations on three major browsers (the percetage is calculated relative to a base operation on that browser,See reference A Study of Ajax Performance for details):
IE7 FireFox Safari
HTML DOM Operation Time(us) % Time(us) % Time(us) %
Change text using innerHTML 469.0 9979% 234.0 6000% 109.0 7032%
Create a text node on HTML Dom 1093.0 23255% 156.0 4000% 110.0 7097%
Change the class name of an element 422.0 8979% 47.0 1205% 109.0 7032%
getElementById 86.8 1846% 15.7 401% 3.9 252%
getElementsByTagName("div") 153.1 3257% 18.0 462% 5.5 352%
getElementsByName 93.8 1995% 44.6 1142% 4.7 303%
placeDiv.getAttribute("id") 29.7 632% 46.8 1200% 5.5 352%
placeDiv.attributes["id"] 31.3 665% 225.0 5769% 6.3 403%
Background material that request this feature
Discussion
Sam Lie Comments
Poor DOM Perfomance or just poor set of DOM node access API? For example, as yet we don't have a function to search for specific child nodes from the offset of a certain parent node. ie We have document.getElementByID but not div.getElementByID; also xPath available for document only but not for div. Without these more direct access/search for node often we end up having to slowly loop through the whole DOM just to get a specific DOM element inside a given DIV.
Brad Neuberg's comments
BTW, DOM performance is the number one bottleneck (after network latency) for slow Ajax applications. Ever tried to create a giant table that allows dynamic sorting? Just trying to blit the rows of the table to the screen can get slow very fast, resulting in many exotic (fun?) hacks to create such a thing.
Phase I Voting - Vote for Your Top 5 Features
NOTE: PHASE I VOTING IS NOW OPEN. (2008-04-01) We have now changed the voting procedure. Instead of putting votes on each separate wiki page, we are asking people to cast their Phase I Votes on the following wiki page:
Phase II Voting
More about this later.
