DOM Performance

From RuntimeWiki

Jump to: navigation, search



HTML DOM Operation Performance

Detailed write-up


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


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.

Personal tools