#969 enhancement

Usage of native .classList for *className() methods when available

Reported by Michal | December 23rd, 2009 @ 11:47 PM | in 1.7

Firefox 3.6 implemented new .classList property for each element node.
(See https://developer.mozilla.org/en/DOM/element.classList for more info, HTML 5 spec http://www.whatwg.org/specs/web-apps/current-work/multipage/element... also as source)

.classList object, simply speaking, provides methods for manipulating with classes and determining if given node has given class.

There could be some performance gain when hasClassName(), addClassName() and removeClassName() methods used the classList methods (add(), remove() and contains() for setting and testing the class names). (There is a ticket in Bugzilla, which contains link to nice performance tests on following page https://bugzilla.mozilla.org/show_bug.cgi?id=501257 ).

Current support for .classList property is only in Firefox >= 3.6 (according to MDC documentation).

If you'll be interested, I could write a patch for this.
PS: Merry Christmas (for those who celebrate it :-))

Comments and changes to this ticket

  • Juriy Zaytsev

    Juriy Zaytsev December 24th, 2009 @ 08:47 PM

    • State changed from “new” to “enhancement”
    • Assigned user set to “Juriy Zaytsev”
    • Milestone set to 1.7

    Actually, last time I tested classList (about a month ago, or so) it was performing worse than custom implementation with caching.

  • Michal

    Michal December 25th, 2009 @ 01:32 PM

    I am attaching modified performace test for .classList property. (Original is from bugzilla bug #501257).

    File is measuring speed between more variants of elements' class manipulation. Values should be compared against rows named "NativeClassListWrapper", as this is the fastest implementation using direct .classList calls.

    I created a wrapper (PrototypeClassListWrapper), which uses original Prototype methods for class manipulation.
    Then I created another two wrappers, which are using modified methods for class manipulation in a Prototype way.

    Every element now contains eight another methods: element.ClassName_with_classList() and element.ClassName_with_classList_no_extension(). These methods are called in the two next Prototype test wrappers.

    First methods (*ClassName_with_classList) simple replace string manipulation using regexps with calls to .classList native methods. This solution was around 200% faster than original Prototype implementation.

    Second methods (*ClassName_with_classList_no_extension) are using native .classList methods as well, but in addition, element passed to the function is not being extended (no $(…) call). There was a speedup against previously mentioned implementation as well, but there was not a big difference.

    All my tests were performed on firefox 3.6b5 on Windows with JIT disabled.

  • Tobie Langel

    Tobie Langel February 25th, 2010 @ 10:20 PM

    • Tag changed from enhancement, section:dom to section:dom

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins