Skip to content
GitLab

[v3] Drop the sizzle dependency to allow smaller builds targeting mobile devices

Closed Administrator requested to merge github/fork/mgcrea/patch-jqlite into 3.0.0-wip

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:

  1. replace > .class with children():

bootstrap-tab.js l.82

.find('> .dropdown-menu > .active') // unsupported without sizzle

could be replaced with:

.children('.dropdown-menu > .active')
  1. find a sizzle-free alternative to some positional selectors, :first & :last (that do not behave like the css3 :first-child, etc.).

bootstrap-tab.js l.52

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!