Flyweight jquery select_presentation
Download as PPT, PDF0 likes689 views
The document discusses the challenges of styling custom select elements across different browsers, particularly highlighting issues with older versions of Microsoft’s Internet Explorer. It introduces a solution by Felix Nagel, which involves a fork of jQuery UI that allows for customizable and accessible select elements while optimizing performance and load times. The implementation of the flyweight pattern helps to improve page load speed and maintain functionality across major browsers.
Flyweight jquery select_presentation
- 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
- 3. 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
- 4. 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
- 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?
- 8. 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!
- 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
- 12. 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
- 13. Notwithstanding… Behaviourally identical to SELECT Accessible Semantic Graceful And of course…
- 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
- 23. 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
- 24. Examples of usage default $("select").flyweightCustomSelect(); with options $("select").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!
Editor's Notes
- #6: Client: Compare the Market