Created by: mgcrea
It would be great if on the javascript side, for the 3.0 release, bootstrap could drop the sizzle
dependency. We can now easily get custom smaller jQuery builds. It would make sense with being "mobile first" where KBs matter a lot.
I'm currently reviewing a custom jquery2+bootstrap build for AngularStrap to pave the way for mobile apps there. Looks like most of bootstrap's javascript works with this custom build:
grunt custom:-ajax,-deprecated,-effects,-sizzle
This gives a 17KB file (min+gz) vs. 29KB, thus -42%. That's great and the jquery modularization/cleanup is only beginning.
Impact
We would rely on selector-native.js:
/*
* Optional (non-Sizzle) selector module for custom builds.
*
* Note that this DOES NOT SUPPORT many documented jQuery
* features in exchange for its smaller size:
*
* Attribute not equal selector
* Positional selectors (:first; :eq(n); :odd; etc.)
* Type selectors (:input; :checkbox; :button; etc.)
* State-based selectors (:animated; :visible; :hidden; etc.)
* :has(selector)
* :not(complex selector)
* custom selectors via Sizzle extensions
* Leading combinators (e.g., $collection.find("> *"))
* Reliable functionality on XML fragments
* Requiring all parts of a selector to match elements under context
* (e.g., $div.find("div > *") now matches children of $div)
* Matching against non-elements
* Reliable sorting of disconnected nodes
* querySelectorAll bug fixes (e.g., unreliable :focus on WebKit)
*
* If any of these are unacceptable tradeoffs, either use Sizzle or
* customize this stub for the project's specific needs.
*/
Refactor example
If we take a look at the current bootstrap-tab.js
implementation for the v2.3.1
release, to make it work with a sizzle-free build, we have to:
- replace
> .class
withchildren()
:
.find('> .dropdown-menu > .active') // unsupported without sizzle
could be replaced with:
.children('.dropdown-menu > .active')
- find a sizzle-free alternative to some positional selectors,
:first
&:last
(that do not behave like the css3:first-child
, etc.).
previous = $ul.find('.active:last a')[0] // unsupported without sizzle
could become:
previous = $ul.find('.active').last().find('a')[0]
Performance analysis
jsperf regarding theses changes : http://jsperf.com/bootstrap-sizzle/2
sizzle-free version seems 4 times faster!