Download - Flyweight jquery select_presentation
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!