Custom select element rageOr, how I learned to stop worrying and love the DOM

Ray BrooksAugust 2011

Custom select element rage

INPUTS! Y U NO STYLE?

INPUT, BUTTON, TEXTAREA, SELECT

• Levels of CSS support for these vary• It’s fiddly• It’s boring• You achieve inconsistent results• Multipart file inputs are a unique form (sic) of EVIL• But worst of all…

Microsoft’s TRIDENT rendering engine (IE 6,7,8) uses O/S controls as opposed to browser objects and the two are different beasts. C++ doesn’t understand CSS.

WE CAN’T STYLE THEM AT ALL

A wild solution appears!• Felix Nagel has forked & extended Filament’s jQuery UI• His solution requires jQuery & Javascript• It’s styleable• It’s accessible• It supports ARIA• Seems to work well even in IE6+!

Check out the repo: https://github.com/fnagel/jquery-ui/

*le jQuery UI SelectMenu

Felix Nagel’s fork of jQuery UI, I choose you!

LBi uses Very Big Form

It’s not very effective!

Number of SELECT elements

Load time (m

s)

ONE SELECT ELEMENT TAKES ~800ms TO RENDER IN IE8

problem?

OH NOES!• Complex elements such as SELECT have been simulated in full using much markup and many event bindings• The SELECT replacement code in particular makes many DOM accesses via jQuery, which is slow• It’s not such a big problem with browsers that can optimise Javascript, however…• This is a very big page, and• Not all browsers can optimise Javascript• OH, SWEET IRONY! They’re also the browsers we are most interested in supporting!

The Challenge

Client’s page load time is 90s in IE8, 170s in IE7 + IE6!Reduce page load time to under 10 seconds for all level 1 and 2 browsers (Chrome 10+, FF 3+, IE7+, Safari 3+)

Flyweight pattern

“The intent of this pattern is to use sharing to support a large number of objects that have part of their internal state in common where the other part of state can vary.”

http://www.oodesign.com/flyweight-pattern.html

Our solution• Delay as much as possible until after page load completes• Construct only one anchor to replace one SELECT element• Share one drop down menu between all SELECT elements• Construct markup as strings, which is fast

• Convert strings to objects as late as possible• Cache SELECT values in memory for fast retrieval• Bind events only to top level elements and use bubbling• Optimise all loops• For speed, use as much pure Javascript as possible

Notwithstanding…• Behaviourally identical to SELECT• Accessible• Semantic• Graceful

And of course…

Right, this shouldn’t take me very long

Hm. I obviously need to get better at estimating this kind of shit

LET’S SEE SOME REAL WORLDPERFORMANCE TESTING, THEN

IE6 XPSP2 VM60 SELECTS312ms~5ms/SELECT

IE8 XPSP2 VM60 SELECTS219ms<4ms/SELECT

Chrome 13 native60 SELECTS97ms<2ms/SELECT

HALLELUJAH

flyweight-jquery-custom-select• Lightweight• Extremely fast• Semantic markup• Fully customisable keyboard navigation• Fully customisable class names• Intelligent typeahead • Option group support• Enable/disable• Graceful destroy, original select maintains state• Supports CSS3• Supports PIE.htc for IE6/7/8 CSS3 emulation• Toggle hide first option element (for Please Select, etc)• Binds to original select change event• Auto scroll• Only 8KB compressed• Works in all tested major browsers

• FF 3.6/5.1, Chrome 11/12, Safari 5, IE 6/7/8

Examples of usage

default $("select").flyweightCustomSelect();

with options $("select").flyweightCustomSelect({

optionfilter:'option,optgroup',pleaseselect:true

});

https://github.com/rayui/flyweight-jquery-custom-select

And that’s why we can now begin to use custom selects on very big formsThanks for listening!