The Performance of .nodeName
Tuesday, November 24th, 2009 by Sebastian MarkbågeI was researching various options of traversing nodes for Slick and the DOM Range for MooTools. I realized that the nodeName property is incredibly slow to access in WebKit browsers. This is because it is working with qualified names (with namespaces and stuff) internally.
if (node.nodeName == 'A') // do something with anchor tag |
If you add case insensitive matching to that it will be even slower.
Instead I decided to try to check the constructor of the node to determine what type it is. For example for the anchor (A) tag, modern browsers will use the prototype of HTMLAnchorElement. This can potentially speed up these checks if you’re looking for a known node type.
if (node.constructor === HTMLAnchorElement) // do something // OR... if (node instanceof HTMLAnchorElement) // do something |
I ran this performance test in various browsers. It traverses all nodes in a large HTML documents and checks which ones are anchor nodes. It first does a blank run to eliminate any initialization quirks. Then it does a control run without the anchor check. Then it tests each of the above models.
IE6 and IE7 will obviously fail since they don’t support the HTMLAnchorElement constructor/prototype. For that case you would have to fall back to the nodeName property.
IE8 will be slightly slower with the constructor check than the nodeName check. But the difference is marginal in the overall scope of IE’s slowness.
WebKit will gain significant performance using the constructor check. The difference is relatively small to the overhead of manually walking the tree. However, if you take the control value from the blank run into account, the difference of just the node type checks will be significant (several times faster). The slow part is the WebKit DOM API, so you will see this with both JavaScriptCore and V8 (Safari and Chrome respectively).
Firefox will be slower on the first run for some weird reason. But in subsequent runs the constructor check will be faster than the nodeName check.
As a side note, node.tagName is no different. That is just an alias for node.nodeName.
In John Resig’s case sensitivity he discusses the case inconsistencies of the nodeName property in various contexts and the impact on performance. For example, in IE, the value of nodeName of unknown elements (like the new HTML5 elements) keeps it original case as in the markup.
This means that any proper CSS selector search for such elements would have to run a case-insensitive match against the nodeName property. Unfortunately the little trick I’ve shown above doesn’t remedy this problem because unknown elements will be lacking a known constructor. However, known Elements can still utilize this trick as a slight performance boost, while letting unknown element fallback to a case insensitive match.
UPDATE: I added a case-insensitive match to the performance tests using regular expressions – showing the added overhead compared to constructor checking.
Tags: DOM, JavaScript, Performance
April 26th, 2011 at 03:09
I have seen many useful things on your web-site about pcs. However, I have the thoughts and opinions that lap tops are still less than powerful enough to be a good option if you often do tasks that require lots of power, for example video editing and enhancing. But for net surfing, word processing, and a lot other popular computer work they are fine, provided you cannot mind small screen size. Thank you for sharing your opinions.
May 4th, 2011 at 09:44
The problem of slow-moving pc can be seen for pretty much each consumer who works using the pc for quite a while. The root associated with the concern is fundamentally in framework of file procedure and code of main software. Lots of developed temporary files, back-ups and source duplicates of great size is sure to impact Hard Disc capability. Extra processes and unimportant programs are sure to impact Ram memory capacity from the machine. To resolve the matter you need to utilize some difficult software that may remove unnecessary information carefully judging which can be irrelevant and that is essential.
May 20th, 2011 at 12:00
I’m amazed, I must say. Actually rarely do I come across a blog that’s educative and also exciting, and I want to let you know, you may have strike the nail on the head. Your idea is excellent; the difficulty is something that not enough people are speaking intelligently about. I’m very happy that I came throughout this in my search for something talking about this.
June 8th, 2011 at 20:00
I found this webpage on Google blogsearch and read some of your other posts. This is often one thing I’ve very wished to find out a lot of concerning I am finding it hard to search out trustworthy info about it, therefore thanks for the useful post.
July 15th, 2012 at 22:11
Undeniably consider that that you stated. Your favourite justification appeared to be at the net the simplest factor to keep in mind of. I say to you, I definitely get annoyed at the same time as people think about issues that they just do not understand about. You controlled to hit the nail upon the highest and also outlined out the entire thing with no need side effect , people could take a signal. Will probably be again to get more. Thank you
August 24th, 2012 at 07:24
As sports fans recognize, not all cities are created like when we are referring to the passion of its’ fan base. Of course, it would be colossal if all fans were as passionate for their conspire as Red Sox Nation and the fans that conk out “Mile-High” stadium to observation their Denver Broncos. Owing instance, the urban district of Atlanta great has had in a pickle stuffing all of their seats inasmuch as their numerous sports team. The Atlanta Braves went to the playoffs year after year in the 1990’s, but fans stopped showing up for the treatment of regular edible games. The NHL’s Atlanta Thrashers fool recently been bought forbidden and are inspirational north to Canada. With all that said, the Atlanta Falcons organize thrived in fresh years. At one of the biggest reasons pro attainment is simple. They contend in in the Native Football League. There is not a more in favour fraternity in the Harmonious States, and it has been this way for at least the mould 10 years. Many fans penury to draw their hands on official troupe goods, like jerseys. The problem is the price. A natural jersey can outlay as much as $60 in your nearby shopping mall. I will scenario a few simple-hearted steps on where you can realize cheap football jerseys at.
“mlb jerseys
September 10th, 2012 at 20:38
I have fun with, lead to I discovered just what I used to be looking for. You have ended my 4 day long hunt! God Bless you man. Have a great day. Bye
April 22nd, 2013 at 10:28
Well worded. Thanks for posting this. I will come again to find out more and inform my neighbors about your website.