This plugin implements a flyweight design pattern for jQuery custom select controls. By only holding one visible control element in memory at one time, it aims to reduce the number of DOM accesses and event binding operations. This can result in significantly reduced page render times on larger forms. It borrows accessibility design patterns from the Filament Group's jQuery UI Selectmenu keyboard navigable ARIA plugin, currently included with JQuery-UI. It requires jQuery 1.4+ and jQuery UI 1.8.7+ Core to run.

1. Custom select element rage Or, how I learned to stop worrying and love the DOM Ray Brooks August 2011

2. Custom select element rage

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

6. LBi uses Very Big Form

7. It’s not very effective! Number of SELECT elements Load time (ms) ONE SELECT ELEMENT TAKES ~800ms TO RENDER IN IE8 problem?

9. 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+)

11. 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

15. Right, this shouldn’t take me very long

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

18. LET’S SEE SOME REAL WORLD PERFORMANCE TESTING, THEN

19. IE6 XPSP2 VM 60 SELECTS 312ms ~5ms/SELECT

20. IE8 XPSP2 VM 60 SELECTS 219ms <4ms/SELECT

21. Chrome 13 native 60 SELECTS 97ms <2ms/SELECT

22. HALLELUJAH

24. Examples of usage default $(&quot;select&quot;).flyweightCustomSelect(); with options $(&quot;select&quot;).flyweightCustomSelect( { optionfilter:'option,optgroup', pleaseselect:true } );

25. https://github.com/rayui/flyweight-jquery-custom-select And that’s why we can now begin to use custom selects on very big forms Thanks for listening!